Bonjour,
voilà je travaille sous wordpress et je cherche à adapter les vignettes de galerie.
Je m'explique :
De base quand on clique sur une image de galerie côté front office l'image s'ouvre dans une nouvelle page attachement.php
Hors je souhaiterais que l'image s'ouvre dans une fenêtre Fancybox sans la page.
J'ai trouvé le code pour adapter le clique via Fancybox
jQuery(".gallery-icon a").fancybox();
ou
jQuery(".gallery-icon a").fancybox().attr('rel', 'wp-gallery-fancybox');
Mais cela ouvre le lien qui est sur la photo (c'est à dire la page attachement.php) et non la photo en grand.
J'ai plus ou moins comprit que je devais toucher au fichier /wp-includes/media.php
Le code qui me semble le plus plausible à modifier est à partir de la ligne 852
foreach ( $attachments as $id => $attachment ) {
$link = isset($attr'link']) && 'file' == $attr'link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);
$output .= "<{$itemtag} class='gallery-item'>";
$output .= "
<{$icontag} class='gallery-icon'>
$link
</{$icontag}>";
if ( $captiontag && trim($attachment->post_excerpt) ) {
$output .= "
<{$captiontag} class='wp-caption-text gallery-caption'>
" . wptexturize($attachment->post_excerpt) . "
</{$captiontag}>";
}
$output .= "</{$itemtag}>";
if ( $columns > 0 && ++$i % $columns == 0 )
$output .= '<br style="clear: both" />';
}
Le soucis est que je ne sais quoi modifier.
Si quelqu'un a une quelconque idée sur le sujet, je suis preneuse.
Merci d'avance de votre aide à tous.
Et bien j'ai trouvé toute seule lol
Alors au lieu de suivre le tuto, j'ai vu du code similaire dans celui ci avec le fichier media.php :
Code du tuto
foreach ( $attachments as $id => $attachment ) {
$link = isset($attr'link']) && 'file' == $attr'link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);
$output .= "<{$itemtag} class='gallery-item'>";
$output .= "
<{$icontag} class='gallery-icon'>
$link
</{$icontag}>";
if ( $captiontag && trim($attachment->post_excerpt) ) {
$output .= "
<{$captiontag} class='gallery-caption'>
" . wptexturize($attachment->post_excerpt) . "
</{$captiontag}>";
}
$output .= "</{$itemtag}>";
if ( $columns > 0 && ++$i % $columns == 0 )
$output .= '<br style="clear: both" />';
}
Code de media.php
foreach ( $attachments as $id => $attachment ) {
$link = isset($attr'link']) && 'file' == $attr'link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);
$output .= "<{$itemtag} class='gallery-item'>";
$output .= "
<{$icontag} class='gallery-icon'>
$link
</{$icontag}>";
if ( $captiontag && trim($attachment->post_excerpt) ) {
$output .= "
<{$captiontag} class='wp-caption-text gallery-caption'>
" . wptexturize($attachment->post_excerpt) . "
</{$captiontag}>";
}
$output .= "</{$itemtag}>";
if ( $columns > 0 && ++$i % $columns == 0 )
$output .= '<br style="clear: both" />';
}
Du coup j'ai juste modifié le fichier media.php en remplaçant le code du fichier initial par celui du tuto.
Ce qui fait que mes images dans la galerie pointent à présent vers chaque image en grand et non la page attachment.php.
J'ai aussi mit dans l'extension de Fancybox le code suivant : je l'ai adapté en fonction de ce que je souhaitais, c'est à dire pas de transparence, une couleur de fond #333333, pas de marge blanche entre le fond et l'image et pas de titre de l'image.
jQuery(".gallery-icon a").fancybox({
'overlayOpacity': "1",
'overlayColor': "#333333",
'padding': 0,
'titleShow': false
});
et au niveau du code [gallery] dans mon post j'ai placé ceci :
[gallery link="file"]
Et voilà, tout ces changements font que chaque image des galeries s'affiche dans une fenêtre de Fancybox ;-)
J'ai trouvé un début d'idée ici [url=http://www.screenfeed.fr/blog/du-pola-dans-wordpress-customiser-les-galeries-0132/]http://www.screenfeed.fr/blog/du-pola-dans-wordpress-customiser-les-galeries-0132/[/url] Sans toucher le css parce que ce tuto transforme les images de la galerie en polaroïd. Voici donc le code à transformer : [code]// ----------------------------------------------------------------------------- gallery ----------------- add_filter('post_gallery', 'sf_post_gallery', 10, 2); function sf_post_gallery($null, $attr = array()) { global $post, $wp_locale; static $instance = 0; $instance++; // We don't need the "apply_filters" function here, unless you want to mess up all. So we delete it // We're trusting author input, so let's at least make sure it looks like a valid orderby statement if ( isset( $attr['orderby'] ) ) { $attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] ); if ( !$attr['orderby'] ) unset( $attr['orderby'] ); } extract(shortcode_atts(array( 'order' => 'ASC', 'orderby' => 'menu_order ID', 'id' => $post->ID, 'itemtag' => '', // We don't need 'dl' 'icontag' => '', // We don't need 'dt' 'captiontag' => '', // We don't need 'dd' 'columns' => 3, 'size' => 'medium', // We'll use medium instead of thumbnail 'include' => '', 'exclude' => '' ), $attr)); $id = intval($id); if ( 'RAND' == $order ) $orderby = 'none'; if ( !empty($include) ) { $include = preg_replace( '/[^0-9,]+/', '', $include ); $_attachments = get_posts( array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) ); $attachments = array(); foreach ( $_attachments as $key => $val ) { $attachments[$val->ID] = $_attachments[$key]; } } elseif ( !empty($exclude) ) { $exclude = preg_replace( '/[^0-9,]+/', '', $exclude ); $attachments = get_children( array('post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) ); } else { $attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) ); } if ( empty($attachments) ) return ''; if ( is_feed() ) { $output = "\n"; foreach ( $attachments as $att_id => $attachment ) $output .= wp_get_attachment_link($att_id, $size, true) . "\n"; return $output; } $itemtag = tag_escape($itemtag); $captiontag = tag_escape($captiontag); $columns = intval($columns); $itemwidth = $columns > 0 ? floor(100/$columns) : 100; $float = is_rtl() ? 'right' : 'left'; $output = "
"; // We don't need the style tag, so we delete it if($itemtag != '' && $icontag != '' && $captiontag != '') { // If we have specified the tags in the shortcode, let's use them with the original structure $i = 0; foreach ( $attachments as $id => $attachment ) { $link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false); $output .= ""; $output .= " $link {$icontag}>"; if ( $captiontag && trim($attachment->post_excerpt) ) { $output .= " " . wptexturize($attachment->post_excerpt) . " {$captiontag}>"; } $output .= "{$itemtag}>"; if ( $columns > 0 && ++$i % $columns == 0 ) $output .= '
'; } } else { // Else, we use our custom gallery foreach ( $attachments as $id => $attachment ) { $thumb = wp_get_attachment_image_src( $id, $size ); // We get the medium size image representing, it returns an array [url] [width] [height] $caption = wptexturize($attachment->post_excerpt); // The caption text $output .= '[caption id="attachment_'.$id.'" align="alignleft" width="'.$thumb[1].'" caption="' . $caption . ' "]'; // We use the caption shortcode if (isset($attr['link']) && 'file' == $attr['link']) { // If we want to link directly to the file $image = wp_get_attachment_image_src( $id, 'full' ); // We get the full size image representing, we'll use it to retrieve its url with $image[0] $output .= ' '; // The link: $image[0] is the url, we put a rel attribute for a lightbox (you can put what you want) $output .= ' '; // The "thumbnail" $output .= ''; } else { $output .= wp_get_attachment_link($id, $size, true, false); // Link to the attachment page } $output .= '[/caption] '; // We close the caption shortcode } $output = do_shortcode($output); // We finally apply a do_shortcode for the... caption shortcodes } $output .= "
\n"; // Clear the thumbs floats and close the gallery div return $output; }[/code] Là je suis perdu lol, si une âme charitable pouvait regarder de plus près. Merci infiniment ;-)