HELP! Display all images in slimbox with paginated gallery

[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

[Admiror Joomla! Sponsor]

[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".

[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

[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});

[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>
';

[Admiror Joomla! Sponsor]