Results 1 to 8 of 8

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

  1. #1
    Join Date
    Oct 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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!
    Last edited by james438; 10-17-2013 at 04:44 AM. Reason: format

  2. #2
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    596
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

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

    Bud

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,815
    Thanks
    2
    Thanked 424 Times in 418 Posts

    Default

    modify function(in red)

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

    Code:
    		$('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
    
    
    Code:
    <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
    Code:
    #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;
    }
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. #4
    Join Date
    Oct 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #5
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,815
    Thanks
    2
    Thanked 424 Times in 418 Posts

    Default

    currently the opacity effects all elements in the caption DIV

    you need more complex HTML, CSS and Code

    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;
    }
    Code:
    <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>
    Code:
    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++;
                    }
                 }
                }
     })
    })
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  6. #6
    Join Date
    Oct 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  7. #7
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,815
    Thanks
    2
    Thanked 424 Times in 418 Posts

    Default

    it works fine for me on a PC and FF
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  8. #8
    Join Date
    Oct 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Similar Threads

  1. Touch Image Gallery vs IE
    By Barefoot in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 07-26-2013, 07:08 PM
  2. Touch Image Gallery
    By Brends in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 07-11-2013, 06:32 PM
  3. Text and Image Crawler WITH Captions for Images?
    By goldengirl in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 08-04-2010, 09:08 PM
  4. Image Gallery Captions
    By Mark H in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 06-30-2007, 09:53 PM
  5. Cant get captions to show in image gallery
    By aljohnstone in forum JavaScript
    Replies: 2
    Last Post: 02-02-2006, 02:51 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •