Results 1 to 8 of 8

Thread: Ultimate Fade In Slideshow with Lightbox problem

  1. #1
    Join Date
    Sep 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post Ultimate Fade In Slideshow with Lightbox problem

    1) Script Title:
    Ultimate Fade In Slideshow with Lightbox problem

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

    3) Describe problem:

    The ultimate fade-in slideshow v2.4 works great but when I add the Lightbox to the slideshow, the lightbox won't open but I'm getting a new empty page instead of the lightbox. So I searched a lot how to fix it, but none of the posts on this forum works for the newest version of the slideshow in combination with the lightbox. I did found solutions for Lightwindow, Colorbox or Fancybox but I would like to work with Lightbox so I was wondering if someone could help me with my problem or knows how to fix it.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,951
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    Why lightbox? Do you like how it looks? If that's the only issue use slimbox2, see:

    http://www.dynamicdrive.com/forums/blog.php?b=247

    However, if you're also having trouble implementing/integrating it with the slideshow, let me know.

    Two (there are more) advantages with slimbox2 here are that it looks just like lightbox, and is compatible with jQuery. So for a simple integration you don't need to do anything with the slideshow script, just add slimbox2 and its styles to the page and this highlighted init for it:

    Code:
    <link rel="stylesheet" href="css/slimbox2.css" type="text/css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/slimbox2.js"></script>
    <script type="text/javascript">
    (function($){
    	if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
    		$('.gallerylayer a').live('click', function(e){
    			var t = this;
    				$.slimbox(t.href, 'Enlarged Image' || '', { /* Options */ });
    			e.preventDefault();
    		});
    	}
    })(jQuery);
    </script>
    <script type="text/javascript" src="js/fadeslideshow.js">
    
    /***********************************************
    * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    <script type="text/javascript">
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["http://i26.t . . .
    Set the links in the imagearray as the paths to the larger images:

    Code:
    	imagearray: [
    		["http://i26.tinypic.com/11l7ls0.jpg", "images/image-1.jpg", "", "Nothing beats relaxing next to the pool when the weather is hot."],
    		["http://i29.tinypic.com/xp3hns.jpg", "images/image-2.jpg", "_new", "Some day I'd like to explore these caves!"],
    		["http://i30.tinypic.com/531q3n.jpg", "images/image-3.jpg"],
    		["http://i31.tinypic.com/119w28m.jpg", "images/image-4.jpg", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
    	],
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Sep 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post

    Yes I did choose Lightbox because of the way it looks, but Slimbox2 is better!

    John you really are a hero, Thank you very much! It works great and looks beautiful!
    Last edited by vlauwen; 09-23-2011 at 11:55 AM. Reason: Already find the answer on the question

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,951
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    I also have an init now that I just worked out that will show the description from the slideshow as the caption for the slimbox and allow for next/prev in the slimbox to go over all of the enlarged images in the show. It needs a little tweaking to make it more user friendly. If you're interested, I'll let you know when it's ready.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Sep 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    My Fade in Slideshow and slimbox work both great, but how can I make work the next/prev labels in the Fade in Slideshow and in the Slimbox. I would like to have the next/prev labels in the slideshow with the mouse over when you get on the slideshow. And I also want to use the prev/next labels when the slimbox is open?

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,951
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    I'm not sure all of what you're asking there. The next/prev buttons in the slideshow can be had simply by following the instructions on the slideshow's demo page. To get slimbox to use it's next/previous buttons you can use this script:

    ufadeload_fn.js

    Here's an example of how to do that, includes the next/previous buttons for the slideshow (in the head):

    Code:
    <link rel="stylesheet" href="css/slimbox2.css" type="text/css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/slimbox2.js"></script>
    <script type="text/javascript" src="js/ufadeload_fn.js"></script>
    <script type="text/javascript" src="js/fadeslideshow.js">
    
    /***********************************************
    * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    <script type="text/javascript">
    jQuery('#fadeshow1').uFadeSlimbox({gals: ['mygallery'], loop: true});
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["http://i26.tinypic.com/11l7ls0.jpg", "http://i1092.photobucket.com/albums/i414/herrysusanto1/smingpool.jpg", "", "Nothing beats relaxing next to the pool when the weather is hot."],
    		["http://i29.tinypic.com/xp3hns.jpg", "http://i33.photobucket.com/albums/d81/funky_diva23/Travel_Australia_Perth%201995-2004/perthmay05_margrvr_jewelcaves5.jpg", "_new", "Some day I'd like to explore these caves!"],
    		["http://i30.tinypic.com/531q3n.jpg", "http://i100.photobucket.com/albums/m39/HypnoCenter/fruitdisplay.jpg"],
    		["http://i31.tinypic.com/119w28m.jpg", "http://i730.photobucket.com/albums/ww309/laonhaque99/Fall/autumn_scene_4.jpg", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:6000, cycles:0, wraparound:true},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: "fadeshow1toggler"
    });
    </script>
    Then in the body:

    HTML Code:
    <div id="fadeshow1"></div>
    <div id="fadeshow1toggler">
    <input type="button" class="prev" value="&lt;">
    <input type="button" class="next" value="&gt;">
    </div>
    Demo:

    http://home.comcast.net/~jscheuer1/s...de_slimbox.htm
    Last edited by jscheuer1; 10-22-2011 at 06:53 PM. Reason: add demo
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Sep 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks John! This is exactly what I needed. But I have a little question, how can I change the descriptions in slimbox ? Because it shows the name of the picture and I want to change the text below that what shows which picture you're watching of the total, Image 1 of 4.

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,951
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    The name of the picture is the second default fall back. That deserves some explanation. Lets say you have an entry in the slideshow's imagearray:

    Code:
    ["small.jpg", "large.jpg"],
    Slimbox will show the large.jpg, and the description will be:

    large
    Image 2 of 4
    If the entry in the imagearray is:

    Code:
    ["small.jpg", "large.jpg", "", "My big Image"],
    Slimbox will show:

    My big Image
    Image 2 of 4
    And if the slideshow is set to show descriptions, My big Image will also be the description in the slideshow.

    But if you have:

    Code:
    ["small.jpg", "large.jpg", "", "Click for my big Image", "My big Image"],
    Slimbox will still show:

    My big Image
    Image 2 of 4
    But the slideshow will use, Click for my big Image.

    OK, that's the description part. Now for the Image 2 of 4 part. That's controlled by slimbox. Using a text only editor like NotePad, look inside the ufadeload_fn.js script near the end:

    Code:
     . . . 						}
    					});
    					gal.setting.syncapproved = links.length === gal.setting.imagearray.length;
    					$.slimbox(links, index, {loop: options.loop /* , Aditional Options */ });
    					e.preventDefault();
    				}
    			});
    		}
    	return this.selector? this : $;};
    })(jQuery);
    Let's zoom in on that line:

    Code:
    $.slimbox(links, index, {loop: options.loop /* , Aditional Options */ });
    The green part is a comment. One of slimbox's options is counterText (from http://www.digitalia.be/software/slimbox2#usage):

    counterText: Text value; allows you to customize, translate or disable the counter text which appears in the captions when multiple images are shown. Inside the text, {x} will be replaced by the current image index, and {y} will be replaced by the total number of images. Set it to false (boolean value, without quotes) or "" to disable the counter display. Default is "Image {x} of {y}".
    So you can make that line:

    Code:
    $.slimbox(links, index, {loop: options.loop, counterText: 'Pic #{x} out of {y} pics' /* , Aditional Options */ });
    And now instead of:

    My big Image
    Image 2 of 4
    Slimbox will show:

    My big Image
    Pic #2 out of 4 pics
    Last edited by jscheuer1; 10-24-2011 at 01:11 AM. Reason: English Usage
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •