Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Install pretty photo without plugin? WordPress

  • SOLVED

Can someone please help me setup prettyPhoto to work without a plugin. I have tried to follow this tutorial but cannot get it to work:
http://fearlessflyer.com/2011/04/how-to-add-lightbox-to-wp-without-plugin/

I am trying to set it up here: www.jules-photographer.com

Answers (5)

2011-12-05

John Cotton answers:

Wow! That's not a good tutorial....it really doesn't do things the WordPress way.

Your problem appears to be that you are loading the Pretty Photo files before you load jQuery.

If that tutorial had done it properly, it would have this code in functions.php


function insert_pp(){
wp_register_script('pretty-photo', get_template_directory_uri().'/scripts/jquery.prettyPhoto.js', array('jquery'), 1.0', true);

wp_enqueue_script('pretty-photo');
}
add_action('init', 'insert_pp');

That way, jQuery would get loaded first.

You need to use wp_register_style to do the same for the css.


julesphoto comments:

Hi John, would you be able to expand upon this as it is a bit over my head:

I have in my functions.php file:

define('JULES_JS', get_template_directory_uri() . '/lib/scripts' );

// Define Folder Constants
define('JULES_SCRIPTS_FOLDER', get_bloginfo('template_url') . '/lib/scripts');

// Load Header Scripts
require_once(JULES_FUNCTIONS . '/scripts.php');


then I have in my lib/functions/scripts.php :

<?php

// BEGIN smart jquery inclusion

function jules_scripts() {
if (!is_admin()) {

wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false);
wp_enqueue_script('jquery');

wp_register_script('cufon-yui', JULES_JS .'/cufon-yui.js', 'jquery');
wp_register_script('colaborate', JULES_JS .'/DejaVu_Sans_Condensed_400.font.js', 'jquery');
wp_register_script( 'custom-cufon', JULES_JS .'/custom-cufon.js', 'jquery');

wp_enqueue_script( 'cufon-yui');
wp_enqueue_script( 'colaborate');
wp_enqueue_script( 'custom-cufon');

wp_register_script('superfish', JULES_JS . '/superfish.js', 'jquery');
wp_register_script('tz_custom', JULES_JS . '/jquery.custom.js', 'jquery', '1.0', TRUE);
wp_register_script('easing', JULES_JS . '/jquery.easing.1.3.js', 'jquery');
wp_register_script( 'jules-js-kit', JULES_JS .'/jules-js-kit.js', array('jquery'));

wp_enqueue_script('superfish');
wp_enqueue_script('tz_custom');
wp_enqueue_script('easing');
wp_enqueue_script('jules-js-kit');

}
}
add_action('init', 'jules_scripts');

?>


What would be the best way to register and dereg etc and combine it all together?


John Cotton comments:

Jules

Assuming you want Pretty Photo on every page* then add these lines to the others in you jules_scripts function:


wp_register_script('pretty-photo', get_template_directory_uri().'/scripts/jquery.prettyPhoto.js', array('jquery'), 1.0', true);
wp_enqueue_script('pretty-photo');


You should probably add the stylesheet in there too:


wp_register_style('pretty-photo-css', get_template_directory_uri().'/scripts/jquery.prettyPhoto.css');
wp_enqueue_style('pretty-photo-css');


*If you only want this functionality on some pages, then take the wp_enqeue statements out of the init and place BEFORE the wp_header() call in the individual template pages.

JC


John Cotton comments:

PS Gorgeous photos!


julesphoto comments:

Am I correct in saying that the scripts should be loaded into the header as we have registered and enqueued them here. However when I remove:

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="<?php bloginfo('template_directory'); ?>/scripts/jquery.prettyPhoto.js"></script>

from the header.php which was there from the original tutorial then the lightbox no longer displays.

Must be doing something wrong.

Thanks. Glad you like the pics!


John Cotton comments:

<blockquote>Am I correct in saying that the scripts should be loaded into the header as we have registered and enqueued them here.</blockquote>

Yes.

<blockquote> However when I remove from the header.php which was there from the original tutorial then the lightbox no longer displays.</blockquote>

Hmm... can you upload your revised init function

2011-12-05

Julio Potier answers:

Hello

This tutorial helps you to write some plugin code into your theme or whatever.
If you do not want to use a plugin, copy/paste the full plugin code into your functions.php

ps : why don't use a simple easy plugin!?

2011-12-05

Daniele Raimondi answers:

You can add Prettyphoto, to your js theme folder and then make a call to activate it on every <a> tag , containing an image and linked to an image.
Take [[LINK href="http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/"]]prettyPhoto [[/LINK]], and copy :

jquery.prettyPhoto.js in your <em>js</em> theme folder
prettyPhoto.css in your <em>css </em>theme folder
prettyPhoto folder (you find in the images folder in the zip file) in your images theme folder

then create a new js file, named enable-prettyPhoto.js in your js folder with this code:

jQuery(document).ready(function() {
var items = jQuery('div#content a').filter(function() {
if (jQuery(this).attr('href'))
return jQuery(this).attr('href').match(/\.(jpg|png|gif|JPG|GIF|PNG|Jpg|Gif|Png|JPEG|Jpeg)/);
});

if (items.length > 1){
var gallerySwitch="[alltogethernow]";
}else{
var gallerySwitch="";
}
items.attr('rel','zoom'+gallerySwitch);
jQuery("a[rel^='zoom']").prettyPhoto({
wmode: 'transparent',
theme: 'dark_square',
deeplinking: false,
opacity: 0.6,
slideshow: 4000
});
});



Pay attention to the 2nd line where you have

jQuery('div#content a')

div#content is where I have all my WP contents; you maybe have to change it to reflect your theme structure.

ALMOST DONE!

In your functions.php just register and enqueue your new js files like this, for example:

//Add theme js scripts to the front-end
add_action('wp_enqueue_scripts', 'add_my_jscripts');
if ( !function_exists( 'add_my_jscripts' ) ) {
function add_my_jscripts() {
wp_register_script('prettyPhoto', get_bloginfo('template_url')."/js/jquery.prettyPhoto.js", array('jquery'), '');
wp_register_script('enable-prettyPhoto', get_bloginfo('template_url')."/js/enable.prettyPhoto.js", array('jquery','prettyPhoto'), '');

//load this js everywhere on frontend
wp_enqueue_script('enable-prettyPhoto');
}
}
//Add my css files to front-end
add_action('wp_print_styles', 'add_my_cssfiles');
if ( !function_exists( 'add_my_cssfiles' ) ) {
function add_my_cssfiles() {
if ( wp_script_is ('prettyPhoto', 'queue' ) ) {
wp_register_style( 'prettyPhotoCSS', get_bloginfo('template_url')."/css/prettyPhoto.css" , '', '1.0', 'screen' );
wp_enqueue_style( 'prettyPhotoCSS' );
}
}
}

Just double check paths to files and filenames, and that's it. Now, on every blog page, on every <a> tag linking an image and surrounding an image, you have your lightbox/gallery viewer.


julesphoto comments:

Thanks Daniele, I followed your instructions and I now have the script working but there seem to be some css issues now. Also I added your code to my functions file but I am worried that this could cause some issues with my own calls:


// BEGIN smart jquery inclusion

function jules_scripts() {
if (!is_admin()) {

wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false);
wp_enqueue_script('jquery');

wp_register_script('cufon-yui', JULES_JS .'/cufon-yui.js', 'jquery');
wp_register_script('colaborate', JULES_JS .'/DejaVu_Sans_Condensed_400.font.js', 'jquery');
wp_register_script( 'custom-cufon', JULES_JS .'/custom-cufon.js', 'jquery');

wp_enqueue_script( 'cufon-yui');
wp_enqueue_script( 'colaborate');
wp_enqueue_script( 'custom-cufon');

wp_register_script('superfish', JULES_JS . '/superfish.js', 'jquery');
wp_register_script('tz_custom', JULES_JS . '/jquery.custom.js', 'jquery', '1.0', TRUE);
wp_register_script('easing', JULES_JS . '/jquery.easing.1.3.js', 'jquery');
wp_register_script( 'jules-js-kit', JULES_JS .'/jules-js-kit.js', array('jquery'));

wp_enqueue_script('superfish');
wp_enqueue_script('tz_custom');
wp_enqueue_script('easing');
wp_enqueue_script('jules-js-kit');

}
}
add_action('init', 'jules_scripts');


Could the 2 codes be combined in a momre elgant way and it is also likely that my calls are scripted wrong.


julesphoto comments:

I have found that if I remove the original code from the tutorial it doesn't work, I was assuming that your instructions were standalone and not in addition to the origianal tutorial.

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="<?php bloginfo('template_directory'); ?>/scripts/jquery.prettyPhoto.js"></script>
<?php wp_head(); ?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("a[href$='.jpg'], a[href$='.jpeg'], a[href$='.gif'], a[href$='.png']").prettyPhoto({
animationSpeed: 'normal', /* fast/slow/normal */
padding: 40, /* padding for each side of the picture */
opacity: 0.35, /* Value betwee 0 and 1 */
showTitle: true /* true/false */
});
})
</script>


Daniele Raimondi comments:

Exactly. My instructions was a stand-alone version.
Furthermore, about you css problems, you have some "too general" declaration in your css. For example, the margin-top you give to ALL images on your pages, applies on prettyphoto popup images also.

Talking about the code part, you can easily append my register and enqueue calls to your code, but, as stated [[LINK href="http://codex.wordpress.org/Function_Reference/wp_enqueue_script"]]here[[/LINK]], the best hook to use to include scripts on the frontend is the wp_enqueue_scripts hook. Using it you don't haveto bother if you are in a admin o frontend page.


Daniele Raimondi comments:

Remeber to double check the second line in the enable-PrettyPhoto.js

var items = jQuery('div#content a').filter(function()

In your case, subsitute content with wrapper:

var items = jQuery('div#wrapper a').filter(function()

to catch all a tag in the page

2011-12-05

Christianto answers:

If you want to follow tutorial and applied it on your site..

put prettyPhoto script mention on tutorial:
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="<?php bloginfo('template_directory'); ?>/scripts/jquery.prettyPhoto.js"></script>


<strong>after</strong>
wp_head();
in your header.php

hope this help..

2011-12-05

Manoj Raj answers:

<blockquote>Am I correct in saying that the scripts should be loaded into the header as we have registered and enqueued them here. However when I remove:


<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />

<script src="<?php bloginfo('template_directory'); ?>/scripts/jquery.prettyPhoto.js"></script>


from the header.php which was there from the original tutorial then the lightbox no longer displays.

Must be doing something wrong.

Thanks. Glad you like the pics!</blockquote>



Checked your website. Generates the following errors

<strong>Failed to load resource: the server responded with a status of 404 (Not Found)</strong>
http://www.jules-photographer.com/wp-content/themes/julesv3/scripts/jquery.prettyPhoto.js?ver=1.0

You din't include your script it seems.