[kodevicious]

Using jQuery's plugin GalleryView http://spaceforaname.com/galleryview. I am able to get the gallery to load on a page refresh with

$(document).ready(function(){

		$('#photos').galleryView({show_panels: true,show_filmstrip: true,panel_width: 400,panel_height: 300,frame_width: 100,frame_height: 100});
});

I even tried that with the jQuery livequery plugin, which creates an infinite loop. I tried searching google for a solution, and only found one thread after extensive searching of people having the same issue of getting this plugin to work with ajax, but there was no solution. this is the thread http://stackoverflow...l-containing-js

My html looks like this

<ul id="photos" class="filmstrip">
		<? foreach($MediaItems as $Media): ?>
			<li>
			     <img src="<?=public_path("uploads/".$Media->local_path)?>" />
			</li>
		<? endforeach ?>
	</ul>
<script>ShowImageGallery();</script>

ShowImageGallery() is simply

function ShowImageGallery()
{
    $('#photos').galleryView({show_panels: true,show_filmstrip: true,panel_width: 400,panel_height: 300,frame_width: 100,frame_height: 100}); 
}

I have tried using callbacks also, to know avail.

The galleryView() function is however being called with ajax calls and it reformats the html structure for #photos but that's about it....nothing visually shows even though the html for the gallery is there...

Any help would be greatly appreciated!

[jrm402]

Is your Javascript enabled? Do you have the jQuery plugin included?

[publicFunction]

The above post is from me. Just joined

OK...

Well I found a bit of an error with the last section of code. GalleryView as you know hates being loaded via AJAX (sounds like a fix/improvement opportunity). Due to the way it loads the ajax call, it will take longer and longer to load depending in the size of the gallery. So I added some checking code for the existence of the #photos element and once returned would load the galley. But... This still failed due to the way it is loaded. So... The only way I have got it to work is to put the PHP code:

<?php

$galleryDir = "../../gallery/";

$galleryList = "<ul id='photos'>";

foreach(glob($galleryDir."*") as $file) {
    $file = str_replace('../','',$file);
    $galleryList .= "<li>
                        <span class='panel-overlay'>&nbsp;</span>
                        <img src='include/".$file."' />
                    </li>";
}
$galleryList .= "</ul>";

echo $galleryList;
?>

Directly into the file being loaded. and then calling the galleryView code:

 $('#photos').galleryView({
    panel_width: 820,
    panel_height: 320,
    frame_width: 75,
    frame_height: 100
});

Within a $(document).ready(function(){});

To fake an Ajax load I would recommend trying to create a parent element for the gallery and setting it to display none and on the link click set it to show and hide any conflicting dom elements... I have not tried it, but its worth a shot.

Beware though it still may fail due to galleyViews way of dealing with the DOM and creating the gallery.

This post has been edited by publicFunction: 06 October 2010 - 03:11 AM