views e imagecache
Inviato da sound il 18 dicembre, 2009 - 12:08.
buongiorno a tutti,
volevo un aiuto per creare una vista ed utilizzare i preset di imagecache.
ho creato una vista con delle immagini, stile griglia, sono tante immagini piccole e ho impostato un preset di imagecache, adesso vorrei che quando ci passo sopra col mouse (effetto hover), l'immagine cambia preset gradualmente (effetto jquery). potete aiutarmi?
Sound
Risposte
Per cominciare con un
Per cominciare con un semplice effetto di trasparenza puoi seguire questi passi.
Dall'interfaccia di gestione della vista:
Impostazioni di base >> Intestazione
incolla il seguente codice nell'area di testo
<?php$javascript=
"jQuery(function(){
$('.view-[id-della-vista] img').each(
function() {
$(this).hover(function() { $(this).stop().animate({ opacity: 0.2 }, 'fast'); },
function() { $(this).stop().animate({ opacity: 1.0 }, 'fast'); });
});
});";
drupal_add_js($javascript,'inline');
?>
dovrai cambiare il frammento [id-della-vista] con il nome della tua vista (così come riportato nell'elenco delle viste del sito).
Da qui puoi provare a personalizzare il codice per ottenere quello che desideri.
se volessi usare un altro
se volessi usare un altro effetto al osto di opacity come faccio?
ad esempio se opacity vorrei rendere più scura l'immagine
Scurire un'immagine con jQuery
Per "scurire" un'immagine puoi utilizzare un div sovrapposto ad essa (nero) e "giocare" con opacity per ottenere l'effetto fade in/out.
<?php
$javascript=
'jQuery(function(){
$(\'.view-test img\').each(
function (){
var img = $(this);
var css = $.extend({
position:\'absolute\',
backgroundColor:\'black\',
opacity: 0.0,
width:img.width(),
height:img.height()
},img.position());
$(\'<div></div>\').css(css).insertAfter(img)
.hover(function() { $(this).stop().animate({ opacity: 0.5 }, \'fast\'); },
function() { $(this).stop().animate({ opacity: 0.0 }, \'fast\'); });
});
});';
drupal_add_js($javascript,'inline');
?>