Page 1 of 1
HELP! Display all images in slimbox with paginated gallery
Posted: Tue May 03, 2011 12:38 am
by azaraphale
Hey there. Need a bit of help. I have a gallery that is paginated - all works perfectly. I'd like that when my user clicks on an image though, it allows them to cycle through all the images in the gallery via slimbox rather than having to close slimbox, go to page 2 , then open it up again. Any ideas would be gratefully received.
Many thanks
Z
Re: HELP! Display all images in slimbox with paginated galle
Posted: Thu May 05, 2011 8:30 am
by kekeljevic
Popups work by collecting all images inside of containing element. When pagination is active, containing element holds only filtered group of images, not all images. I don't have an idea how this could be done on easy way. Maybe to compare which images from some folder shouldn't be visible, and to put them in containing element with style="display:none".
Re: HELP! Display all images in slimbox with paginated galle
Posted: Thu May 05, 2011 12:59 pm
by azaraphale
Many thanks for the reply. I've found how get it to work possibly, however I'm not sure what code to change in Admiror.
It seems the way to work it is to put 2 calls on the page:
One for the paginated results
One that calls all the images but is set not to display.
This site has it implemented, obviously it not joomla with admiror though. :
http://svr8.acornhost.com/~infinity/amanda_myers.html
Could you possibly point me to the code to play with to try this out at all - indeed was wondering if I could do it in a custom admiror template?
Many thanks
Z
Re: HELP! Display all images in slimbox with paginated galle
Posted: Thu May 05, 2011 1:19 pm
by Vasiljevski
Well one solution can be to add a JavaScript array off all images, and when image clicked, pass this array to slimbox and position to the current image. And this might be implemented on the template level.
You can find Slimbox API reference here :
http://code.google.com/p/slimbox/wiki/j ... ple_images
It shows how to pass a custom image array to the slimbox.
P.S. When using the AdmirorGallery you should use AG_jQuery as a reference to jQuery library.
Example:
Original
Code: Select all
jQuery.slimbox([["left.jpg"], ["middle.jpg"], ["right.jpg"]], 1, {loop: true});
AdmirorGallery
Code: Select all
AG_jQuery.slimbox([["left.jpg"], ["middle.jpg"], ["right.jpg"]], 1, {loop: true});
Re: HELP! Display all images in slimbox with paginated galle
Posted: Fri May 06, 2011 9:38 am
by kekeljevic
I spend some time to test this with Slimbox API. Yes, it's possible, as Vasiljevski said.
First, find /plugins/content/AdmirorGallery/popups/slimbox/js/slimbox2.js and comment lines 9-15
Code: Select all
//if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
// AG_jQuery(function($) {
// $("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
// return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
// });
// });
//}
Then find /plugins/content/AdmirorGallery/templates/classic/index.php and add this before "?>" on the end of code:
Code: Select all
$images_all = agHelper::ag_imageArrayFromFolder($AG->imagesFolderPhysicalPath);
if (!empty($images_all)) {
$images_all = agHelper::array_sorting($images_all, $AG->imagesFolderPhysicalPath);
}
foreach($images_all as $key => $value){
$images_all_array[] = '"'.$AG->imagesFolderPath.$value.'"';
$images_all_slimbox[] = '["'.$AG->imagesFolderPath.$value.'"]';
}
$images_all_array_imploded=implode(",", $images_all_array);
$images_all_slimbox_imploded=implode(",", $images_all_slimbox);
$html.='
<script type="text/javascript">
AG_jQuery(function($) {
var images_all_imploded = ['.$images_all_array_imploded.'];
$(\'#AG_'.$AG->getGalleryID().' a[rel^="lightbox"]\').each(function(index) {
$(this).click(function(e){
e.preventDefault();
$.slimbox(['.$images_all_slimbox_imploded.'], $.inArray($(this).attr("href"), images_all_imploded), {loop: true})
});
});
});
</script>
';