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