View Full Version : Does anyone know how to add captions that overlay images in Touch Image Gallery

10-15-2013, 04:54 PM
1) Script Title: Touch Image Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/touchgallery.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/images/smilies/confused.png Thanks!

10-16-2013, 03:08 AM
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

10-16-2013, 11:46 AM
modify function(in red)

function navigate(keyword){
var curslide = setting.curslide
switch (keyword){
case 'forth':
setting.curslide = (curslide < imgcount-1)? curslide + 1 : 0
case 'back':
setting.curslide = (curslide >0)? curslide - 1 : imgcount-1
setting.curslide = parseInt(keyword)
$belt.moveit( -setting.width * setting.curslide )

modify the init call

$('div#touchgallery1').touchgallery({ // initialize first demo
width: 250,
height: 200,
var ds=document.getElementById('captions1').getElementsByTagName('DIV'),z0=0;
for (;z0<ds.length;z0++){

the html

<div id="touchgallery1" class="touchgallery">
<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>
<div id="captions1" >
<div >Caption 1</div>
<div >Caption 2</div>
<div >Caption 3</div>
<div >Caption 4</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{

10-17-2013, 11:09 PM
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!!


10-18-2013, 10:06 AM
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{
font-family: Arial, Helvetica, sans-serif;
color: #000000;

#captions1 .bg{
filter:alpha(opacity=50); /* For IE8 and earlier */

#captions1 .txt{

<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>

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

10-18-2013, 05:08 PM
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.

10-19-2013, 08:54 AM
it works fine for me on a PC and FF

10-21-2013, 07:08 PM
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.