Instalarea codului PrettyPhoto

În mai multe articole am scris despre  PrettyPhoto: cum se poate integra NextGen Gallery cu PrettyPhoto, cum se poate folosi PrettyPhoto împreună cu galeria foto implicită a WordPress-ului și cum poti deschide toate imaginile din content folosind PrettyPhoto. Acum voi descrie instalarea acestui cod.

Instalarea PrettyPhoto

1. download pachet: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

2. se dezarhivează local

3. se copiază jquery.prettyPhoto.js în directorul js din tema activă sau în alt loc în care sunt fișierele de JavaScript

4. se copiază fișierul prettyPhoto.css în directorul css sau styles sau unde sunt ținute fișierele css, dacă nu există un director special pentru fișierele css se poate copia directă în temă

5. se copiază directorul images/prettyPhoto în directorul images din temă – atenție! doar directorul prettyPhoto nu și restul (restul sunt imagini demonstrative)

Acum trebuie incluse fișierele js și css în header.php. Înainte de asta trebuie verificat în header.php dacă nu cumva fișierul jquery.js este deja inclus (varianta mare sau minimizată, nu contează). Daca nu este inclus copiază jquery.js în acelasi loc cu jquery.prettyPhoto.js.

6. se editează fișierul /wp-content/themes/tema-activa/header.php și în zona în care sunt incluse fișierele js si css (head) se adaugă următoarele trei linii:

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

Prima linie doar dacă nu este deja inclus fișierul jquery.js!

7. in footer.php înainte de a se închide body trebuie adăugat următorul cod care inițializează prettyphoto:

<script charset="utf-8" type="text/javascript">// <![CDATA[
$(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
// ]]></script>

Practic orice imagine se poate deschide folosind PrettyPhoto dacă se adaugă la url: “rel=”prettyPhoto”