3rd Image always stuck on loading image #79

wjthomas9 · 2011-08-17T17:35:00Z

Hi,

Pretty sweet plugin. Trying to use the exclusive mode with no thumbnails. I'm also using jQuery mobile. It seems no matter what I do, photoswipe always shows a loading indicator for the 3rd image, and it never loads. Your exclusive mode doesn't have an example using jQuery mobile, but I get the idea. I just put the var options in the jQuery document ready. However, even if I use the non-jQuery call, the same exact thing happens. Any ideas?

Thanks,
-Jon

wjthomas9 · 2011-08-17T17:40:38Z

Now, it appears that it's the last image in the array that is stuck on the loading image. Then, quickly swiping from that last image to another image causes the same issue on the other images. All images get stuck on loading indicator.

wjthomas9 · 2011-08-17T17:45:05Z

This is also happening on your 09-exclusive-mode-no-thumbnails.html. If you swipe or click through to image 18, it seems to get stuck on the loading image. As I was typing this, image 18 finally loaded, but it seems to be hit or miss on whether the last image in the array ever ends up loading.

saurori · 2011-08-17T23:11:06Z

I'm having the same issue and it's holding me back from using this. There really aren't any other good alternatives too.

codecomputerlove · 2011-08-18T07:17:58Z

I'll look into this and try to replicate. If I can't I'll need an example of you that I can run locally to see what's happening

codecomputerlove · 2011-08-18T07:33:55Z

sfire thanks for also reporting. Is this exactly the same issue? Have you looked into the code yourself as well to help me with any pointers?

codecomputerlove · 2011-08-18T07:44:21Z

Well the good news is I've replicated this issue using the "09" example. Can't seem to get it to happen on the other examples. I'm on the case...

codecomputerlove · 2011-08-18T10:17:32Z

Hopefully fixed this, will release a new version later

codecomputerlove · 2011-08-18T10:59:57Z

Try v2.0.1

wjthomas9 · 2011-08-18T15:04:45Z

Great! I'll try it out now and will let you know today if it works for me. Thank you.

wjthomas9 · 2011-08-18T15:45:44Z

Just wanted to confirm that it works perfect. Thanks for fixing this. Good stuff. :)

codecomputerlove · 2011-08-19T07:11:47Z

Great. Thanks for reporting this it was a fairly major bug that would have caused other issues.

Thanks

nate8684 · 2012-03-09T16:27:07Z

wjthomas9 do you mind posting a bit of code that you used? I'm trying to do the same things as you but still get stuck on transitions when I leave the page and come back. Any ideas?

wjthomas9 · 2012-03-09T16:39:27Z

Hi Nate. I'm using the plugin on this page.

http://www.twodo.com/m/gallery/

You could download the js and see if there's anything in there that helps you. If not, let me know.

nate8684 · 2012-03-09T18:30:56Z

Hey wjthomas9 -

Thanks for the reply. I looked briefly at yours and it appears that you're roughly doing the same thing. My problem comes in when you navigate away from the home page (click events), and then click back to the home page, it pauses the slideshow. Do you know why that is happening?

http://lcbcchurch.com/mobile-test/ (Make sure you make the width smaller than the height)

wjthomas9 · 2012-03-09T19:52:02Z

Which page is your gallery on? I don't see it.

On Mar 9, 2012, at 12:30 PM, nate8684 wrote:

Hey wjthomas9 -

Thanks for the reply. I looked briefly at yours and it appears that you're roughly doing the same thing. My problem comes in when you navigate away from the home page (click events), and then click back to the home page, it pauses the slideshow. Do you know why that is happening?

http://lcbcchurch.com/mobile-test/ (Make sure you make the width smaller than the height)

Reply to this email directly or view it on GitHub:
#79 (comment)

Jon Thomas
Clearfire Inc
www.clearfirestudios.com
jon@clearfirestudios.com
phone: 217-638-2636

nate8684 · 2012-03-09T19:58:03Z

You probably don't see it because you haven't adjust the width of your browser. Make sure the width is smaller than the height. It's right on the home page.

nate8684 · 2012-03-09T19:59:00Z

Also, follow the steps below to make it happen:

Open the page
Click on events
Wait aprx. 5 secs
click on home

wjthomas9 · 2012-03-09T20:07:15Z

Hmm. This is all I see on the events page: http://cl.ly/2M1I2y3i2f043x2J1M3R

Is that right? I don't see any images.

On Mar 9, 2012, at 1:59 PM, nate8684 wrote:

Also, follow the steps below to make it happen:

Open the page

Click on events

Wait aprx. 5 secs

click on home

Reply to this email directly or view it on GitHub:
#79 (comment)

Jon Thomas
Clearfire Inc
www.clearfirestudios.com
jon@clearfirestudios.com
phone: 217-638-2636

nate8684 · 2012-03-09T20:12:15Z

No, the slideshow should be on the home page. I said to navigate to the events page because it stops the slideshow on the homepage. Does that make sense?

wjthomas9 · 2012-03-09T20:13:39Z

Oh, ok. I misunderstood. I still don't see slides on the home page when going back to it from the events page. :(

On Mar 9, 2012, at 2:12 PM, nate8684 wrote:

No, the slideshow should be on the home page. I said to navigate to the events page because it stops the slideshow on the homepage. Does that make sense?

Reply to this email directly or view it on GitHub:
#79 (comment)

Jon Thomas
Clearfire Inc
www.clearfirestudios.com
jon@clearfirestudios.com
phone: 217-638-2636

nate8684 · 2012-03-09T20:13:40Z

Hold on, sorry, it's not working for me either

wjthomas9 · 2012-03-09T20:15:53Z

Getting an error in console: http://cl.ly/2J0h2v2n1E1P3U302L0g

On Mar 9, 2012, at 2:13 PM, nate8684 wrote:

Hold on, sorry, it's not working for me either

Reply to this email directly or view it on GitHub:
#79 (comment)

Jon Thomas
Clearfire Inc
www.clearfirestudios.com
jon@clearfirestudios.com
phone: 217-638-2636

nate8684 · 2012-03-09T20:18:49Z

Ahh, the ajax call won't work on a server. Basic gist is this:

When I navigate away from the home page (where the slideshow is) then go back to it, the slideshow freezes in the middle of a transition. The only way it works again is if I refresh it.

Any thoughts?

Sorry for the confusion.

nate8684 · 2012-03-09T20:20:39Z

FYI - This is a native phone app so I'm not too worried about it working in a server environment.

wjthomas9 · 2012-03-09T20:39:56Z

Sounds like maybe you need to re-initialize the call for the plugin every time you load the home page. I'm not sure why I don't have that issue. If you're using jquery mobile, there should be a callback for after you navigate to a page. Maybe you can fire the call to the plugin again in that callback?

On Mar 9, 2012, at 2:20 PM, nate8684 wrote:

FYI - This is a native phone app so I'm not too worried about it working in a server environment.

Reply to this email directly or view it on GitHub:
#79 (comment)

Jon Thomas
Clearfire Inc
www.clearfirestudios.com
jon@clearfirestudios.com
phone: 217-638-2636

nate8684 · 2012-03-09T20:52:19Z

Yeah, I guess that's what I'm struggling with currently right now. I've customized the code a bit, so it's a little complicated to try to figure that out. Here is what I have right now:

<script type="text/javascript">

    // ---------- AJAX JSON CALL ----------------    
    $.ajax({
        url: "http://www.lcbcchurch.com/mobileJSON/homeslideshow",
        dataType: "json",
        success:function(data){
            results(data);
        }
        });

    function results(data) {
        for(var i = 0; i<data.length;i++){
            // this will log all of the images url
            console.log(data[i].slideshow_image); // just access the part you want by it's name.
            // Adding the JSON to the HTML
            $("#slider").append("<a href='"+data[i].slideshow_image+"'></a>");
        }
        // Call the pics ready function
        picsReady();
        }
    // ---------- FORM THE SLIDER ----------------             
    function picsReady() {


        (function(window, Util, PhotoSwipe){
            $(document).ready(function(e){


                    var 
                    currentPage = $(e.target),
                    homeSlider;
                    homeSlider = PhotoSwipe.attach(
                    window.document.querySelectorAll('#slider a'),
                    {
                        target: window.document.querySelectorAll('#PhotoSwipeTarget')[0],
                        loop: true,
                        preventHide: true,
                        autoStartSlideshow: true,
                        captionAndToolbarHide: true,
                        margin: 0,
                    }
                    ); // PhotoSwipe.attach         
                    homeSlider.show(0);     
                    return true;        

            }); // $(document).ready(function(e){
        }(window, window.Code.Util, window.Code.PhotoSwipe)); // function(window, util, PhotoSwipe)






     } // function picsReady()   



         </script>

I know that I can use something like this:

$('#home').live('pageshow', function(e){

but I'm not quite sure how to get to deactivate the current instance...

wjthomas9 · 2012-03-09T22:07:53Z

I'm thinking you could try to use the callback of the jQuery mobile pageoad event.

http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/events.html (scroll down to, or search for pageload)

However, in looking at the top of that page of jQuery mobile documentation, it looks like there are other options that are preferable to using $(document).ready(function(){});

At the top of the page in the link I included above, it talks about using pageInit() instead of $(document).ready(...), since the jQuery mobile pages are loaded via ajax instead of actual new page loads.

-Jon

On Mar 9, 2012, at 2:52 PM, nate8684 wrote:

Yeah, I guess that's what I'm struggling with currently right now. I've customized the code a bit, so it's a little complicated to try to figure that out. Here is what I have right now:

<script type="text/javascript">

   // ---------- AJAX JSON CALL ----------------    
  $.ajax({
      url: "http://www.lcbcchurch.com/mobileJSON/homeslideshow",
      dataType: "json",
      success:function(data){
          results(data);
      }
      });

  function results(data) {
      for(var i = 0; i<data.length;i++){
          // this will log all of the images url
          console.log(data[i].slideshow_image); // just access the part you want by it's name.
          // Adding the JSON to the HTML
          $("#slider").append("<a href='"+data[i].slideshow_image+"'></a>");
      }
      // Call the pics ready function
      picsReady();
      }
   // ---------- FORM THE SLIDER ----------------             
  function picsReady() {


          (function(window, Util, PhotoSwipe){
          $(document).ready(function(e){


                  var 
                  currentPage = $(e.target),
                  homeSlider;
                  homeSlider = PhotoSwipe.attach(
                  window.document.querySelectorAll('#slider a'),
                  {
                      target: window.document.querySelectorAll('#PhotoSwipeTarget')[0],
                      loop: true,
                      preventHide: true,
                      autoStartSlideshow: true,
                      captionAndToolbarHide: true,
                      margin: 0,
                  }
                  ); // PhotoSwipe.attach         
                  homeSlider.show(0);     
                  return true;        

          }); // $(document).ready(function(e){
      }(window, window.Code.Util, window.Code.PhotoSwipe)); // function(window, util, PhotoSwipe)






    } // function picsReady()   



        </script>

I know that I can use something like this:

$('#home').live('pageshow', function(e){

but I'm not quite sure how to get to deactivate the current instance...

Reply to this email directly or view it on GitHub:
#79 (comment)

Jon Thomas
Clearfire Inc
www.clearfirestudios.com
jon@clearfirestudios.com
phone: 217-638-2636

nate8684 · 2012-03-12T15:01:54Z

Thanks for the continued help. I'm so close I can smell it. Below is how the documentation is telling me to do it. The problem being though, is that it can't find the variable "homeSlider" in the "pagehide" portion of the code and therefore it's not closing the instance as it leaves the page. Any ideas on what I'm doing wrong here, let me know. Thanks!

    // ---------- AJAX JSON CALL ----------------    
    $.ajax({
        url: "http://www.lcbcchurch.com/mobileJSON/homeslideshow",
        dataType: "json",
        success:function(data){
            results(data);
        }
        });

    function results(data) {
        for(var i = 0; i<data.length;i++){
            // this will log all of the images url
            console.log(data[i].slideshow_image); // just access the part you want by it's name.
            // Adding the JSON to the HTML
            $("#slider").append("<a href='"+data[i].slideshow_image+"'></a>");
        }
        // Call the pics ready function
        picsReady();
        }
    // ---------- FORM THE SLIDER ----------------             
    function picsReady() {


        (function(window, Util, PhotoSwipe){
            $(document).ready(function(){

                $('#home').live('pageshow', function(e){    

                    var 
                    currentPage = $(e.target),
                    homeSlider;
                    homeSlider = PhotoSwipe.attach(
                    window.document.querySelectorAll('#slider a'),
                    {
                        target: window.document.querySelectorAll('#PhotoSwipeTarget')[0],
                        loop: true,
                        preventHide: true,
                        autoStartSlideshow: true,
                        captionAndToolbarHide: true,
                        margin: 0,
                    }
                    ); // PhotoSwipe.attach         
                    homeSlider.show(0);     
                    return true;    

                }).live('pagehide', function(e){

                    var 
                    currentPage = $(e.target),
                    homeSlider = PhotoSwipe.getInstance(currentPage.attr('id'));

                    if (typeof homeSlider != "undefined" && homeSlider != null) {
                        PhotoSwipe.detatch(homeSlider);
                    }

                    return true;

                }); 

            }); // $(document).ready(function(e){
        }(window, window.Code.Util, window.Code.PhotoSwipe)); // function(window, util, PhotoSwipe)

wjthomas9 · 2012-03-15T14:13:39Z

Sorry about the delay.

Could it be because you have a comma instead of a semicolon here?

var
currentPage = $(e.target),

Jon Thomas
Sent with Sparrow (http://www.sparrowmailapp.com/?sig)

On Monday, March 12, 2012 at 10:01 AM, nate8684 wrote:

Thanks for the continued help. I'm so close I can smell it. Below is how the documentation is telling me to do it. The problem being though, is that it can't find the variable "homeSlider" in the "pagehide" portion of the code and therefore it's not closing the instance as it leaves the page. Any ideas on what I'm doing wrong here, let me know. Thanks!

// ---------- AJAX JSON CALL ---------------- 
$.ajax({
url: "http://www.lcbcchurch.com/mobileJSON/homeslideshow",
dataType: "json",
success:function(data){
results(data);
}
});
function results(data) {
for(var i = 0; i<data.length;i++){
// this will log all of the images url
console.log(data[i].slideshow_image); // just access the part you want by it's name.
// Adding the JSON to the HTML
$("#slider").append("<a href='"+data[i].slideshow_image+"'></a>");
}
// Call the pics ready function
picsReady();
}
// ---------- FORM THE SLIDER ---------------- 
function picsReady() {
(function(window, Util, PhotoSwipe){
$(document).ready(function(){
$('#home').live('pageshow', function(e){ 
var 
currentPage = $(e.target),
homeSlider;
homeSlider = PhotoSwipe.attach(
window.document.querySelectorAll('#slider a'),
{
target: window.document.querySelectorAll('#PhotoSwipeTarget')[0],
loop: true,
preventHide: true,
autoStartSlideshow: true,
captionAndToolbarHide: true,
margin: 0,
}
); // PhotoSwipe.attach 
homeSlider.show(0); 
return true; 
}).live('pagehide', function(e){
var 
currentPage = $(e.target),
homeSlider = PhotoSwipe.getInstance(currentPage.attr('id'));

if (typeof homeSlider != "undefined" && homeSlider != null) {
PhotoSwipe.detatch(homeSlider);
}

return true;

}); 
}); // $(document).ready(function(e){
}(window, window.Code.Util, window.Code.PhotoSwipe)); // function(window, util, PhotoSwipe)

Reply to this email directly or view it on GitHub:
#79 (comment)

codecomputerlove closed this as completed Aug 18, 2011

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

3rd Image always stuck on loading image #79

3rd Image always stuck on loading image #79

wjthomas9 commented Aug 17, 2011

wjthomas9 commented Aug 17, 2011

wjthomas9 commented Aug 17, 2011

saurori commented Aug 17, 2011

codecomputerlove commented Aug 18, 2011

codecomputerlove commented Aug 18, 2011

codecomputerlove commented Aug 18, 2011

codecomputerlove commented Aug 18, 2011

codecomputerlove commented Aug 18, 2011

wjthomas9 commented Aug 18, 2011

wjthomas9 commented Aug 18, 2011

codecomputerlove commented Aug 19, 2011

nate8684 commented Mar 9, 2012

wjthomas9 commented Mar 9, 2012

nate8684 commented Mar 9, 2012

wjthomas9 commented Mar 9, 2012

nate8684 commented Mar 9, 2012

nate8684 commented Mar 9, 2012

wjthomas9 commented Mar 9, 2012

nate8684 commented Mar 9, 2012

wjthomas9 commented Mar 9, 2012

nate8684 commented Mar 9, 2012

wjthomas9 commented Mar 9, 2012

nate8684 commented Mar 9, 2012

nate8684 commented Mar 9, 2012

wjthomas9 commented Mar 9, 2012

nate8684 commented Mar 9, 2012

wjthomas9 commented Mar 9, 2012

nate8684 commented Mar 12, 2012

wjthomas9 commented Mar 15, 2012

3rd Image always stuck on loading image #79

3rd Image always stuck on loading image #79

Comments

wjthomas9 commented Aug 17, 2011

wjthomas9 commented Aug 17, 2011

wjthomas9 commented Aug 17, 2011

saurori commented Aug 17, 2011

codecomputerlove commented Aug 18, 2011

codecomputerlove commented Aug 18, 2011

codecomputerlove commented Aug 18, 2011

codecomputerlove commented Aug 18, 2011

codecomputerlove commented Aug 18, 2011

wjthomas9 commented Aug 18, 2011

wjthomas9 commented Aug 18, 2011

codecomputerlove commented Aug 19, 2011

nate8684 commented Mar 9, 2012

wjthomas9 commented Mar 9, 2012

nate8684 commented Mar 9, 2012

wjthomas9 commented Mar 9, 2012

nate8684 commented Mar 9, 2012

nate8684 commented Mar 9, 2012

wjthomas9 commented Mar 9, 2012

nate8684 commented Mar 9, 2012

wjthomas9 commented Mar 9, 2012

nate8684 commented Mar 9, 2012

wjthomas9 commented Mar 9, 2012

nate8684 commented Mar 9, 2012

nate8684 commented Mar 9, 2012

wjthomas9 commented Mar 9, 2012

nate8684 commented Mar 9, 2012

wjthomas9 commented Mar 9, 2012

nate8684 commented Mar 12, 2012

wjthomas9 commented Mar 15, 2012