Angular: Replace prettyPhoto lightbox with Raygun Mobile Gallery Slider « Support Forum | Kriesi.at

Support Forum » Angular

Angular: Replace prettyPhoto lightbox with Raygun Mobile Gallery Slider

7 posts from 4 voices

Started 9 months ago by mila_m
Latest reply from Dude
This topic is not a support question

Tags:

mila_m
Member

Hello,

I realize this is custom work but thought I'd ask in case anyone has tried. As you know, PrettyPhoto's lightbox looks terrible on mobile devices. Raygun has a plugin that works with wordpress gallery - when you click on a wordpress gallery thumbnail, the gallery opens in a mobile ready lighbox.

Has anyone tried to disable the pop-up lightbox on PrettyPhoto to open Raygun's mobile friendly slider? ie: http://www.v-u.ca/files/slider.png

Plugin Description:
This plugin attaches a PhotoSwipe-powered mobile slideshow to the built-in WordPress [gallery] shortcode. To use the plugin, simply upload images to your post or page and click the "Insert Gallery" button. Make sure your gallery images link to the image files and not the attachment pages. The shorcode will look like [gallery link=file]. That's all there is to it! The plugin will take care of the rest.

Thanks! I'm desperate to find a good solution. Fancy box was recommended but it doesn't look good either.

Posted 9 months ago #

Ismael
Moderator

Hi,

I'm not sure if this is going to work, I don't have a mobile device to test it. On your js folder, edit avia.js and find this code

//activates the prettyphoto lightbox)
	if(jQuery.fn.avia_activate_lightbox)
	jQuery('body').avia_activate_lightbox();

Replace it with

jQuery(document).ready(function($){
    var deviceAgent = navigator.userAgent.toLowerCase();
    var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
	var lightbox = jQuery.fn.avia_activate_lightbox();
    if (agentID, lightbox) {

        jQuery('body').avia_activate_lightbox() == false;

		} else if(jQuery.fn.avia_activate_hover_effect)
		jQuery('body').avia_activate_hover_effect();
	});

If the viewing from a mobile device deactivate lightbox, if not activate it.

Regards,
Ismael

Posted 9 months ago #

mila_m
Member

Thanks Ismael,

I replaced the code but that doesn't seem to do anything.

Any other recommendations?
Many thanks

Posted 9 months ago #
mila_m
Member

Hi Ismael,

To keep things simple i decided to disable the prettyphoto lightbox all together on all devices. So now the wordpress gallery images open up the PhotoSwipe mobile-friendly lighbox on all devices but the portfolio slideshow images do not. When I asked Raygun, maker of PhotoSwipe, the same question, they say this:
-----------
Adding click=fullscreen to your shortcode will make it so that clicking on a slideshow image opens a PhotoSwipe slideshow of all the images in the portfolio slideshow. Adding fullscreen=true won't do anything to clicking on main images, but it'll add a little icon to your navigation that, when clicked, will open a similar PhotoSwipe slideshow.

You can see the fullscreen=true option in action on this demo slideshow, just click the little four-arrow icon in the nav to see it -> http://demo.madebyraygun.com/portfolio-slideshow/2012/04/12/fullscreen-mobile-friendly-gallery/

-----------

Can I add this code somewhere in the angular theme so that my portfolio slideshow images open up the Photoswipe just like the wordpress thumbnails do now?

Thanks

Posted 9 months ago #
Devin
Moderator

Hey mila_m,

You would need the actual php and not the shortcode to add it into the theme I believe. If you have that, we might be able to direct you in adding it into the theme but no guarantee.

I'll tag the topic for Ismael and Peter as I wouldn't be able to help on that either way as its a bit out of my realm of expertise.

Regards,

Devin

Posted 9 months ago #
Ismael
Moderator

Hi,

I am really not familiar how the Raygun Mobiler Gallery Slider works. The snippet I provided will disable the lightbox when viewing from ipod, iphone or ipad, if not then lightbox will be enabled. I just thought if we can disable the native lightbox use by theme when viewing from the said devices then you can work out on your Raygun slider.

Regards,
Ismael

Posted 9 months ago #
Dude
Dude

Hey!

Unfortunately I can't help you too because I'm not familiar with the Raygun slider code and the slideshow isn't based on a shortcode. The slideshow code can be found in includes/helper.slideshow.php.

Best regards,
Peter

Posted 9 months ago #