Install pretty photo without plugin? WordPress

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!?

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

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..

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.