Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #15667

    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.

    #88446

    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

    #88447

    Thanks Ismael,

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

    Any other recommendations?

    Many thanks

    #88448

    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

    #88449

    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

    #88450

    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

    #88451

    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

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Angular: Replace prettyPhoto lightbox with Raygun Mobile Gallery Slider’ is closed to new replies.