WordPress.org

Ready to get started?Download WordPress

Forums

[Plugin: NextGEN Gallery] NGG with fancybox plugin (12 posts)

  1. peopleofdesign
    Member
    Posted 4 years ago #

    Hi, i'm using NGG last version and would use it with FancyBox. How disable default viewer?
    when i click on thumbnail - then start fancybox (in back) and default viewer. I need enable ONLY fancybox. please help me.
    And i have other question: tell me some another viewer whats pretty work with NGG.
    Please reply. Thanks.

  2. Anydog
    Member
    Posted 4 years ago #

    I don't know if you already resolved this, but, here it the solution that worked for me :
    - first, upload your fancybox files into your theme directory and link it in your theme (in header.php `<link type="text/css" rel="stylesheet" href="<?php bloginfo('template_url'); ?>/js/fancybox/jquery.fancybox-1.2.6.css" />
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/fancybox/jquery.fancybox-1.2.6.js"></script>)`) - as you can see, I uploaded the fancybox files in js directory.

    - second, go to plugin admin > gallery > options > effects, and from dropdown menu select "Custom" and in textfield enter this: class="myfancybox" rel="%GALLERY_NAME%".

    - third, in header (between head tags) enter JQuery inline code, like this:

    <script type='text/javascript'>
    $(document).ready(function() {
    	$("a.myfancybox").fancybox({ 'zoomSpeedIn': 500, 'zoomSpeedOut': 500, 'overlayShow':true,'overlayOpacity':0.3 });
    });
     </script>

    Inside fancybox function there are options like zoomSpeedIn and many other options (check FancyBox site for list of all options) which you can modify ...

    Hope this helps,
    Bye

  3. sdix
    Member
    Posted 4 years ago #

    Anydog,

    Thanks for taking the time to spell this out. Very clear and very helpful!

    Scott

  4. mcdonna
    Member
    Posted 4 years ago #

    Got partway there but it's not quite working. Some of my goofs may help others get this far, and maybe someone can help get me the rest of the way!

    1. I mistakenly loaded the files from the FancyBox WP plugin. Fixed that and downloaded from http://fancybox.net/ instead. Put the fancybox folder into wp-custom/themes/my-theme/js.

    2. Edited my theme header.php file to add

    <link type="text/css" rel="stylesheet" href="<?php bloginfo('template_url'); ?>/js/fancybox/jquery.fancybox-1.2.6.css" />
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/fancybox/jquery.fancybox-1.2.6.js"></script>

    This didn't work 'cuz FancyBox is now up to 1.3.0; edited the above.

    3. As you said,

    go to plugin admin > gallery > options > effects, and from dropdown menu select "Custom" and in textfield enter this: class="myfancybox" rel="%GALLERY_NAME%"

    4. As you said, added the JQuery inline code between the <head> tags. I'm assuming this was to be in my theme header.php. So my header.php now has

    <!-- to use fancybox with nextgen gallery per http://wordpress.org/support/topic/315052 -->
    <link type="text/css" rel="stylesheet" href="<?php bloginfo('template_url'); ?>/js/fancybox/jquery.fancybox-1.3.0.css" />
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/fancybox/jquery.fancybox-1.3.0.js"></script>
    <script type='text/javascript'>
    $(document).ready(function() {
    	$("a.myfancybox").fancybox({ 'zoomSpeedIn': 500, 'zoomSpeedOut': 500, 'overlayShow':true,'overlayOpacity':0.3 });
    });
     </script>

    And the NG gallery is displayed using the WP default. :(

    I'm still working on it, but any suggestions will be appreciated! Will post here if I figure it out.

  5. mcdonna
    Member
    Posted 4 years ago #

    OK, figured it out! My theme doesn't use JQuery. So I had to add the following line to the header prior to the FancyBox script calls:

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>

    WORKS!

  6. mcdonna
    Member
    Posted 4 years ago #

    One more bit of info I discovered ... the "zoomspeed" parameters are no longer used with the current version of FancyBox. See http://fancybox.net/api for the up-to-date ones.

    Anydog, thanks again for posting this solution -- I wouldn't have known where to start!

  7. passimal
    Member
    Posted 4 years ago #

    Ok it s work well !

  8. sebastianburger
    Member
    Posted 4 years ago #

    Hi you all!
    Did I get you right, that you did NOT install one of the several "FancyBox for WordPress" Plugins but made it to make ngg run the original js files from http://fancybox.net ?! If so (I follwed McDonna steps three times but the effect would only show up with one of the plugins installed, so to speak: alle the inserted lines didn´t effect at all): does your solution support the mousewheel option ?! (-> "If the mouse wheel plugin is included in the page then FancyBox will respond to mouse wheel events as well")

    Keen on your answers! Thanks, bye, Sebastian

  9. cuedesign
    Member
    Posted 4 years ago #

    - second, go to plugin admin > gallery > options > effects, and from dropdown menu select "Custom" and in textfield enter this: class="myfancybox" rel="%GALLERY_NAME%".

    I don't understand this part. WHERE is the Plugin admin? I've looked everywhere. THANKS for helping out a rookie!

    ©

  10. cuedesign
    Member
    Posted 4 years ago #

    Why is it after you give up and ask for help, that you invariably figure it out yourself? For anyone who is stuck like I was:

    In the NextGen Gallery menu on the left, bottom; Click "Options" and then the top tab "Effects."

    ©

  11. mcdonna
    Member
    Posted 4 years ago #

    Sebastian,
    Yes, I installed the original js files from fancybox.net; I did not install any FancyBox plugins.

    And yes, it does work with the mouse wheel.

    Hope this helps ...

  12. cuedesign
    Member
    Posted 4 years ago #

    heya Anydog and McDonna
    Just wanted to come back and say thanks! Between you both I managed to get this effect to work and it looks great.

    cheers
    ©

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags