PDA

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



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

ajfmrf
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

vwphillips
10-16-2013, 11:46 AM
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
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!!

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

vwphillips
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{
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
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.

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

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