4 Replies - 8375 Views - Last Post: 06 October 2010 - 01:30 AM

#1 kodevicious  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 13-September 07

jQuery GalleryView - Loading via ajax not working

Posted 06 May 2010 - 04:50 PM

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!

Is This A Good Question/Topic? 0
  • +

Replies To: jQuery GalleryView - Loading via ajax not working

#2 jrm402  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 51
  • View blog
  • Posts: 333
  • Joined: 18-March 10

Re: jQuery GalleryView - Loading via ajax not working

Posted 07 May 2010 - 03:31 PM

Is your Javascript enabled? Do you have the jQuery plugin included?
Was This Post Helpful? 0
  • +
  • -

#3 Guest_Alex*


Reputation:

Re: jQuery GalleryView - Loading via ajax not working

Posted 22 June 2010 - 10:15 AM

I have the same problem with GalleryView. I load images and dinamicaly compose the list using javascript(<ul id = "photos"><ul/>). It reformats the html but doesn't display the gallery. The only thing I discover is that if you turn on FireBug in Firefox GalleryView works perfectly. It's such a stupid behavior and I can't find out why!!! Please HELP!
Was This Post Helpful? 0

#4 Guest_publicFunction*


Reputation:

Re: jQuery GalleryView - Loading via ajax not working

Posted 05 October 2010 - 08:52 AM

View Postkodevicious, on 06 May 2010 - 03:50 PM, said:

Any help would be greatly appreciated!


Hi

Found your post whilst scouring the dregs of Google and I am doing the exact same thing as you and had exactly the same issue.

I colleague and I sat down and resolved the problem:

function loadGallery() {
    var $loader= $('#gallery-holder');
    $loader.load('include/ajax/gallery/gallery.php', function() {
       $('#photos').galleryView({
            panel_width: 820,
            panel_height: 320,
            frame_width: 75,
            frame_height: 100
        });
    });
}



I have a wrapper div called gallery-loader into which I load the gallery contents:

<?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;



within the callback from jQuery load I run galleryView.

The issue we found was with animation or manipulation of the wrapper div. It appears the plugin fails if you try any type of awesomeness :P

Just load it without any "fancies" and it should work.

L8rs..
Was This Post Helpful? 0

#5 publicFunction  Icon User is offline

  • New D.I.C Head

Reputation: 10
  • View blog
  • Posts: 10
  • Joined: 06-October 10

Re: jQuery GalleryView - Loading via ajax not working

Posted 06 October 2010 - 01:30 AM

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

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1