Results 1 to 3 of 3

Thread: Add onclick to load different informational content into another div

  1. #1
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Add onclick to load different informational content into another div

    1) Script Title: Thumbnail Viewer II

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

    3) Describe problem:

    Thank you for this code! It works beautifully. I disabled the onclick action as per this:

    Code:
    <script type="text/javascript">
    jQuery(function($){
    	$('a[rel=enlargeimage]').click(function(e){
    		e.preventDefault()
    	});
    });
    </script>
    And now I would like to have the click load content(detailed info about the image) into another load area. Is this possible?

    I am very new to all this. Please forgive my ignorance.
    Last edited by jscheuer1; 01-30-2012 at 11:35 PM. Reason: Format

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    OK, change that to:

    Code:
    <script type="text/javascript">
    jQuery(function($){
    	$('a[rel=enlargeimage]').bind('click mouseenter', function(e){
    		var infodiv = /\binfodiv *: *([^\b]+)\b/.exec(this.rev), $infotarget,
    		$target = $('#' + /\btargetdiv *: *([^\b]+)\b/.exec(this.rev)[1]);
    		if(infodiv && e.type === 'click'){
    			infodiv = $('#' + infodiv[1]);
    			$infotarget = $('#' + infodiv.get(0).className).html(infodiv.html() || '');
    			$target.data('$infotarget', $infotarget.data('trigger', this));
    		} else if (($infotarget = $target.data('$infotarget')) && $infotarget.data('trigger') !== this){
    			$infotarget.empty();
    		}
    		e.preventDefault();
    	});
    });
    </script>
    Add this stylesheet to the head of the page:

    Code:
    <style type="text/css">
    .infoarea {
    	visibility: hidden;
    	position: absolute;
    	top: -30000px;
    	left: -30000px;
    }
    </style>
    or put its rules in an existing stylesheet for the page.

    You may now make an additional load area with an id of 'infoarea':

    Code:
    <div id="infoarea"></div>
    Put it anywhere you want it on the page. Style it however you like (width, height, colors, font, etc.) It's different than .infoarea, it's #infoarea in a stylesheet or you may style it inline.

    Now all you need to do is make up your detailed information divisions and associate them with each trigger. For example, if you have a trigger like:

    Code:
    <a href="some.jpg" rel="enlargeimage" rev="targetdiv:loadarea" title="Whatever, or there could be no title">Link Text or Thumbnail img tag</a>
    You can add the highlighted:

    Code:
    <a href="some.jpg" rel="enlargeimage" rev="targetdiv:loadarea,infodiv:someid" title="Whatever, or there could be no title">Link Text or Thumbnail img tag</a>
    Then at the bottom of the page, right before the closing </body> tag you can put:

    Code:
    <div id="someid" class="infoarea">
    Detailed information About some.jpg This can go on and on and have links and/or images in it.
    </div>
    Do that for as many as you want/need, using a unique id for each one. Example with two triggers:

    Code:
    <a href="some.jpg" rel="enlargeimage" rev="targetdiv:loadarea,infodiv:someid" title="Whatever, or there could be no title">Link Text or Thumbnail img tag</a> 
    <a href="someother.jpg" rel="enlargeimage" rev="targetdiv:loadarea,infodiv:someotherid" title="Whatever, or there could be no title">Link Text or Thumbnail img tag</a>
    Then at the bottom of the page, right before the closing </body> tag you can put:

    Code:
    <div id="someid" class="infoarea">
    Detailed information About some.jpg This can go on and on and have links and/or images in it.
    </div>
    <div id="someotherid" class="infoarea">
    Detailed information About someother.jpg Like the other one, this can go on and on and have links and/or images in it.
    </div>
    - John
    ________________________

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

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

    LisaD (01-31-2012)

  4. #3
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Wow! Thanks so much, John! Your explanations and step by steps really work beautifully.

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
  •