Kikocabas

Hey, it works! Now I'm trying to adjust the text below the image but this is another battle. Thanks!

Hi, I'm using the following gallery but I want to display some caption below the active image. Is it possible to add some code to keep using that one or is much easy search another one? Thanks! <div style="position: relative;"><ul id="gallery"><li><img alt="" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/IMG_nou.jpg" /></li><li><img alt="" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/2.JPG" /></li><li><img alt="" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/esperando.jpg" /></li><li><img alt="" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/pajaros%20en%20la%20cabeza.jpg" /></li><li><img alt="" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/IMG_4387.JPG" /></li><li><img alt="" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/pezes.jpg" /></li><li><img alt="" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/IMG_44881.jpg" /></li><li><img alt="" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/metamorfosis.png" /></li><li><img alt="" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/img.jpg" /></li></ul></div> var gal = {init : function() {if (!document.getElementById || !document.createElement || !document.appendChild) return false;if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';var li = document.getElementById('jgal').getElementsByTagName('li');li[0].className = 'active';for (i=0; i<li.length; i++) {li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';li[i].title = li[i].getElementsByTagName('img')[0].alt;gal.addEvent(li[i],'click',function() {var im = document.getElementById('jgal').getElementsByTagName('li');for (j=0; j<im.length; j++) {im[j].className = '';}this.className = 'active';});}},addEvent : function(obj, type, fn) {if (obj.addEventListener) {obj.addEventListener(type, fn, false);}else if (obj.attachEvent) {obj["e"+type+fn] = fn;obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }obj.attachEvent("on"+type, obj[type+fn]);}}}gal.addEvent(window,'load', function() {gal.init();}); /* =Gallery-----------------------------------------------*/#gallery { display: none; }#jgal {padding:0;margin:0px;list-style: none; width: 160px; }#jgal li { opacity: .5;filter:alpha(opacity=50); float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 10px; margin-bottom: 10px; }#jgal li img { position: absolute; top: 0px; left: 160px; display: none; }#jgal li.active img { display: block; width:470px; }#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);}

Solved by davej, Thaks guys for youre answers and time!

Thanks a lot!! That's exactly what I was looking for! (sorry about duplicated post by the way)

Yes, this is what I want. But I have no clue how to whrite the code for do it. Any help? Thanks a lot!

Hi folks.I want to have an image following the mouse but only inside a specific div inside one post, not in all the page. How could I do that?I have the following code for the image in all the web: Code:<script type="text/javascript">//<![CDATA[var trailimage=["http://img197.imageshack.us/img197/5277/estrellab.gif", , ]var offsetfrommouse=[12,10]var displayduration=0if (document.getElementById || document.all)document.write('<div id="trailimageid" style="position:absolute;visibility:visible;left:0px;top:100px;width:1px;height:1px"><img border="0" src="'+trailimage[0]+'"></div>')function gettrailobj(){if (document.getElementById)return document.getElementById("trailimageid").styleelse if (document.all)return document.all.trailimagid.style}function truebody(){return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}function hidetrail(){gettrailobj().visibility="hidden"document.onmousemove=""}function followmouse(e){var xcoord=offsetfrommouse[0]var ycoord=offsetfrommouse[1]if (typeof e != "undefined"){xcoord+=e.pageXycoord+=e.pageY}else if (typeof window.event !="undefined"){xcoord+=truebody().scrollLeft+event.clientXycoord+=truebody().scrollTop+event.clientY}var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)if (xcoord+trailimage[1]+3>docwidth || ycoord+trailimage[2]> docheight)gettrailobj().display="none"elsegettrailobj().display=""gettrailobj().left=xcoord+"px"gettrailobj().top=ycoord+"px"}document.onmousemove=followmouseif (displayduration>0)setTimeout("hidetrail()", displayduration*1000)//]]></script> Thanks a lot!

Hi folks.I want to have an image following the mouse but only inside a specific div inside one post, not in all the page. How could I do that?I have the following code for the image in all the web: Code:<script type="text/javascript">//<![CDATA[var trailimage=["http://img197.imageshack.us/img197/5277/estrellab.gif", , ]var offsetfrommouse=[12,10]var displayduration=0if (document.getElementById || document.all)document.write('<div id="trailimageid" style="position:absolute;visibility:visible;left:0px;top:100px;width:1px;height:1px"><img border="0" src="'+trailimage[0]+'"></div>')function gettrailobj(){if (document.getElementById)return document.getElementById("trailimageid").styleelse if (document.all)return document.all.trailimagid.style}function truebody(){return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}function hidetrail(){gettrailobj().visibility="hidden"document.onmousemove=""}function followmouse(e){var xcoord=offsetfrommouse[0]var ycoord=offsetfrommouse[1]if (typeof e != "undefined"){xcoord+=e.pageXycoord+=e.pageY}else if (typeof window.event !="undefined"){xcoord+=truebody().scrollLeft+event.clientXycoord+=truebody().scrollTop+event.clientY}var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)if (xcoord+trailimage[1]+3>docwidth || ycoord+trailimage[2]> docheight)gettrailobj().display="none"elsegettrailobj().display=""gettrailobj().left=xcoord+"px"gettrailobj().top=ycoord+"px"}document.onmousemove=followmouseif (displayduration>0)setTimeout("hidetrail()", displayduration*1000)//]]></script> Thanks a lot!