WordPress.org

Forums

Photoswipe for NextGEN Gallery
[resolved] Using Fancybox for WordPress plugin with Photoswipe. (22 posts)

  1. paul.cass82
    Member
    Posted 2 years ago #

    I am currently using the Fancybox for WordPress plugin with the NextGEN Gallery plugin on my site and it works great. However when browsing my site on a mobile device and I click on an image the fancybox modal window appears and then the photoswipe gallery loads on top of this. If I use the default 'shutter' effect without fancybox for the NextGEN gallery everything works fine but I would really like to use fancybox as it looks much nicer. Any ideas how to disable fancybox for mobile devices? Thank you in advance.

    http://wordpress.org/extend/plugins/photoswipe-for-nextgen-gallery/

  2. Guillermo Seņas
    Member
    Plugin Author

    Posted 2 years ago #

    Send me an URL that uses Fancybox + NextGEN and I'll give it a try.

  3. paul.cass82
    Member
    Posted 2 years ago #

    Thanks for the prompt reply. Below is a link to the test site I am working on.

    My Test Site

  4. Guillermo Seņas
    Member
    Plugin Author

    Posted 2 years ago #

    Try this:

    In my plugin, edit ngg-photoswipe.js, and replace this:

    jQuery(document).ready(function(){
    	//Remove thickbox effect:
    	jQuery('a.thickbox').removeClass ("thickbox");
    	//Remove lightbox effect:
    	jQuery('a[rel^="lightbox"]').attr("rel","");
    	//Remove highslide effect:
    	jQuery('a.highslide').removeClass("highslide").attr("onclick","");
    	//Remove shutter effect:
    	jQuery('a[class^=shutterset]').removeClass (function (index, css) { return (css.match (/\bshutterset\S+/g) || []).join(' '); });
    });

    with this:

    jQuery(document).ready(function(){
    	//Remove thickbox effect:
    	jQuery('a.thickbox').removeClass ("thickbox");
    	//Remove lightbox effect:
    	jQuery('a[rel^="lightbox"]').attr("rel","");
    	//Remove highslide effect:
    	jQuery('a.highslide').removeClass("highslide").attr("onclick","");
    	//Remove shutter effect:
    	jQuery('a[class^=shutterset]').removeClass (function (index, css) { return (css.match (/\bshutterset\S+/g) || []).join(' '); });
    	//Remove fancybox effect:
    	jQuery('a.fancybox').unbind('click.fb').removeClass('fancybox');
    });

    Let me know if it works.

  5. paul.cass82
    Member
    Posted 2 years ago #

    Hi gsenas. Sorry that didn't seem to work I have tried clearing the cache etc too just in case but the problem is still there :(

  6. Guillermo Seņas
    Member
    Plugin Author

    Posted 2 years ago #

    Put my plugin in "Always replace viewer with Photoswipe" mode in your test page and I'll try to find what's wrong.

  7. paul.cass82
    Member
    Posted 2 years ago #

    Ok I've done this now thanks.

  8. Guillermo Seņas
    Member
    Plugin Author

    Posted 2 years ago #

    Try this code:

    jQuery(document).ready(function(){
    	//Remove thickbox effect:
    	jQuery('a.thickbox').removeClass ("thickbox");
    	//Remove lightbox effect:
    	jQuery('a[rel^="lightbox"]').attr("rel","");
    	//Remove highslide effect:
    	jQuery('a.highslide').removeClass("highslide").attr("onclick","");
    	//Remove shutter effect:
    	jQuery('a[class^=shutterset]').removeClass (function (index, css) { return (css.match (/\bshutterset\S+/g) || []).join(' '); });
    	//Remove fancybox effect:
    jQuery('a.fancybox').unbind('click.fb').addClass('nolightbox').removeClass('fancybox');
    });
  9. paul.cass82
    Member
    Posted 2 years ago #

    Sorry still no luck. This might have nothing to do with it but I've just realised when editing ngg-photoswipe.js is has (inactive) next to it. Is that just because I'm not viewing on a mobile device? I'm just wondering whether the ngg-photoswipe.js is being initialised before the fancybox js file so you could be trying to remove a class (.fancybox) before it's even been added to the anchor. Sorry I'm a beginner please tell me if this makes no sense.

  10. Guillermo Seņas
    Member
    Plugin Author

    Posted 2 years ago #

    What you're saying not only makes sense, it's exactly the approach I'm using to prevent Fancybox from launching.

    By the way, I've just tested your site and now it works: Fancybox doesn't launch.

    Have you tried clearing your cache?

  11. Guillermo Seņas
    Member
    Plugin Author

    Posted 2 years ago #

    So, did it work?

  12. paul.cass82
    Member
    Posted 2 years ago #

    Yes thank you so much :) Will this change be built in to the next update?

  13. Guillermo Seņas
    Member
    Plugin Author

    Posted 2 years ago #

    I'll think about it, but I'm still not sure.

    After all, Fancybox is not built-in with NextGEN Gallery.

    Anyway, why don't you rate the plugin?

  14. paul.cass82
    Member
    Posted 2 years ago #

    Yes I see your point but I would of thought there will be quite a few people that would benefit from this also. Obviously this is totally up to you and at least you have given me a workaround :) Thanks again and yes I shall be giving it a 5 star rating!

  15. Guillermo Seņas
    Member
    Plugin Author

    Posted 2 years ago #

    Check the latest version ;)

  16. paul.cass82
    Member
    Posted 2 years ago #

    Great thanks :) At least now this means I won't have to keep updating the JavaScript with the fix. Keep up the good work!

  17. koendewit
    Member
    Posted 2 years ago #

    Hi Guillermo, I'm kind of dealing with the same issue. I use the Fancybox for WordPress plugin combined with NextGen and would like to use your plugin for mobile visitors.
    Although your Photoswipe loads fine, so does Fancybox. Then it closes again, leaving the Fancybox background as an overlay on Photoswipe. Any idea on how I to get around this?

    for an example please visit koendewit.com/2010/01/dia-2010
    Thanks in advance for your time and effort!

    Koen

  18. thelittlesun
    Member
    Posted 2 years ago #

    same for me.
    I have enabled: "Replace viewer with Photoswipe only on mobile browsers"
    I don't have any code in Nggallery-->Options-->Effects
    i have FancyBox enabled.
    it works fine on computer browsers (Fancy Box)
    i doesn't work fine on mobile browsers (Fanybox overlays the Photoswipe)

    hm...

  19. koendewit
    Member
    Posted 2 years ago #

    little sun, try this;
    open one of your gallery pages and check the source code for one of the thumbnails, either with Firefox > Tools > Web Developer > Inspect or Safari's Develop > Show Page Source. You'll find it saying something like: `<a href="http://yoursite.com/wp-content/gallery/name/image.jpg" title=" " class="fancybox_plugin" rel="set_11">
    <img title="title" alt="title" src="http://yourwibsite/wp-content/gallery/name/thumbs/thumbs_image.jpg" width="64" height="48"></a>`

    Then open the plugin editor in WordPress, select Photoswipe for NextGEN Gallery, and open

    photoswipe-for-nextgen-gallery/js/ngg-photoswipe.js

    Then add the fancybox_plugin_class to the list below, like this:

    jQuery(document).ready(function(){
    	//Remove thickbox effect:
    	jQuery('a.thickbox').removeClass ("thickbox");
    	//Remove lightbox effect:
    	jQuery('a[rel^="lightbox"]').attr("rel","");
    	//Remove highslide effect:
    	jQuery('a.highslide').removeClass("highslide").attr("onclick","");
    	//Remove shutter effect:
    	jQuery('a[class^=shutterset]').removeClass (function (index, css) { return (css.match (/\bshutterset\S+/g) || []).join(' '); });
    	//Remove fancybox effect:
    	jQuery('a.fancybox_plugin').unbind('click.fb').addClass('nolightbox').removeClass('fancybox_plugin');
    });

    (just replace ('a.fancybox_plugin') and ('fancybox_plugin') with the name of the class you find in the source code)

    Workes for me, I use NextGEN Gallery Fancyboxer which creates a class=myfancybox. Good luck!

  20. mintonxbz
    Member
    Posted 2 years ago #

    Hello i need your help, i need jquery for my sites, i use FancyBox Gallery and all insatlling, effect code removed. but if i go to my site image opened via nextgen viewer. check pls
    eliyefet.co.il/

  21. koendewit
    Member
    Posted 2 years ago #

    @mintonxbz, not shure if I understand your question, but did you check the options "Deactivate gallery page link > The album will not link to a gallery subpage. The gallery is shown on the same page." and "Show first > Thumbnails" and uncheck "Integrate slideshow" in the Nextgen Gallery > Option > Gallery settings?

  22. rgfxnet
    Member
    Posted 2 years ago #

    This worked for me, I am using Ng Gallery Optimizer Modified which uses fancybox, This is code one should use.

    jQuery(document).ready(function(){
    	//Remove thickbox effect:
    	jQuery('a.thickbox').removeClass ("thickbox");
    	//Remove lightbox effect:
    	jQuery('a[rel^="lightbox"]').attr("rel","");
    	//Remove highslide effect:
    	jQuery('a.highslide').removeClass("highslide").attr("onclick","");
    	//Remove shutter effect:
    	jQuery('a[class^=shutterset]').removeClass (function (index, css) { return (css.match (/\bshutterset\S+/g) || []).join(' '); });
    	//Remove fancybox effect:
    	jQuery('a.myfancybox').unbind('click.fb').addClass('nolightbox').removeClass('myfancybox');
    });

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Photoswipe for NextGEN Gallery
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic