Content gallery using fancy box
Permalink Browser Info Environment
Hi,
We are trying to create a modal pop up using designer content pro, we would like to give the user the ability to cycle through there content with a next and previous button on the pop up.
We have managed to get the modal working but we are unsure how we can pull through the ID's for the next and previous blocks.
Here is a link to the page to show an example:http://gethebestof.co.uk.gridhosted.co.uk/meet-thebestof-franchisee...
Please find below the code we have used so far. If anyone can tell us how to detect and add the next and previous ID's to allow us to give the scrolling capability. We will love you forever.
Thanks in advance.
We are trying to create a modal pop up using designer content pro, we would like to give the user the ability to cycle through there content with a next and previous button on the pop up.
We have managed to get the modal working but we are unsure how we can pull through the ID's for the next and previous blocks.
Here is a link to the page to show an example:http://gethebestof.co.uk.gridhosted.co.uk/meet-thebestof-franchisee...
Please find below the code we have used so far. If anyone can tell us how to detect and add the next and previous ID's to allow us to give the scrolling capability. We will love you forever.
Thanks in advance.
<div class="caseStudies"> <div class="grid-6 columns nopadLeft"> <h1>Meet thebestof team</h1> </div> <div class="grid-6 columns nopadRight"> <p class="darkBlue" style="text-align: right;">Simply click on the faces below to learn more about the team.</p> </div> <div class="clearfix"></div> <?php foreach ($controller->getRepeatingItems() as $item): ?> <div class="caseStudiesInside"> <p class="lightBlue caseStudiesHead" style="text-align: center;"><strong><?php $item->pop_name->display(); ?></strong><p> <a href="#" data-reveal-id="<?php $item->unique_id->display(); ?>" data-fancybox-group="gallery"><?php $item->pop_image->display(); ?></a> <p class="lightRed caseStudiesFoot" style="text-align: center;"><?php $item->pop_area->display(); ?></p> </div> <div id="<?php $item->unique_id->display(); ?>" class="reveal-modal" data-reveal="">
Viewing 15 lines of 35 lines. View entire code block.
| Type: | Discussion |
|---|---|
| Status: | New |
One more little thing I noticed (this may or may not be interfering with the functionality of the fancybox)... you have an opening <p> tag instead of a closing </p> tag on the "caseStudiesHead" line. So this:
...should be changed to this:
(note that added slash in the <p> tag at the very end of that line).
-Jordan
<p class="lightBlue caseStudiesHead" style="text-align: center;"><strong><?php $item->pop_name->display(); ?></strong><p>
...should be changed to this:
<p class="lightBlue caseStudiesHead" style="text-align: center;"><strong><?php $item->pop_name->display(); ?></strong></p>
(note that added slash in the <p> tag at the very end of that line).
-Jordan
It sounds like perhaps you are initializing a separate fancybox for each individual image using its ID? If that's the case, I would recommend that instead you use the common attribute ("data-fancybox-group" in your example code) to initialize all the images at once. This will both be more efficient in terms of code and also provide the "grouping" functionality you desire.
If you're concerned about someone placing two different blocks on the same page and you want each of the two blocks to be in their own "group" (so users don't paginate between the two groups of lightboxes), you could use the block ID to distinguish them. So you would change the "data-fancybox-group" attribute like so:
... then the fancybox initialization code would be:
$('a[data-fancybox-group="gallery-<?php echo $bID; ?>"]').fancybox({ /* your options here */ });Note that if you do this, you'll need to put the initialization code in the view.php file itself (otherwise it won't have access to the $bID variable). I usually do my image galleries this way... I include the libraries in my block's /js/ and /css/ directories so they automatically get loaded by C5, then I put an inline <script> tag in my block's view.php file to initialize them.
Let me know if that helps at all, or if I'm misunderstanding the problem and need to take another approach.
-Jordan