Trigger Fancybox on Hover with a minimum of effort?

[Ian]

Hi,

Looking for a simple way to trigger fancybox on hover over an image
without rewriting the whole js code. There's gotta be some easy jquery
to do this in just the intro call, right? i mean, it's jquery! And you
folks are geniuses! Help! :)

Something similar to doing it on keypress (from
http://groups.google.com/group/fancybox/browse_thread/thread/651f9b8e86620939)
:

------------------------------
// KeyPress event
//
$(document).keypress(function(e){
switch(e.which){
case 114:$("a.class_of_item").trigger('click');
break;
}
});

-------------------------------

Pretty basic current implementation on my site:

http://www.danserguitarworks.com/artisan_quality_wood_for_sale.htm

----------------------------------
$(document).ready(function() {
$("a.woodGallery").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'titlePosition' : 'over'
});

});
----------------------------------

Thanks!

[mygoggie]

Something like thi sshould work -

// When mouse enters the image
// Use $ instead of jQuery if you prefer
jQuery(#your_image_ID).mouseenter(function()
{
jQuery(this).fancybox({

'transitionIn' : 'fade',
'transitionOut' : 'fade',
'titlePosition' : 'over'
});
});

[Ian]

Hm. Thanks but unfortunately not, could not get that to work. I tried
it both as a class and as an id. I'm fairly new at jquery, only a few
months, and only socially, not a serious jquery drinker.

Current class implementation (.woodImg) ... tried it as id="woodImg"
on just one <img> as well and that failed.:

http://www.danserguitarworks.com/fbtest.htm

<script type="text/javascript">
$(document).ready(function() {

$(.woodImg).mouseenter(function()
{
$(this).fancybox({

'transitionIn' : 'fade',
'transitionOut' : 'fade',
'titlePosition' : 'over'
});
});

});
</script>


<a class="woodGallery" title="Snakewood headstock veneers, various
sizes, $25 each" href="img/snakewood_headstock.jpg"><img src="img/
snakewood_headstock_sm.jpg" class="woodImg" /></a>

<a class="woodGallery" title="Snakewood fretboard blanks: 20'X3'X1/4',
$48 each" href="img/snakewood_fretboard.jpg"><img src="img/
snakewood_fretboard_sm.jpg" class="woodImg" /></a>

<a class="woodGallery" title="Snakewood bridge blanks, $25 each"
href="img/snakewood_bridge.jpg"><img src="img/
snakewood_bridge_sm.jpg" class="woodImg" /></a>

<a class="woodGallery" title="Snakewood binding: 31'X1/4'X3/32', $8
each" href="img/snakewood_binding.jpg"><img src="img/
snakewood_binding_sm.jpg" class="woodImg" /></a>

On Sep 20, 5:19 pm, mygoggie <mygog...@purplescroll.com> wrote:
>   Something like thi sshould work -
>
> // When mouse enters the image
> // Use $ instead of jQuery if you prefer
> jQuery(#your_image_ID).mouseenter(function()
> {
>      jQuery(this).fancybox({
>          'transitionIn' : 'fade',
>          'transitionOut' : 'fade',
>          'titlePosition'  : 'over'
>      });
>
> });
>
> On 2010/09/20 11:11 PM, Ian wrote:
>
> > Hi,
>
> > Looking for a simple way to trigger fancybox on hover over an image
> > without rewriting the whole js code. There's gotta be some easy jquery
> > to do this in just the intro call, right? i mean, it's jquery! And you
> > folks are geniuses! Help! :)
>
> > Something similar to doing it on keypress (from

> >http://groups.google.com/group/fancybox/browse_thread/thread/651f9b8e...)
> > :

[mygoggie]

hmmm ... I see I forgot the '' around the identifier. Try this ...

<script type="text/javascript">
$(document).ready(function() {

$('.woodImg').mouseenter(function() //<-------- missing ''
{
$(this).fancybox({

'transitionIn' : 'fade',
'transitionOut' : 'fade',
'titlePosition' : 'over'
});
});

});
</script>

[Ian]

Well, almost :)

with a little tweaking your code, I have it back to the original
functionality, lol, which means it's on click still and not hover,
despite using the hover() method (mouseenter+goodies)...

Hmpf.

I appreciate your efforts on this. Any more thoughts?

Current incarnation:

http://www.danserguitarworks.com/fbtest.htm

<script type="text/javascript">
$(document).ready(function() {

$('.woodGallery').hover(function()
{

$(this).fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'titlePosition' : 'over'
});
});


});
</script>

[mygoggie]

OK, I had a look at it on my sandbox server. The trick is to make a
pseudo click action to fire FancyBox up. So you need to catch the
mouseenter and trigger the event as if it was a click. Look at the JS
section below and you will see that I use .live() to catch the
mouseenter and the use .trigger('click') to make fire FancyBox.

BTW, do not use .hover() as it requires TWO functions - mouseenter en
mouseleave. Only use .mouseenter()

This code does work on my machine.

HTML:

<a class='woodGallery' title='Snakewood headstock veneers,

varioussizes, $25 each' href='http://www.danserguitarworks.com/img/
snakewood_headstock.jpg'><img src='http://www.danserguitarworks.com/
img/snakewood_headstock_sm.jpg' class='woodImg' /></a>

JS:

jQuery('.woodGallery').live('mouseenter', function() {
jQuery(this).fancybox().trigger('click');
return false;
});

[Ian]

Fantastic, thanks!

The basic idea is that I'm trying to mouseover, show fancybox,
mouseout, close fancybox. With that in mind, shouldn't this work? What
am I missing? Thanks

$(document).ready(function() {

jQuery('.woodGallery').live('mouseenter', function() {

jQuery(this).fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'titlePosition' : 'over'

}).trigger('click').live('mouseleave',function(){
jQuery.('#fancybox-close').trigger('click');
});
return false;
});

[mygoggie]

hmmm ... and again hmmm ...

What you want to do will not work. You hover the cursor over the
thumbnail, Fancybox opens up and has the focus. Now you cannot move away
from the thumbnail and expect the FancyBox window to close, as the focus
is now in the new FancyBox window and NOT on your thumbnail anymore.

Second problem I see is that what will happen if you flick your mouse
cursor over the thumbnail or series of thumbnails? You will have a
myriad of windows opening. And what will happen if you move from
thumbnail to thumbnail while a FancyBox window is open? Which one to
close now ...?

I would either do this using plain CSS and jQuery or have the user
manually closing the FancyBox window.

I think this is what you want to do:
http://www.sohtanaka.com/web-design/examples/image-zoom/
Tutorial is here -
http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/

Maybe some know of a better way, but the CSS and JQuery method is fast
and clean.