Fancybox open per click on enlargeImage

[papaver]

1) Script Title: Thumbnailviewer2

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...thumbnail2.htm

3) Describe problem:

I've searched the forum, but found nothing that could help me actually.
Currently I can open Fancybox per thumbnail-click
Is there a possibility, to open Fancybox additional per click the enlarge Image of the loadarea?
So I can open Fancybox per thumbnail-click or click the enlarge image.

My current Code

<div>
<?php
    $images = rwmb_meta( 'metabox_screenshot2', 'type=plupload_image' );
		foreach ( $images as $image )
		{
		 echo "<a class='fancybox' rel='enlargeimage' rev='targetdiv:loadarea,trigger:mouseover' href='{$image['full_url']}' }'><img  src='{$image['url']}' width='50' height='50' alt='{$image['alt']}' /></a>";
		}
	?>
</div>
<div id="loadarea" style="max-width: 700px; max-height:600px;"></div>

Thanks much!

[papaver]

Could someone please help me?
I knew, I could insert a link into the large thumbnailviewer-image (the one inside the loadarea).
In this way:
<a href="myimages/first.jpg" title="This is a picture of my dog!" rel="enlargeimage" rev="targetdiv:loadarea,link:http://cnn.com">Thumbnail</a>
I have tried it with class:fancybox
But how can I insert here Fancybox to activate Fancybox over click the image in the loadarea?
Thanks much!

[jscheuer1]

Well, I would do that then and then do something like:

$('#loadarea a').fancybox();

It depends though on how that version of FancyBox works and what you're after. If it examines the link each time it's clicked, it will pick up on the changing URL. But the best thing might be to have something like:

$('#loadarea a').live('click', function(e){
	$(activetrigger).trigger('click');
	e.preventDefault();
});

Finding the active trigger is the trick, I'll have a look at the thumbnail code. I'm sure it's available as something. This assumes you want the same fancybox triggered as for clicking on the thumbnail would get you though - do you?

[papaver]

Hello John,
thanks for your response!
I tried your suggestions, but unfortunately they do not work.
I work with fancybox2 (http://fancyapps.com/fancybox/ )
I think the problem is that I generate no <a> tag within the loadarea, only

<div id="loadarea" style="max-width: 700px; max-height:600px;">
<div style="">
<img src="http://www.xxx/wp-content/uploads/image_xyz.jpg" style="border-width:0">
</div>
</div>

Fancybox need this construct

 <a class="fancybox" rel="group" href="big_image_1.jpg"><img src="small_image_1.jpg" alt="" /></a>

I was looking for another possibility, to open Fancybox, but I have found no solution

And yes, the Fancybox should open the same way – whether the homepage-visitor clicks on the large image (loadarea, ~ 700 x 600px) or click on the small thumb (50 x 50px).

Thanks so much!

[jscheuer1]

I didn't mean any of that literally. They were just ideas that I knew would need tweaking to actually work. I guess I should have made that clearer. Anyways, put this in the head of the page after the thumbnail script:

<script type="text/javascript">
jQuery(function($){
	var $loadarea = $('#loadarea');
	$loadarea.click(function(e){
		$loadarea.data('$curanchor').trigger('click');
		e.preventDefault();
	}).css({cursor: 'pointer'});
});
</script>

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[papaver]

Hello John,
many thank for you response!

Now, the Fancybox open – but it open in cropped size, partly with scrollpanes, in loadarea-Image-size. At the same time thumbnailviewer2-loadarea-Image disappears, when the fancybox open.
And now I understand your question – the Fancybox should open the same way as the thumbs (full size, not cropped)

Thanks so much!

[jscheuer1]

Hmm, that's strange. It should happen exactly the same as clicking the thumbnail would. But apparently it's not. I could probably troubleshoot that if I had a link to the live page.