inserire i tasti prev e next su Fancybox
Ciao a tutti,
Ho integrato Flickr su Drupal e ho installato la libreria Fancybox (simile a Lightbox), seguendo questa guida in inglese: www.chrisfree.me/2010/12/create-drupal-photo-gallery-using-flickr-cck-vi...
Ho modificato il file template.php non basandomi sulla guida di cui sopra, ma secondo quest'altra http://www.signalkuppe.com/fancyboxsudrupal in modo che, se clicco sull'immagine mi si ingrandisce con l'effetto appunto fancybox... Fin qui tutto ok, ma non ho la possibilità di passare da un immagine all'altra cliccando next e prev perchè le freccette non appaiono sull'immagine che vado ad aprire.. So che si può fare ma ho fatto di tutto (compresa l'installazione del modulo fancybox) ma non ne vengo a capo..
Qui sotto è il codice che ho inserito in template.php che mi fa vedere le immagini senza il prev e il next:
// includi il css di fancybox
drupal_add_css("sites/all/fancybox/jquery.fancybox-1.3.4.css");
// includi lo script di fancybox
drupal_add_js("sites/all/fancybox/jquery.fancybox-1.3.4.js");
// includi lo script per il png fix
drupal_add_js("sites/all/fancybox/jquery.easing-1.3.pack.js");
//funzione jquery che attiva l'effetto su tutte le immagini contenute nel div con classe "flickr-photoset"
drupal_add_js (
'$(document).ready(function(){$("div.flickr-photoset a").fancybox({"overlayShow": true });}); ',
'inline');Probabilmente devo lavorare su .fancybox({"overlayShow": true }); ma non so cosa scriverci..
Qualcuno sa darmi una mano?
Grazie mille
Risposte
Ciao, una curiosità: hai
Ciao, una curiosità: hai aggiunto l'attributo "rel" ad ogni link? Altrimenti lo script non capisce che si tratta di un gruppo di immagini.
Grazie, non ho messo
Grazie, non ho messo l'attributo rel e sinceramente non so dove metterlo..
Nel file jquery.fancybox-1.3.4.js che ho richiamato in template.php ha questa stringa di codice
...
var rel = $(this).attr('rel') || '';
if (!rel || rel == '' || rel === 'nofollow') {
selectedArray.push(this);
} else {
selectedArray = $("a[rel=" + rel + "], area[rel=" + rel + "]");
selectedIndex = selectedArray.index( this );
...
Devo metterlo lì? e che parola rel devo inserire?
Grazie mille
Ciao, l'attributo va
Ciao, l'attributo va posizionato nel tag anchor che contiene l'immagine. Una cosa del genere:
<?php<div class="flickr-photoset">
<a rel="gruppo_foto" href="img01_big.jpg"><img src="img01_small.jpg"></a>
...
<a rel="gruppo_foto" href="img10_big.jpg"><img src="img10_small.jpg"></a>
</div>
?>
il valore di rel deve essere uguale per tutte le foto in un gruppo.
Ti ringrazio ma dove metto
Ti ringrazio ma dove metto questo codice? se lo metto in template.php, drupal mi da errore..
Al momento se analizzo con firebug ho questo codice che drupal mi crea in automatico aggiungendo il nodo flickr:
<?php<div class="flickr-photoset">
<div class="flickr-photoset-img flickr-photoset-img-s">
<a title="IMG001" href="http://farm3.static.flickr.com/..../....jpg"><img height="75" width="75" class=" flickr-photo-img" title="IMG001" alt="IMG001" src="http://farm3.static.flickr.com/..../....jpg"></a>
</div>
....
?>
Grazie
Per integrare lo script con
Per integrare lo script con il modulo flickr che usi puoi implementare le funzioni di theming nel template: se apri il file flickr.module le puoi vedere (theme_*).
Questo è il codice che ho
Questo è il codice che ho trovato dentro flickr.module...
Dove inserisco il tag rel?
function theme_flickr_photo($p, $size = NULL, $format = NULL, $attribs = NULL) { $img = flickr_img($p, $size, $attribs);
$photo_url = flickr_photo_page_url($p['owner'], $p['id']);
$title = is_array($p['title']) ? $p['title']['_content'] : $p['title'];
return l($img, $photo_url, array('attributes' => array('title' => $title), 'absolute' => TRUE, 'html' => TRUE)); } function theme_flickr_photo_box($p, $size = NULL, $format = NULL, $attribs = NULL) { $img = flickr_img($p, $size, $attribs);
$title = is_array($p['title']) ? $p['title']['_content'] : $p['title'];
$photo_url = flickr_photo_page_url($p['owner'], $p['id']);
$output = "\n";
$output .= "$img";
$output .= "";
$output .= '
'. check_plain($title) ."
\n";
$output .= "";
$output .= "
\n"; return $output; }
....
function theme_flickr_photos($uid, $photos) { $output = theme('pager', NULL, variable_get('flickr_photos_per_page', 20));
$output .= "
\n";
foreach ($photos['photo'] as $photo) { $output .= theme('flickr_photo_box', $photo, 'm');
} $output .= '
'; $output .= theme('pager', NULL, variable_get('flickr_photos_per_page', 20));
return $output; } function theme_flickr_photoset($ps, $owner, $size, $attribs = NULL) { if (module_exists('flickr_sets')) { $output .= "
\n";
$photos = flickr_set_load($ps['id']);
foreach ((array) $photos['photoset']['photo'] as $photo) { //insert owner into $photo because theme_flickr_photo needs it $photo['owner'] = $owner;
$output .= theme('flickr_photo', $photo, $size);
}
Grazie
RISOLTO: ho aggiunto il
RISOLTO: ho aggiunto il seguente codice all'interno del file flickr.module:
<?php
function yourTheme_flickrfield_photoset($img, $photo_url, $formatter, $photo_data, $node) {
$output = '<div class="flickr-photoset">';
if (module_exists('flickr_sets')) {
$photos = flickr_set_load($photo_data['id']);
foreach ((array) $photos['photoset']['photo'] as $photo) {
//insert owner into $photo because theme_flickr_photo needs it
$photo['owner'] = $photos['photoset']['owner'];
$title = is_array($photo['title']) ? $photo['title']['_content'] : $photo['title'];
$img = flickr_img($photo, $formatter);
$original = flickr_photo_img($photo, 'b');
if (arg(0) == 'node' && arg(1) == $node->nid) {
$output .= '<div class="flickr-photoset-img flickr-photoset-img-'. $formatter .'">'. l($img, $original, array('attributes' => array('title' => $title, 'rel' => 'photos', 'class' => 'fancybox'), 'absolute' => TRUE, 'html' => TRUE)) .'</div>';
} else {
$output .= '<div class="flickr-photoset-img flickr-photoset-img-'. $formatter .'">'. l($img, 'node/'. $node->nid, array('attributes' => array('title' => $title), 'absolute' => TRUE, 'html' => TRUE)) . '</div>';
}
}
} else {
$title = is_array($photo_data['title']) ? $photo_data['title']['_content'] : $photo_data['title'];
if (arg(0) == 'node' && arg(1) == $node->nid) {
$output .= '<div class="flickr-photoset-img">'. $img .'</div>';
} else {
$output .= '<div class="flickr-photoset-img">'. l($img, 'node/'. $node->nid, array('attributes' => array('title' => $title), 'absolute' => TRUE, 'html' => TRUE)) . '</div>';
}
}
$output .= '</div>';
$output .= '<div class="flickr-photoset-meta">';
$output .= '<p>'. $photo_data['description']['_content'] .'</p>';
$output .= '<cite>'. l(t('Source: Flickr'), $photo_url) .'</cite>';
$output .= '</div>';
return $output;
}
?>
Grazie blackice78 dell'aiuto!
Ottimo! Grazie per aver
Ottimo! Grazie per aver condiviso la tua soluzione.
P.S. forse volevi dire all'interno del template.php non in flickr.module (?)
No, ed è questo che non
No, ed è questo che non capisco.. questo codice non mi funzionava in template.php e ho passato un bel po' di tempo a capire perchè non mi funzionasse senza venirne a capo.
Comunque una risposta ci sarebbe.. probabilmente quando si implementa in template.php si richiamano moduli particolari come per es. fancybox, mentre lavorando in flickr.module utilizzo la libreria che ho installato non nella cartella sites/all/libraries come prevedeva il modulo ma in sites/all/ come da guida http://www.signalkuppe.com/fancyboxsudrupal
Non vorrei aver detto un eresia, però ;-)