Results 1 to 7 of 7

Thread: Fancybox open per click on enlargeImage

  1. #1
    Join Date
    Oct 2012
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default Fancybox open per click on enlargeImage

    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
    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!

  2. #2
    Join Date
    Oct 2012
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    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!

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,978
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

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

    Code:
    $('#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:

    Code:
    $('#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?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. The Following User Says Thank You to jscheuer1 For This Useful Post:

    papaver (11-20-2012)

  5. #4
    Join Date
    Oct 2012
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    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
    Code:
    <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
    Code:
     <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!

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,978
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    papaver (11-22-2012)

  8. #6
    Join Date
    Oct 2012
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    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!

  9. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,978
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Keep animated div open on click
    By grinnellja in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 08-04-2011, 08:21 AM
  2. Replies: 1
    Last Post: 03-11-2010, 06:13 PM
  3. Require click on ad to open link
    By ExclusiveRnB in forum HTML
    Replies: 1
    Last Post: 05-18-2008, 02:44 AM
  4. open multiple links on click
    By joesatriani in forum Looking for such a script or service
    Replies: 1
    Last Post: 02-01-2008, 09:34 AM
  5. How to click on Image Map and open New Window
    By logancat in forum JavaScript
    Replies: 2
    Last Post: 01-08-2006, 04:57 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •