Page 1 of 1

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

Posted: Mon Aug 08, 2016 12:02 pm
by wmdvanzyl
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! :D

Re: Ive got $5 for anyone who can solve this one issue for m

Posted: Mon Aug 08, 2016 12:05 pm
by velden
Because your site is in maintenance mode I guess!?

Where can I post my paypal address? ;)

Re: Ive got $5 for anyone who can solve this one issue for m

Posted: Mon Aug 08, 2016 4:03 pm
by Jos
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.

Re: Ive got $5 for anyone who can solve this one issue for m

Posted: Mon Aug 08, 2016 5:09 pm
by wmdvanzyl
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.

Re: Ive got $5 for anyone who can solve this one issue for m

Posted: Mon Aug 08, 2016 5:24 pm
by Dr.CSS
Add / to the beginning of you JS call...


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

Re: Ive got $5 for anyone who can solve this one issue for m

Posted: Mon Aug 08, 2016 5:58 pm
by caciavar
This likely has something to do with it:

In my browser console I see the following error:

Code: Select all

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: Select all

<__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: Select all

    $(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.

Re: Ive got $5 for anyone who can solve this one issue for m

Posted: Mon Aug 08, 2016 6:22 pm
by wmdvanzyl
@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 :P I'm looking at you @velden and @rolf (to name but 2)