jQuery prettyPhoto no funciona con el plugin Flip Wall plugin

Estoy usando Sponsor Flip Wall para mostrar referencias en mi página web. Cada referencia debe tener algunas imágenes previsualizadas con la caja de luz de Pretty Photo . En la primera cara de la moneda hay una imagen de referencia, y después de voltear, tengo una descripción de referencia y debajo un enlace para la galería …

 
<?php // Looping through the array: foreach($reference as $referenca) { echo'
Više o: '.$referenca[0].'
'.$referenca[1].'
'; } ?>
/* PRETTY PHOTO */ $("a[rel^='reference']").prettyPhoto({ animationSpeed: 'slow', /* fast/slow/normal */ slideshow: 4000, /* false OR interval time in ms */ padding: 40, /* padding for each side of the picture */ opacity: 0.35, /* Value betwee 0 and 1 */ overlay_gallery: false, /* If set to true, a gallery will overlay the fullscreen image on mouse over */ showTitle: true, /* true/false */ allowresize: false, /* true/false */ counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */ social_tools: false, /* html or false to disable */ deeplinking: false, /* Allow prettyPhoto to update the url to enable deeplinking. */ keyboard_shortcuts: true, /* Set to false if you open forms inside prettyPhoto */ theme: 'dark_rounded' /* pp_default / light_rounded / dark_rounded / light_square / dark_square / facebook */ }); /* KRAJ PRETTY PHOTO */

Pretty Photo no se dispara de esta manera, ¡pero la imagen se carga en una nueva pestaña! Si coloco el enlace de la galería fuera de .referenceData div (por ejemplo, dentro de .sponsorFlip div), funciona bien … Supongo que hay algún conflicto con el evento .sponsorFlip click () y el evento prettyPhoto click () ???

Aquí está el código para cambiar las referencias …

 //REFERENCE - FLIP PLUGIN $('.referenceFlip').live("click",function(){ // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed): var elem = $(this); // data('flipped') is a flag we set when we flip the element: if(elem.data('flipped')) { // If the element has already been flipped, use the revertFlip method // defined by the plug-in to revert to the default state automatically: elem.revertFlip(); //Prilikom vraćanja (revert) reference - vraća height na 100% (kako je i bio) $(this).css("height", "100%"); // Unsetting the flag: elem.data('flipped',false) } else { // Using the flip method defined by the plugin: elem.flip({ direction:'lr', speed: 350, dontChangeColor: true, onBefore: function(){ // Insert the contents of the .sponsorData div (hidden from view with display:none) // into the clicked .sponsorFlip div before the flipping animation starts: elem.html(elem.siblings('.referenceData').html()); } }); //Ako dođe do overflow-a, povećava height reference za 50 kako bi stao sav tekst if($(this)[0].clientHeight < $(this)[0].scrollHeight) $(this).css("height", $(this).children().height()+50); // Setting the flag: elem.data('flipped',true); } }); 

¿Alguien sabe dónde está el problema?

Finalmente logré arreglar sponsor-flip-wall para trabajar con PrettyPhoto !!!

  • Coloque el atributo “rel” en href:
  
  • PrettyPhoto debe iniciarse dentro de $ (‘. ReferenceFlip’). Live (“click”, function () {…}. Coloque el código justo antes: elem.data (‘flipped’, true);

$ (“a [rel ^ = ‘referencia’]”). prettyPhoto ();

!!! ¡Debería estar funcionando ahora!


Aquí está todo el código js ligeramente cambiado desde el original para satisfacer mis necesidades:

 //FLIP PLUGIN $('.referenceFlip').live("click",function(){ // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed): var elem = $(this); //Eliminates unnecessary PrettyPhoto gallery links elem.siblings().find('.referenceURL a:not(:first)').html(""); //data('flipped') is a flag we set when we flip the element: if(elem.data('flipped')) { // If the element has already been flipped, use the revertFlip method // defined by the plug-in to revert to the default state automatically: elem.revertFlip(); //After reverting the flip - sets the height back to 100% (as it was) elem.css("height", "100%"); // Unsetting the flag: elem.data('flipped',false) } else { // Using the flip method defined by the plugin: elem.flip({ direction:'lr', speed: 350, dontChangeColor: true, onBefore: function(){ // Insert the contents of the .sponsorData div (hidden from view with display:none) // into the clicked .sponsorFlip div before the flipping animation starts: elem.html(elem.siblings('.referenceData').html()); } }); //If the div overflows, increase the div's height for +50 to fit the entire text if(elem[0].clientHeight < elem[0].scrollHeight) elem.css("height", elem.children().height()+50); /* PRETTY PHOTO INITIATION */ $("a[rel^='reference']").prettyPhoto({ animationSpeed: 'slow', /* fast/slow/normal */ slideshow: 4000, /* false OR interval time in ms */ padding: 40, /* padding for each side of the picture */ opacity: 0.35, /* Value betwee 0 and 1 */ overlay_gallery: false, /* If set to true, a gallery will overlay the fullscreen image on mouse over */ showTitle: true, /* true/false */ allowresize: false, /* true/false */ counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */ social_tools: false, /* html or false to disable */ deeplinking: false, /* Allow prettyPhoto to update the url to enable deeplinking. */ keyboard_shortcuts: true, /* Set to false if you open forms inside prettyPhoto */ theme: 'dark_rounded', /* pp_default / light_rounded / dark_rounded / light_square / dark_square / facebook */ }); /* END OF PRETTY PHOTO INITIATION */ // Setting the flag: elem.data('flipped',true); } }); 

Esto ayudó mucho, la misma corrección funciona para Lightbox, solo use:

  ('a[@rel*=lightbox]').lightBox(); 

en lugar de

  /* PRETTY PHOTO INITIATION */ $("a[rel^='reference']").prettyPhoto({ animationSpeed: 'slow', /* fast/slow/normal */ slideshow: 4000, /* false OR interval time in ms */ padding: 40, /* padding for each side of the picture */ opacity: 0.35, /* Value betwee 0 and 1 */ overlay_gallery: false, /* If set to true, a gallery will overlay the fullscreen image on mouse over */ showTitle: true, /* true/false */ allowresize: false, /* true/false */ counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */ social_tools: false, /* html or false to disable */ deeplinking: false, /* Allow prettyPhoto to update the url to enable deeplinking. */ keyboard_shortcuts: true, /* Set to false if you open forms inside prettyPhoto */ theme: 'dark_rounded', /* pp_default / light_rounded / dark_rounded / light_square / dark_square / facebook */ }); /* END OF PRETTY PHOTO INITIATION */ 

:RE