Tag: PrettyPhoto

Instalarea codului PrettyPhoto

februarie 25, 2013 Tutoriale Wordpress 1 comment

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

prettyphoto-wordpress-instalare

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”

Cum pot aduna toate imaginile dintr-un post într-o galerie foto?

februarie 15, 2013 Tutoriale Wordpress 1 comment

Voi folosi PrettyPhoto pentru a strânge toate imaginile de pe o pagină, fie ea post sau page, într-o singură galerie foto.

Pentru început trebuie să adăugăm un cod în functions.php (wp-content/themes/thema-activa/functions.php), imediat după <?php. Codul este următorul:

function afiseaza_prettyphoto ($content) {
   global $post;
   $pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";
    $replacement = '<a$1href=$2$3.$4$5 rel="prettyPhoto['.$post->ID.']"$6>$7</a>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}
add_filter('the_content', 'afiseaza_prettyphoto', 12);

Filtrul ‘the_content’ este utilizat pentru a “filtra” conținutul între citirea din baza de date și afisarea pe ecran. În exemplu de mai sus se va filtra conținutul folosind funcția “afiseaza_prettyphoto”.

Metoda “afiseaza_prettyphoto” adaugă “prettyPhoto[‘.$post->ID.’]” în url-ul imaginii făcând astfel ca imaginea să se deschidă folosind pretty photo. Imaginile se vor grupa în galeria $post->ID.

Dacă în aceeași pagină se inserează și o galerie foto se folosește codul explicat aici pentru galerie. Astfel se vor afișa două galerii.

PrettyPhoto împreună cu galeria foto WordPress

februarie 11, 2013 Tutoriale Wordpress 2 comments

PrettyPhoto, o clonă jQuery despre care am mai vorbit, poate fi integrat cu galeria foto implicită a WordPress-ului sau cu toate imaginile din content.

Primul pas este editarea fișierului wp-content/themes/thema-activa/functions.php și imediat după <?php se adaugă următoarea funcție:

function galerie_cu_prettyphoto ($content) {
	global $post;
	$content = preg_replace("/<a/","<a rel=\"prettyPhoto[gallery_".$post->ID."]\"",$content,1);
	return $content;
}
add_filter( 'wp_get_attachment_link', 'galerie_cu_prettyphoto');

Filtrul ‘wp_get_attachment_link’ este utilizat pentru a “filtra” ce returnează wp_get_attachment_link între citirea din baza de date și afisarea pe ecran. În exemplu de mai sus se va filtra folosind funcția “galerie_cu_prettyphoto”.

Metoda “galerie_cu_prettyphoto” adaugă “prettyPhoto[gallery_”.$post->ID.”]” în linkul de pe imagine făcând astfel ca imaginea să se deschidă folosind pretty photo.

Al doilea pas constă din inserarea gateriilor. La editare / inserare să fie bifat Link to: Media file.

Vezi și galerie PrettyPhoto cu toate imaginile dintr-un articol.

NextGen Gallery împreună cu PrettyPhoto

noiembrie 4, 2012 Tutoriale Wordpress 7 comments

NextGen Gallery este unul din cele mai utilizate pluginuri WordPress pentru galerii foto. Este simplu de folosit, are multe funcționalități, se integrează ușor în teme dezvoltate, gratuite sau comerciale.

PrettyPhoto este o clonă a jQuery lightbox o minunăție de cod ce permite afișarea imaginilor dintr-o galerie foto într-un mod elegant, mai elegant decât o face NextGen Gallery. De fapt dacă inserezi js-ul de pretty photo toate imagnile din site se deschid frumos și cele de pe acceași pagină formează o galerie foto. În fine, PrettyPhoto poate veni inclus în diverse teme comerciale ceea ce face dificilă instalarea și folosirea pluginului nextgen gallery.

NextGen Gallery permite setarea efectului prin carte se deschide o imagine la click pe un thumbnail din galerie: Options -> Effects. Implicit este setat efectul Shutter care arată ca mai jos:

nextgen-gallery-cu-prettyphoto-1

Efectul își face treaba, însă nu prea aspectuos, nu?

Aceeași poză deschisă cu PrettyPhoto:

nextgen-gallery-cu-prettyphoto-2

Arată mai bine, afișează pozele din galerie în partea de jos a imaginii mari, are butoane de share. Foarte frumos.

Pentru a avea acest efect trebuie urmați pașii:

  1. download script de pe site-ul no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
  2. instalare conform documentației
  3. instalare pluginului NextGen Gallery
  4. din Options -> Effects selectezi varianta Custom și copiezi codul de mai jos (seamnă cu cel de la lightbox)
rel="prettyPhoto[%GALLERY_NAME%]"

Și gata. Simplu și frumos.

nextgen-gallery-cu-prettyphoto-4