Does anyone know how to add captions that overlay images in Touch Image Gallery

[HighHeelTech]

1) Script Title: Touch Image Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...uchgallery.htm

3) Describe problem:

Does anyone know how to add captions/titles/text to Touch Image Gallery, that would overlay the image when viewed - either with a transparent background/box or not. I can add text above the image, but it pushes the image down and then effects all images after it, so this isn't an option. http://www.dynamicdrive.com/forums/i...s/confused.png Thanks!

[ajfmrf]

Please post a link to the page on your site that contains the problematic script so we can check it out.

Also a link to the script you are using would be helpful

[vwphillips]

modify function(in red)

			function navigate(keyword){
 			clearTimeout(setting.hidenavtimer)
				var curslide = setting.curslide
				switch (keyword){
					case 'forth':
						setting.curslide = (curslide < imgcount-1)? curslide + 1 : 0
						break
					case 'back':
						setting.curslide = (curslide >0)? curslide - 1 : imgcount-1
						break
					default:
						setting.curslide = parseInt(keyword)
				}
				$jumptobuttons.removeClass('selected').eq(setting.curslide).addClass('selected')
				$belt.moveit( -setting.width * setting.curslide )
                typeof(setting.onchange)=='function'?setting.onchange(setting.curslide):null;
			}

modify the init call

		$('div#touchgallery1').touchgallery({  // initialize first demo
			width: 250,
			height: 200,
            onchange:function(n){
             var ds=document.getElementById('captions1').getElementsByTagName('DIV'),z0=0;
             for (;z0<ds.length;z0++){
              ds[z0].style.visibility=z0!=n?'hidden':'visible';
             }
            }
		})


the html


	
	
<div id="touchgallery1" class="touchgallery">
<ul>
<li><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" /></li>
<li><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" /></li>
<li><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" /></li>
<li><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" /></li>
</ul>
<div id="captions1" >
<div >Caption 1</div>
<div >Caption 2</div>
<div >Caption 3</div>
<div >Caption 4</div>
</div>
</div>
modify CSS


	
	
#captions1 {
  position:absolute;overflow:hidden;left:24px;top:150px;width:200px;height:20px;background-Color:#FFFFCC;border:solid red 1px;
}

#captions1 DIV{
  position:absolute;visibility:hidden;left:0px;top:0px;width:200px;height:50px;background-Color:#FFFFCC;text-Align:center;
}

[HighHeelTech]

Thanks!!! That worked with one exception, I must be missing something. I added an opacity to the background color which I have filling a top of the image, but no matter what I do, I can't get the Text to not be included, so instead of being bolded black text, it appears grayish. I haven't posted it to my page, but here a link to how it looks if anyone has a suggestion as to what I'm missing. Thanks for the help Vic!!

http://www.onsite-energy.com/Slider2.html

[vwphillips]

currently the opacity effects all elements in the caption DIV

you need more complex HTML, CSS and Code

#captions1 {
  position:absolute;overflow:hidden;left:0px;top:0px;width:550px;height:45px;border:solid red 0px;
}

#captions1 .page{
  position:absolute;left:13px;top:10px;width:550px;height:45px;
  text-align:left;
  font-family: Arial, Helvetica, sans-serif;
  font-size:21px;
  font-weight:bold;
  color: #000000;
}

#captions1 .bg{
  position:absolute;left:0px;top:0px;width:550px;height:45px;background-Color:red;
  opacity:0.5;
  filter:alpha(opacity=50); /* For IE8 and earlier */
}

#captions1 .txt{
  position:absolute;z-Index:2;left:0px;top:0px;width:550px;height:45px;
}

<div id="captions1">
<div class="page" ><div class="bg" ></div><div class="txt" >Generator Sets Operating in Parallel</div></div>
<div class="page" ><div class="bg" ></div><div class="txt" >Transformer Rentals</div></div>
<div class="page" ><div class="bg" ></div><div class="txt" >Compact 150 kW Electric Heater Rentals</div></div>
<div class="page" ><div class="bg" ></div><div class="txt" >Air Conditioner Rentals</div></div>
<div class="page" ><div class="bg" ></div><div class="txt" >Chiller Rentals</div></div>
<div class="page" ><div class="bg" ></div><div class="txt" >Power Cable Rentals</div></div>
<div class="page" ><div class="bg" ></div><div class="txt" >ADA Cable Ramp Rentals</div></div>
<div class="page" ><div class="bg" ></div><div class="txt" >Film & Special Event Rental Solutions</div></div>
<div class="page" ><div class="bg" ></div><div class="txt" >Air Handler Rentals</div></div>
<div class="page" ><div class="bg" ></div><div class="txt" >Warming High Voltage Cable</div></div>
</div>

jQuery(function(){ // on DOM load
 $('div#touchgallery1').touchgallery({ // initialize first demo
  width: 550,
  height: 400,
  onchange:function(n){
             var ds=document.getElementById('captions1'),clds=ds.childNodes,z0=0,z0a=0;
             for (;z0<clds.length;z0++){
                if (clds[z0].nodeType==1){
                 clds[z0].style.visibility=z0a!=n?'hidden':'visible';
                 z0a++;
                }
             }
            }
 })
})

[HighHeelTech]

Thanks again... that worked but then I noticed that once you have clicked on the last bullet and try to jump around it wasn't working properly... thought I had changed something in your coding above, but I was wrong... it didn't work to begin with. When you click through the bullets initially they work. But once you try to move around again, it just takes you back & forth one image at a time, not to the exact bullet/image you are clicking on. Thanks again for your help.

[vwphillips]

it works fine for me on a PC and FF

[HighHeelTech]

I knew it wasn't your script... too many images was making it work from the hidden arrows going one image forward or one back (which i want to leave intact for mobile users to swipe). I also didn't want to reduce the number of images, so I reduced the size of the bullets, etc. Now it works. Thank you for your help.