Instapress

6 posts from 3 voices

• Started 7 months ago by codaqueen
• Latest reply from Nick
• This topic is resolved

Tags:

• instapress
• prettyphoto

1. 

   codaqueen
   Member

   I've been trying to find a workaround for using FancyBox across my whole site, but I'm to inexperienced to figure out how. So, I'd like to use the built in PrettyPhoto.

   The only thing is, that on my Instapress page: http://quetzalphoto.com/ches-instagram

   I don't know how to make PrettyPhoto see all images as a full slideshow (instead of individual images) and give me the "Play" functions.

   Can anyone help?

   Posted 7 months ago #
2. 

   Dude
   Dude

   Hey!

   Which Instapress plugin are you using? I only see a shortcode on http://quetzalphoto.com/ches-instagram ?

   Regards,
   Peter

   Posted 7 months ago #
3. 

   codaqueen
   Member

   Hi Dude. Thanks for the response. We're using Instapress, which has had it's own fair share of plugin difficulties in these last few days. It has a FancyBox (albeit version 1, not 2) popup. I'd love a recommendation for a full site plugin that works more like a full screen slideshow plugin with play/pause functionality. I'm not sold on the prettyphoto plugin so any recommendations are greatly welcomed.

   Thanks!

   -Melissa

   Posted 7 months ago #
4. 

   Dude
   Dude

   I use the fancybox plugin with Propulsion on my website. It's quite easy to install.

   1) Download thr latest version from github ( https://github.com/fancyapps/fancyBox ) and place the source folder into the propulsion/js folder. Then rename the "source" folder to "fancybox".

   2) Replace following code in header.php:

   <link rel="stylesheet" href="<?php echo get_bloginfo('template_url'); ?>/js/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen"/>

   with:

   <link rel="stylesheet" href="<?php echo get_bloginfo('template_url'); ?>/js/fancybox/jquery.fancybox.css" type="text/css" media="screen"/>
   <link rel="stylesheet" href="<?php echo get_bloginfo('template_url'); ?>/js/fancybox/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen"/>
   <link rel="stylesheet" href="<?php echo get_bloginfo('template_url'); ?>/js/fancybox/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen"/>
   <link rel="stylesheet" href="<?php echo get_bloginfo('template_url'); ?>/js/projekktor/theme/style.css" type="text/css" media="screen"/>

   and:

   wp_enqueue_script( 'avia-prettyPhoto' );

   with:

   //wp_enqueue_script( 'avia-prettyPhoto' );
   	wp_enqueue_script( 'avia-fancybox' );
   	wp_enqueue_script( 'avia-fancybox-thumbs' );
   	wp_enqueue_script( 'avia-fancybox-buttons' );
   	wp_enqueue_script( 'avia-fancybox-media' );

   Then open up functions.php and replace:

   wp_register_script( 'avia-prettyPhoto',  AVIA_BASE_URL.'js/prettyPhoto/js/jquery.prettyPhoto.js', 'jquery', "3.0.1", true);

   with:

   //wp_register_script( 'avia-prettyPhoto',  AVIA_BASE_URL.'js/prettyPhoto/js/jquery.prettyPhoto.js', 'jquery', "3.0.1", true);
   		wp_register_script( 'avia-fancybox',  AVIA_BASE_URL.'js/fancybox/jquery.fancybox.pack.js', 'jquery', "2.0", false);
   		wp_register_script( 'avia-fancybox-buttons',  AVIA_BASE_URL.'js/fancybox/helpers/jquery.fancybox-buttons.js', 'jquery', "2.0", false);
   		wp_register_script( 'avia-fancybox-media',  AVIA_BASE_URL.'js/fancybox/helpers/jquery.fancybox-media.js', 'jquery', "2.0", false);
   		wp_register_script( 'avia-fancybox-thumbs',  AVIA_BASE_URL.'js/fancybox/helpers/jquery.fancybox-thumbs.js', 'jquery', "2.0", false);

   And last open up js/avia.js and replace:

   if($.fn.prettyPhoto)
   			elements.prettyPhoto({ social_tools:'',slideshow: 5000, deeplinking: false, overlay_gallery:false, default_width: ww, default_height: wh });

   with:

   if($.fn.fancybox)
   			elements.fancybox({
   
   				width : ww,
   				height: wh,
   
   				openEffect  : 'elastic',
   				closeEffect : 'elastic',
   
   				prevEffect : 'elastic',
   				nextEffect : 'elastic',
   
   				helpers : {
   					thumbs : {
   						width  : 50,
   						height : 50
   					},
   					buttons	: {},
   					media : {}
   				}
   			});

   Posted 7 months ago #
5. 

   codaqueen
   Member

   Dude! You the man!

   I've got it installed, tweaked a bit of the CSS and I'm running on the whole site. SO MUCH BETTER!

   I still have a few questions...

   1. In the header.php, you end the replacement code with: <link rel="stylesheet" href="<?php echo get_bloginfo('template_url'); ?>/js/projekktor/theme/style.css" type="text/css" media="screen"/>

   I don't have a projekktor/theme/style.css sheet in my Eunoia JS folder. I assume it's because I'm not using the Projekktor plugin. Should I?

   2. While this is working amazingly on the rest of the entire site, the Instagram Pages (http://quetzalphoto.com/ches-instagram/ + http://quetzalphoto.com/eliu-instagram/) with the Instpress Plugin installed, I'm still opening in a separate tab with just the image. I assume that it's because the Instapress plugin is not actually uploading an actual image into my media library, but just referencing a url.

   I see in the instagram.php file a similar script

   wp_register_script('fancybox', plugins_url('/fancybox/jquery.fancybox-1.3.4.pack.js', __FILE__), array('jquery'), "1.3.4");

   How can I change this to go to my new directory instead of this old version that comes packed into the plugin: /wp-content/themes/eunoia/

   As well, are there other places I need to replace the code in this silly plugin?

   Or is there an easier work around similar to the Tip found on the GitHub page:

   Tip: Automatically group and apply fancyBox to all images:

   $("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox();

   The instapress plugin uses a shortcode to get the content on a page: [instapress userid="" piccount="" size=""]

   Am I on the right track? If so, where do I put that code from the tip?

   Thanks again!

   Melissa

   Posted 7 months ago #
6. 

   Nick
   Moderator

   Hi,

   I am not really sure how important the projekktor is, since it seems only the css is getting added .. just in case its here http://www.projekktor.com/

   I already see a line in dude's code
   

   wp_register_script( 'avia-fancybox',  AVIA_BASE_URL.'js/fancybox/jquery.fancybox.pack.js', 'jquery', "2.0", false);

   which is same as the one you are asking about
   

   wp_register_script('fancybox', plugins_url('/fancybox/jquery.fancybox-1.3.4.pack.js', __FILE__), array('jquery'), "1.3.4");

   If this is a newer version, you can rename the current one thats up there 'jquery.fancybox.pack.js' then place 'jquery.fancybox-1.3.4.pack.js' in its place and rename it to 'jquery.fancybox.pack.js' to see if that makes a difference

   If that works good. If not, perhaps you need that projekktor, so grab it and dump it into the /js/ directory so that the missing css file is in the correct place. Then you would need to add a line to enqueue the main projector js file. I am guessing here, since i am not very familiar, but logically it makes sense.

   Your jQuery snippet is not written for wordpress so you would need to modify it for noconflict mode
   

   <script>jQuery("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox();</script>

   Galleries explained here -> http://stackoverflow.com/questions/9486034/how-to-create-separate-fancybox-galleries-on-the-same-page

   Put the code above somewhere below jquery in script tags, or try to add it to one of the other js files

   Thanks,

   Nick

   Posted 7 months ago #

RSS feed for this topic

Reply

You must log in to post.