Llevo ya horas buscando probando y peleandome por conseguir lo siguiente:
Estoy utilizando gallerific.js para hacer una especie de slider.... album fotografico...
El tema es que lo principal era que cambiase de imagen al pasar el mouse por el
enlace, no al clicar asi que hice lo siguiente:
Código:
<script type="text/javascript">
//Makes hover work instead of click on gallery
$('a.thumb').mouseenter(function(e)
{
$(this).click();
});
$('a.thumb img').click(function(e)
{
e.stopImmediatePropagation();
});
</script>
Os muestro esto pero ahora os mostrare bien el codigo, es para intentar ser un poco ordenadito, alomejor resulta acabando ser lioso, bueno eso es lo que lo fastidia, el tema es que funciona perfectamente, pero a la que paso rapido me empieza a repetir uno de los divs que tiene que hacer hover, concretamente ".caption"
Entonces es muestro lo que viene a ser el codigo que estoy utilizando en conjunto
/* Aparte de galleriffic.js */
Código:
Cualquier consejo, ayuda, orientación... serán recibidos muy gratamente <div id="gallery" class="content">
<div id="controls" class="controls"></div>
<div class="slideshow-container" style="text-align:center;">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
<div id="caption" class="caption-container"></div>
</div>
</div>
<div id="thumbs" class="navigation" style="width: 300px;
float: left;
display: block;
position: relative;
top: -170px;" >
<ul class="thumbs noscript">
<?php $i=0; foreach ($products as $product) {
$enlace= $product['href'];
$rest = substr($enlace, -2);
?>
<li style="list-style:none;">
<a class="thumb" href="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>"><p class="thumb3"><?php echo $product['name']; ?></p></a>
<script type="text/javascript">
$("p.thumb3").click(function(){
window.open("index.php?route=product/product&product_id=<? echo $rest;?>", "_self")
});
</script>
<div class="caption" style="width: 900px;
position: relative;
top: 10px;left: 20px;">
<center><input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button" /></center>
</div>
</li>
<?$i=$i+1;} ?>
</ul>
</div>
<!-- End Minimal Gallery Html Containers -->
<div style="clear: both;"></div>
</div>
</div>
<script type="text/javascript">
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
$('div.content').css('display', 'block');
$(document).ready(function() {
// Initialize Minimal Galleriffic Gallery
$('#thumbs').galleriffic({
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption'
});
});
</script>
<script type="text/javascript">
//Makes hover work instead of click on gallery
$('a.thumb').mouseenter(function(e)
{
$(this).click();
});
$('a.thumb img').click(function(e)
{
e.stopImmediatePropagation();
});
</script>
Gracias,
Luis
