Buongiorno,
scusate se rompo ma mi sto trovando in un grosso rompicapo che non so come risolvere,
ebbene ho avuto bisogno di realizzare uno slideshow sulla base di questo esempio:
http://pasqualedistasio.com/?p=6
ebbene tutto a posto, nel senso che sono riuscito ad adattare il codice alla volontà del mio cliente, solo che ora mi è stato chiesto di fare in modo che il div contenente i thumbs, sparisca quando il mouse esce dall'immagine principale e che riappaia quando il mouse torna sull'immagine principale in modo da scorrere le immagini.
Vi posto il codice che ho creato, le inof sulla posizione delle immagini è presa da un db
questa è la pagina con photogallery.php
<div id="center_content" class="box_shadow box_corner">
<div id="photogallery_container"></div>
<div id="photogallery_container2"></div>
<script type="text/javascript">
var pgThumbs = new Array(
<?php
$conta = count($id_thumb);
for($j=0;$j<$conta;$j++)
{
if( $j== ($conta-1))
{
echo "\"".$id_thumb[$j]."\"";
}
else
{
echo "\"".$id_thumb[$j]."\",";
}
}
?>
)
var pgImages = new Array(
<?php
$conta = count($id_image);
for($j=0;$j<$conta;$j++)
{
if( $j== ($conta-1))
{
echo "\"".$id_image[$j]."\"";
}
else
{
echo "\"".$id_image[$j]."\",";
}
}
?>
)
var obj2 = document.getElementById("photogallery_container2")
Photogallery.create(obj2, pgThumbs, pgImages, "", 5, 3);
</script>
e questa è invece la classe photogallery.js su cui secondo me dovrei andare ad agire ma non riesco a capire come:
/*
Photogallery
Author: Pasquale Di Stasio
E-Mail: info@pasqualedistasio.com
Web-Site: www.pasqualedistasio.com
Version: 3.1
Released: 2009-12-11
*/
$_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.len gth<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.shi ft();return function(event){return __method.apply(object,[event||window.event].concat(args));}}
Function.prototype.$_C=function(){if(!arguments.le ngth)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 = "image/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[i] + "\" border=\"0\" alt=\"\" />";
Photogallery.addEvent(a, "click", this.show.$_B(this, iBig[i]));
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[i]);
}
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 center";
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
}
}
}
Grazie in anticipo per ogni aiuto spero si possa risolvere,
Ciao ciao
Leonardo
Rispondi quotando
.
