New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark online:

Integrating an Image Viewer such as Facebox with Carousel Viewer

You can integrate an Image Viewer with Carousel Viewer, so clicking on an image within the panels launches the enlarged image in its own fancy viewer. Below you'll see how to do this when the Carousel contents are defined inline on the page, and when they are fetched via Ajax and from an external file instead. For sake of discussion I'll be using the jQuery Image Viewer Facebox, but the same principle applies to most other Image Viewers such as Lightbox or Image Thumbnail Viewer.

Integrating Facebox with Carousel Viewer (panels defined inline)

If your Carousel Viewer panels are defined inline on the page, integrating Facebox into it so images within the Panels load using Facebox is straightforward. First, install Facebox on your page as usual, as if you're doing so for regular images on the page. Verify that it works with a test image. Now that you've verified Facebox is working on the page, to apply it to images within your Carousel Viewer, just follow the exact same procedure; assuming the Carousel images are hyperlinked, just give each of these links the requisite rel="facebox" declaration:

<div id="galleryA" class="stepcarousel">
<div class="belt">

<div class="panel">
<a href="fruitslarge.jpg" rel="facebox"><img src="fruits.jpg" /></a>
</div>

<div class="panel">
<a href="cavelarge.jpg" rel="facebox"><img src="cave.jpg" /></a>
</div>

<div class="panel">
<a href="poollarge.jpg" rel="facebox"><img src="pool.jpg" /></a>
</div>

</div>
</div>

The result:

Current Panel: Total Panels:

Back 1 Panel Forward 1 Panel

Note that we're not relying on any of Carousel Viewer's custom event handlers like oninit() or onpanelclick().

Integrating Facebox with Carousel Viewer (panels defined in an external file)

If your Carousel Viewer panels are defined inside an external file and fetched via Ajax, the key is to locate the initialization code for Facebox (or the viewer you're using), and call that when the Carrousel Viewer has finished loading, by adding it to the oninit() event handler of Carousel Viewer. In the case of Facebox, the initialization code is the below snippet that you normally would add to the HEAD section of your page:

<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
</script>

What you want to do is move this code into the oninit() event handler of Carousel Viewer, so Facebox is initialized only when Carousel Viewer has successfully fetched the panels using Ajax. What you should end up with is:

<script type="text/javascript">

stepcarousel.setup({
galleryid: 'galleryB', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
panelbehavior: {speed:300, wraparound:false, persist:false},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['arrowl.gif', -10, 100], rightnav: ['arrowr.gif', -10, 100]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['ajax', 'external.htm'], //content setting ['inline'] or ['external', 'path_to_external_file']
oninit:function(){
 jQuery('#galleryB a[rel*=facebox]').facebox()
}
})

</script>


<div id="galleryB" class="stepcarousel">
<div class="belt">

</div>
</div>

Here are the contents of external.htm btw.

Live demo:

Current Panel: Total Panels:

Back 1 Panel Forward 1 Panel

The key is defining the code in red within your Carousel configuration code. You may wonder why it's:

jQuery('#galleryB a[rel*=facebox]').facebox()

instead of the original:

jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})

Without going in detail all the subtleties, the first code removes unneeded lines from the original plus takes care of a potential pitfall- be sure to change "galleryB" to reflect the ID of your Carousel Viewer! FYI you can still just plug in the original code into oninit() as is, and it will work in most cases.

Table Of Contents