carousel photogallery

[Buba Design]

ciao a tutti...spero di scrivere nella parte giusta del forum
avrei un problema con una galleria di immagini (composta da un carousel di img in anteprima e subito sopra di esso c'è la visualizzazione dell'img in formato 800x600)nella visualizzazione da pc funziona tutto correttamente ma con i pad e iphone lo scrolling overmouse del carousel ,giustamente, non funziona.
Il problema è che non vorrei modificare completamente la galleria ed inserire solamente dei pulsanti laterali nel carousel e io di asp non capisco quasi nulla...qualcuno mi può consigliare cosa fare?
grazie mille!!!

 

[criric]

Ciao.
è difficile capire e provare a darti una soluzione senza un po di codice
probabilmente stai parlando di jquery e di qualche plugin in particolare

forse ti conviene cambiare il codice con uno compatibile

 

[Buba Design]

<div id="photogallery_container2"></div>
<script type="text/javascript">
var pgThumbs = new Array("1s.jpg", "2s.jpg", "3s.jpg", "4s.jpg", "5s.jpg", "6s.jpg", "7s.jpg", "8s.jpg", "9s.jpg", "10s.jpg")
var pgImages = new Array("1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg", "10.jpg")
var obj = document.getElementById("photogallery_container")
Photogallery.create(obj, pgThumbs, pgImages, "imagesdeslampade/", 2, 0);
</script> </div>

body{
	background-color: #ffffff;
}
.photogallery_container {
	width:800px;
	height:698px;
  	margin: 0px auto;
	border:1px solid #BFBCB3;
	margin-top:0px;
	background-color:#ffffff;
}
.photogallery_bgthumbs{
	width:800px;
	background-color:#ffffff;
	height:98px;
	filter: alpha(opacity=100);
	opacity:1;
	-khtml-opacity:1;
	overflow:hidden;
}

.photogallery_thumbs_slider{
	margin-right:4px;
}

.photogallery_thumbs_slider div{
	float:left;
	padding:4px 4px 4px 4px;
}

.photogallery_thumbs_slider div img{
	width:120px;
	height:90px;
}

.photogallery_thumbs_slider div a{
	filter: alpha(opacity=100);
	opacity:1;
	-khtml-opacity:1;
}
.photogallery_thumbs_slider div a:hover{
	filter: alpha(opacity=90);
	opacity:0.9;
	-khtml-opacity:0.9;
}

come faccio ad inserire due pulsanti per lo scroll a sinistra e a destra nei thumbs??

grazie mille

 

[criric]

manca il codice javascript
devi intervenire in questa funzione Photogallery.create
ma non credo che sia per niente semplice

 

[Buba Design]

$_2A=function(v){if(!v)return [];var len=v.length||0,results=new Array(len);while(len--)results[len]=v[len];return results;}
Function.prototype.$_B=function(){if(arguments.length<2&&arguments[0]==undefined) return this;var __method=this, args=$_2A(arguments),object=args.shift();return function(){return __method.apply(object,args.concat($_2A(arguments)));}}
Function.prototype.$_BE=function(){var __method=this,args=$_2A(arguments),object=args.shift();return function(event){return __method.apply(object,[event||window.event].concat(args));}}
Function.prototype.$_C=function(){if(!arguments.length)return this;var __method=this,args=$_2A(arguments);return function(){return __method.apply(this,args.concat($_2A(arguments)));}}



var Photogallery_ = function(obj, iThumbs, iBig, path, step, iIndex) {
this.pg = obj;
this.path = path;
this.step = step;
++Photogallery.counter;

this.intervalId = null;
this.sliderX = 0;
this.dir = false

this.pg.className = "photogallery_container"
this.loader = document.createElement("img");
this.loader.src = "photogallery_images/loading.gif";
this.loader.style.position = "absolute";
this.loader.style.visibility = "hidden";
this.loader.zIndex = 999;
document.body.appendChild(this.loader);

var iLoader = Photogallery.getInfo(this.loader);
var iPG = Photogallery.getInfo(this.pg);
this.pg.iWidth = iPG.width;
this.pg.iHeight = iPG.height;
this.pg.iLeft = iPG.left;
this.pg.iTop = iPG.top;

var x = this.pg.iLeft + ((this.pg.iWidth - iLoader.width) / 2);
var y = this.pg.iTop + ((this.pg.iHeight - iLoader.height - 100) / 2);
this.loader.style.left = x + "px";
this.loader.style.top = y + "px";

var bgThumbs = document.createElement("div");
bgThumbs.className = "photogallery_bgthumbs";
bgThumbs.style.position = "relative";
this.pg.appendChild(bgThumbs);
var bgThumbs = this.pg.getElementsByTagName("div")[0];
var slHeight = parseInt(bgThumbs.offsetHeight);
bgThumbs.style.top = (this.pg.iHeight - slHeight) + "px";

var thumbsContainer = document.createElement("div");
thumbsContainer.id = "x_photogallery_thumbsContainer_" + Photogallery.counter;
thumbsContainer.style.position = "relative";
thumbsContainer.style.overflow = "hidden";
thumbsContainer.style.height = slHeight + "px";
thumbsContainer.style.width = "100%";
thumbsContainer.style.top = (this.pg.iHeight - (slHeight * 2)) + "px";

this.pg.appendChild(thumbsContainer);

this.slider = document.createElement("div");
this.slider.className = "photogallery_thumbs_slider";
this.slider.style.position = "relative";
this.slider.style.left = "0px";
this.slider.style.height = slHeight + "px";

for (var i = 0; i < iThumbs.length; i++) {
var tsDiv = document.createElement("div");
var a = document.createElement("a");
a.setAttribute("href", "javascript:void(0);");
a.innerHTML = "<img src=\"" + path + iThumbs + "\" border=\"0\" alt=\"\" />";
Photogallery.addEvent(a, "click", this.show.$_B(this, iBig));
tsDiv.appendChild(a);
this.slider.appendChild(tsDiv);
}
thumbsContainer.appendChild(this.slider);
this.slider.style.width = (parseInt(tsDiv.offsetWidth) * iThumbs.length) + "px";
if (iIndex !== false) {
var i = Number(iIndex);
if (isNaN(i) || i < 0) i = 0;
this.show(iBig);
}
if (parseInt(this.slider.style.width) > thumbsContainer.offsetWidth) {
Photogallery.addEvent(thumbsContainer, "mouseover", this.start.$_BE(this));
Photogallery.addEvent(thumbsContainer, "mousemove", this.update.$_BE(this));
Photogallery.addEvent(thumbsContainer, "mouseout", this.stop.$_BE(this));
}
}

Photogallery_.prototype.start = function(e) {
if (this.checkMouseEnter(this.slider.parentNode, e)) {
this.dir = this.getDirection(e.clientX);
this.intervalId = setInterval(this.slide.$_B(this), 10);
}
}

Photogallery_.prototype.stop = function(e) {
if (this.checkMouseLeave(this.slider.parentNode, e)) {
clearInterval(this.intervalId);
this.intervalId = null;
this.dir = false;
}
}

Photogallery_.prototype.getDirection = function(evX) {
var x = evX - this.pg.iLeft;
var limit = parseInt(this.pg.iWidth / 3.5);
if (x < limit || x > (this.pg.iWidth - limit)) {
if (x < this.pg.iWidth / 2) {
return "left";
} else {
return "right";
}
} else {
return false;
}
}
Photogallery_.prototype.update = function(e) {
this.dir = this.getDirection(e.clientX);
}


Photogallery_.prototype.slide = function() {
if (this.dir == "right") {
var sw = parseInt(this.slider.style.width);
if (Math.abs(this.sliderX) + this.pg.iWidth >= sw) {
this.setSlideX(this.pg.iWidth - sw);
} else {
this.setSlideX(this.sliderX - this.step);
}
} else if (this.dir == "left") {
if (this.sliderX >= 0) {
this.setSlideX(0);
} else {
this.setSlideX(this.sliderX + this.step);
}
}
}

Photogallery_.prototype.setSlideX = function(x) {
this.slider.style.left = x + "px";
this.sliderX = x;
}

Photogallery_.prototype.show = function(img) {
this.pg.style.opacity = "0.7";
this.pg.style.khtmlOpacity = "0.7";
this.pg.style.filter = "alpha(opacity=70)";
this.loader.style.visibility = "visible";
var i = new Image();
i.onload = function(img) {
this.loader.style.visibility = "hidden";
this.pg.style.backgroundImage = "url(" + img.src + ")";
this.pg.style.backgroundPosition = "center top";
this.pg.style.backgroundRepeat = "no-repeat";
this.pg.style.opacity = "1";
this.pg.style.khtmlOpacity = "1";
this.pg.style.filter = "alpha(opacity=100)";
}.$_B(this, i);
i.src = this.path + img;
}



Photogallery_.prototype.containsDOM = function(container, containee) {
var isParent = false;
do {
if ((isParent = container == containee)) break;
containee = containee.parentNode;
} while (containee != null);
return isParent;
}

Photogallery_.prototype.checkMouseEnter = function(element, evt) {
if (element.contains && evt.fromElement) {
return !element.contains(evt.fromElement);
} else if (evt.relatedTarget) {
return !this.containsDOM(element, evt.relatedTarget);
}
return false;
}

Photogallery_.prototype.checkMouseLeave = function(element, evt) {
if (element.contains && evt.toElement) {
return !element.contains(evt.toElement);
} else if (evt.relatedTarget) {
return !this.containsDOM(element, evt.relatedTarget);
}
return false;
}






var Photogallery = {
counter : 0,
create : function(obj, iThumbs, iBig, path, step, i) {
if (step == undefined || step == null || isNaN(step)) step = 5;
if (i == undefined || i == null || isNaN(i) || i < 0 || i > (iBig.length - 1)) i = 0;
Photogallery.addEvent(window, 'load', function(obj, thumbs, big, path, s, i) {
new Photogallery_(obj, thumbs, big, path, s, i);
}.$_C(obj, iThumbs, iBig, path, step, i));
},
addEvent: function(obj, evType, fnc) {
if (obj.addEventListener) {
obj.addEventListener(evType, fnc, false);
} else {
obj.attachEvent('on'+evType, fnc);
}
},
getInfo: function(obj){
var oLeft = 0;
var oTop = 0;
var oTag = obj;
do {
oLeft += oTag.offsetLeft;
oTop += oTag.offsetTop;
oTag = oTag.offsetParent;
} while (oTag.tagName.toUpperCase() != "BODY" && oTag.tagName.toUpperCase() != "HTML");
var oWidth = obj.offsetWidth;
var oHeight = obj.offsetHeight;
if (isNaN(oWidth) || isNaN(oHeight)) {
oWidth = parseInt(obj.style.width);
oHeight = parseInt(obj.style.height);
}
return {
left : oLeft,
top : oTop,
width : oWidth,
height : oHeight
}
}
}



Spero sia il codice giusto...
Per risolvere il problema dello scrolling overmouse su ipad e iphone ho provato anche ad aggiungere degli script : jquery.touchme e WKTouch
Con firefox per android il problema l'ho risolto ma invece sia su ipad che su iphone (anche con IOs 6) continua a non funzionare :-(
Grazie mille