Se abbiamo creato uno slideshow con dei custom post type, potremmo voler associare delle animazioni diverse per ciascuna slide. In WordPress possiamo ottenere questo risultato usando i custom field, JSON e gli attributi di dati HTML5.
Vogliamo animare la caption di ciascuna slide. Partiamo da questi stili CSS:
.slide {
position: relative;
overflow: hidden;
}
.slide-caption {
position: absolute;
top: -9999px;
left: -9999px;
transition: all 2s ease-in;
}
Nel Loop dello slideshow dobbiamo reperire i due valori delle coordinate x e y dai custom field e memorizzarli come stringa JSON in un attributo di dati:
<?php
$post_id = get_the_ID();
$caption_x = (int) get_post_meta( $post_id, 'caption_x', true );
$caption_y = (int) get_post_meta( $post_id, 'caption_y', true );
$coords = array( 'top' => $caption_x, 'left' => $caption_y );
?>
<div class="slide">
<!--...-->
<div class="slide-caption" data-coords='<?php echo json_encode( $coords ); ?>'>...</div>
</div>
L'output JSON potrebbe essere:
{"top":110,"left":70}
Quindi con jQuery:
function animateCaption( currentSlide ) {
var $caption = currentSlide.find( ".slide-caption" ),
coords = JSON.parse( $caption.data( "coords" ) );
$caption.css( coords );
}