carousel photogallery

Buba Design

Nuovo Utente
12 Ott 2012
5
0
0
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Nuovo Utente
12 Ott 2012
5
0
0
HTML:
<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>
Codice:
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
 
Ultima modifica di un moderatore:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
manca il codice javascript
devi intervenire in questa funzione Photogallery.create
ma non credo che sia per niente semplice
 

Buba Design

Nuovo Utente
12 Ott 2012
5
0
0
$_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