Ive got $5 for anyone who can solve this one issue for me

wmdvanzyl · **Joined:** Fri May 06, 2011 12:48 pm **Posts:** 213

As title states - i can buy you a cup of coffee (via PayPal)... if you can tell me why the hell prettyPhoto is giving me the middle finger.

I am trying to use prettyPhoto to display images which are shown using the Gallery module which is in the content area of a blog post. Everything seems like it should work, but prettyPhoto doesn't pick anything up.

This is just a test page, but it is on a live site. Just have a look at the source and tell me why you think prettyPhoto doesn't display the images on this page: https://modh.co.za/2016/07/House-Galloway
Instead, clicking on an image just shows it in the default browser view. The paths all seem fine.

Good hunting!

velden · **Posted:** Mon Aug 08, 2016 12:05 pm

Because your site is in maintenance mode I guess!?

Where can I post my paypal address?

Jos · **Posted:** Mon Aug 08, 2016 4:03 pm

wmdvanzyl wrote:

clicking on an image just shows it in the default browser view.

Usually this is caused by two or more calls to the jquery library. jquery only allows one call. This can be solved by deleting the first line from the Gallery template javascript field.

wmdvanzyl · **Joined:** Fri May 06, 2011 12:48 pm **Posts:** 213

velden wrote:

Because your site is in maintenance mode I guess!?

Where can I post my paypal address?

LOL Velden. Sorry, forgot about that. All bets are off on that one.

@Jos - that's a nice try, but i already did that. I thought the same thing, but i moved all the JS into the template to make sure.

Dr.CSS · **Posted:** Mon Aug 08, 2016 5:24 pm

Add / to the beginning of you JS call...

<__script__ type="text/javascript" src="/modules/Gallery/templates/prettyphoto/jquery.prettyPhoto.js" defer></__script>

caciavar · **Posted:** Mon Aug 08, 2016 5:58 pm

This likely has something to do with it:

In my browser console I see the following error:

Code:

Uncaught ReferenceError: $ is not defined

Which means that the jQuery library is not loaded yet...

When you are loading the library you have specified a "defer" attribute in the tag:

Code:

<__script__ src="https://modh.co.za/uploads/js/epilogue.jquery.min.js" defer></__script>

The "defer" above specifies that the jquery library will not run until after the page has finished loading. But it should run before the page finishes loading.

Try removing "defer" from that script tag and see what happens. I bet that will fix the problem.

EDIT: Just did a quick test and ran this code in my browser console after the page finished loading:

Code:

    $(document).ready(function(){
       $("a[rel^='prettyPhoto']").prettyPhoto({
             animation_speed: 'fast',
             slideshow: 5000,
             autoplay_slideshow: false,
             show_title: true,
             allow_resize: true,
             counter_separator_label: '/',
             theme: 'dark_rounded', /* light_rounded / pp_default / light_square / dark_square / facebook */
             hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto*/
             overlay_gallery: true,
             keyboard_shortcuts: true
       });
    });

...as soon as I did that, pretty photo started working. So the issue is exactly what I stated above: The jQuery library is not loaded at the appropriate time... removing "defer" will fix it.

wmdvanzyl · **Joined:** Fri May 06, 2011 12:48 pm **Posts:** 213

@DrCSS - thanks for picking that up, but i think i was saved by the base tag that had a trailing "/"

I think this prize goes to @caciavar

He nailed that one. It seems i went a little crazy with the "defers" when i was trying to improve the loading experience and later when i added prettyPhoto I forgot that jquery object was not loaded until the very end. And since the prettyPhoto code is inline, kazaam... problem.

Thanks to all for playing along - it was fun! I think there a few other peeps around here i also owe a coffee... Might be time to start paying my debt

I'm looking at you @velden and @rolf (to name but 2)

Ive got $5 for anyone who can solve this one issue for me [DONE]

Share On:

Share On:

Share On:

Share On:

Share On:

Share On:

Share On:

Who is online