Combine Agile Carousel with Lightbox

**drob** · 06-02-2011, 06:56 AM

Not sure if this is the right forum for this, but would anyone here know how to combine the multiple slides visible example of agile carousel with a lightbox. Any lightbox will do. Just want to be able to click on the picture in any of the slides and have a larger image appear on my screen.

Here is a link to the carousel: http://www.agilecarousel.com/carousel_example.htm

Any help would be greatly appreciated.

Thanks.

**jscheuer1** · 06-02-2011, 06:11 PM

First I'd try something straightforward like adding:

http://www.digitalia.be/software/slimbox2

Then you could target the links in the agile thinger by using the rel="lightbox" attribute within the links in the agile data file.

The only potential issue would be if the Slimbox script initializes before the links from the data file are available in the DOM. If so, some tweaking may be required to ensure that doesn't happen.

I'd start with putting a fresh Slimbox init (highlighted in the below) after Agile, ex:

Code:

<link rel="stylesheet" href="agile_carousel.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js"></script>
<script src="agile_carousel/agile_carousel.a1.1.js"></script>
	<script type="text/javascript" src="js/slimbox2.js"></script>
	<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />
<script>

    // Code used for "Flavor 2" example (above)
    
    $.getJSON("agile_carousel/agile_carousel_data.php", function(data) {
        $(document).ready(function(){
            $("#flavor_2").agile_carousel({
                
                // required settings
                
                carousel_data: data,
                carousel_outer_height: 330,
                carousel_height: 230,
                slide_height: 230,
                carousel_outer_width: 480,
                slide_width: 480,
                                                
                // end required settings
                                                
                transition_type: "fade",
                transition_time: 600,
                timer: 3000,
                continuous_scrolling: true,
                control_set_1: "numbered_buttons,previous_button,pause_button,next_button",
                control_set_2: "content_buttons",
                change_on_hover: "content_buttons"
            });
		if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
			jQuery(function($) {
				$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
					return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
				});
			});
		}
        });
    });
 </script>

**drob** · 06-02-2011, 08:57 PM

That worked exactly how I wanted it to. Thank You times a billion. I used it on the multiple slides visible example of agile carousel and flavor 2. Both worked flawlessly.

For anybody trying to replicate this in the future, the above post is missing the div for the agile carousel to appear. Sticking with the flavor 2 example above, you would need to add the line <div class="slideshow" id="flavor_2"></div> to where you want the carousel to appear on your page.

Once again, Thank You.

**jscheuer1** · 06-03-2011, 09:43 AM

That's right, and there was a space (since corrected) that didn't belong. That last only affected the pause/resume control. What I posted above was only an idea. Since then I set up a local demo and played around with it.

Slimbox is pretty flexible. After playing with this thing a bit, I came up with this page:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="agile_carousel/agile_carousel.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js"></script>
<script src="agile_carousel/agile_carousel.a1.1.js"></script>
	<script type="text/javascript" src="js/slimbox2.js"></script>
	<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />
<script>

    // Code used for "Flavor 2" example (above)
    
    $.getJSON("agile_carousel/data.htm", function(data) {
        $(document).ready(function(){
            $("#flavor_2").agile_carousel({
                
                // required settings
                
                carousel_data: data,
                carousel_outer_height: 330,
                carousel_height: 230,
                slide_height: 230,
                carousel_outer_width: 480,
                slide_width: 480,
                                                
                // end required settings
                                                
                transition_type: "fade",
                transition_time: 600,
                timer: 3000,
                continuous_scrolling: true,
                control_set_1: "numbered_buttons,previous_button,pause_button,next_button",
                control_set_2: "content_buttons",
                change_on_hover: "content_buttons"
            });
		$("#flavor_2 a.photo_link").not('*[href*=#]').slimbox({loop: true}, function(el) {
			return [el.href, el.rev];
		}, function(el) {
			return true;
		});
        });
    });
 </script>
</head>
<body>
				<div class="slideshow_wrapper slideshow_wrapper_single">
					<div class="slideshow" id="flavor_2"></div>
					<div class="slideshow_description">
						<h1 class="slideshow_title">Slideshow:<br> Flavor 2</h1>
						<ul class="slideshow_features">
							<li>Horizontal "Content Buttons"
							<ul><li>Triggered on Mouseover</li></ul></li>
							<li>Numbered Buttons</li>
							<li>Play/Pause Button</li>
							<li>Prev &amp; Next Buttons</li>
							<li>Fading Transition</li>
						</ul>
					</div>
				</div>
</body>
</html>

And this data (data.htm is the filename I used) file:

Code:

[{
      "content": "<div class='slide_inner'><a class='photo_link' href='example.jpg' rev='It's Beautiful!'><img class='photo' src='images/banner_bike.jpg' alt='Bike'></a><a target='_blank' class='caption' href='#'>Sample Carousel Pic Goes Here And The Best Part is that...</a></div>",
      "content_button": "<div class='thumb'><img src='images/f2_thumb.jpg' alt='bike is nice'></div><p>Agile Carousel Place Holder</p>"
}, {
      "content": "<div class='slide_inner'><a class='photo_link' href='24.jpg' rev='Oooo Nooo, Mr. Bill!'><img class='photo' src='images/banner_paint.jpg' alt='Paint'></a><a target='_blank' class='caption' href='#'>Sample Carousel Pic Goes Here And The Best Part is that...</a></div>",
      "content_button": "<div class='thumb'><img src='images/f2_thumb.jpg' alt='bike is nice'></div><p>Agile Carousel Place Holder</p>"
}, {
      "content": "<div class='slide_inner'><a class='photo_link' href='25.jpg' rev='You were expecting the March of Dimes?'><img class='photo' src='images/banner_tunnel.jpg' alt='Tunnel'></a><a target='_blank' class='caption' href='#'>Sample Carousel Pic Goes Here And The Best Part is that...</a></div>",
      "content_button": "<div class='thumb'><img src='images/f2_thumb.jpg' alt='bike is nice'></div><p>Agile Carousel Place Holder</p>"
}, {
      "content": "<div class='slide_inner'><a target='_blank' class='photo_link' href='#'><img class='photo' src='images/banner_bike.jpg' alt='Bike'></a><a target='_blank' class='caption' href='#'>Sample Carousel Pic Goes Here And The Best Part is that...</a></div>",
      "content_button": "<div class='thumb'><img src='images/f2_thumb.jpg' alt='bike is nice'></div><p>Agile Carousel Place Holder</p>"
}, {
      "content": "<div class='slide_inner'><a target='_blank' class='photo_link' href='#'><img class='photo' src='images/banner_paint.jpg' alt='Paint'></a><a target='_blank' class='caption' href='#'>Sample Carousel Pic Goes Here And The Best Part is that...</a></div>",
      "content_button": "<div class='thumb'><img src='images/f2_thumb.jpg' alt='bike is nice'></div><p>Agile Carousel Place Holder</p>"
}]

Notes: I abandoned using rel="lightbox" and customized the Slimbox initialization used on the page to take in all a class photo_link tags within the flavor_2 div and make them a group while excluding href=# tags from initialization. I also made the rev attribute instead of the title be the caption, thus eliminating the 'tooltip' when hovering the trigger image in the Agile Carousel. I added the loop: true option to allow next/previous to span from beginning to end and visa versa. I abandoned using document ready with the on page Slimbox init because the document has to be ready already by the time we get there. And threw out the test for mobile devices on the assumption that the main Slimbox script already did that. That last might not be warranted. It can easily be added back in.

Thread: Combine Agile Carousel with Lightbox

Thread Tools

Search Thread

Combine Agile Carousel with Lightbox

Bookmarks

Bookmarks

Posting Permissions