Advanced Search

Results 1 to 3 of 3

Thread: Image w/ description tooltip v2.0 - with lightbox?

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

    Default Image w/ description tooltip v2.0 - with lightbox?

    1) Script Title: Image w/ description tooltip v2.0

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

    3) Describe problem:
    Is there is option to use this super script with lightbox? Now it works with 'mouseover' ? I want to open bigger image after click.
    Two rel="" will work together?

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

    Default

    Links like that dont work:
    Code:
    <a href="../01.jpg" rel="lightbox" rel="imgtip[0]"><img src="../f.png"></a>
    Looks like only the first 'rel' is counting.
    Can you help with combine this?

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,706
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    try

    Code:
    <a href="../01.jpg" rel="lightbox imgtip[0]" ><img src="../f.png"></a>
    or
    changes in red
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="ddimgtooltip.css" />
    <style type="text/css">
    /*<![CDATA[*/
    .ddimgtooltip{
    box-shadow: 3px 3px 5px #818181; /*shadow for CSS3 capable browsers.*/
    -webkit-box-shadow: 3px 3px 5px #818181;
    -moz-box-shadow: 3px 3px 5px #818181;
    display:none;
    position:absolute;
    border:1px solid black;
    background:white;
    color: black;
    z-index:2000;
    padding: 4px;
    }
    
    /*]]>*/
    </style>
    <script type="text/javascript" >
    
    /* Image w/ description tooltip v2.0
    * Created: April 23rd, 2010. This notice must stay intact for usage
    * Author: Dynamic Drive at http://www.dynamicdrive.com/
    * Visit http://www.dynamicdrive.com/ for full source code
    */
    
    
    var ddimgtooltip={
    
    	tiparray:function(){
    		var tooltips=[]
    		//define each tooltip below: tooltip[inc]=['path_to_image', 'optional desc', optional_CSS_object]
    		//For desc parameter, backslash any special characters inside your text such as apotrophes ('). Example: "I\'m the king of the world"
    		//For CSS object, follow the syntax: {property1:"cssvalue1", property2:"cssvalue2", etc}
    
    		tooltips[0]=["red_balloon.gif", "Here is a red balloon<br /> on a white background", {background:"#FFFFFF", color:"black", border:"5px ridge darkblue"}]
    		tooltips[1]=["duck2.gif", "Here is a duck on a light blue background.", {background:"#DDECFF", width:"200px"}]
    		tooltips[2]=["../dynamicindex14/winter.jpg"]
    		tooltips[3]=["../dynamicindex17/bridge.gif", "Bridge to somewhere.", {background:"white", font:"bold 12px Arial"}]
    
    		return tooltips //do not remove/change this line
    	}(),
    
    	tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips
    
    	//***** NO NEED TO EDIT BEYOND HERE
    
    	tipprefix: 'imgtip', //tooltip ID prefixes
    
    	createtip:function($, tipid, tipinfo){
    		if ($('#'+tipid).length==0){ //if this tooltip doesn't exist yet
    			return $('<div id="' + tipid + '" class="ddimgtooltip" />').html(
    				'<div style="text-align:center"><img src="' + tipinfo[0] + '" /></div>'
    				+ ((tipinfo[1])? '<div style="text-align:left; margin-top:5px">'+tipinfo[1]+'</div>' : '')
    				)
    			.css(tipinfo[2] || {})
    			.appendTo(document.body)
    		}
    		return null
    	},
    
    	positiontooltip:function($, $tooltip, e){
    		var x=e.pageX+this.tooltipoffsets[0], y=e.pageY+this.tooltipoffsets[1]
    		var tipw=$tooltip.outerWidth(), tiph=$tooltip.outerHeight(),
    		x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(ddimgtooltip.tooltipoffsets[0]*2) : x
    		y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y
    		$tooltip.css({left:x, top:y})
    	},
    
    	showbox:function($, $tooltip, e){
    		$tooltip.show()
    		this.positiontooltip($, $tooltip, e)
    	},
    
    	hidebox:function($, $tooltip){
    		$tooltip.hide()
    	},
    
    
    	init:function(targetselector){
    		jQuery(document).ready(function($){
    			var tiparray=ddimgtooltip.tiparray
    			var $targets=$(targetselector)
    			if ($targets.length==0)
    				return
    			var tipids=[]
    			$targets.each(function(){
    				var $target=$(this)
    				$target.attr('rev').match(/\[(\d+)\]/) //match d of attribute rel="imgtip[d]"
    				var tipsuffix=parseInt(RegExp.$1) //get d as integer
    				var tipid=this._tipid=ddimgtooltip.tipprefix+tipsuffix //construct this tip's ID value and remember it
    				var $tooltip=ddimgtooltip.createtip($, tipid, tiparray[tipsuffix])
    				$target.mouseenter(function(e){
    					var $tooltip=$("#"+this._tipid)
    					ddimgtooltip.showbox($, $tooltip, e)
    				})
    				$target.mouseleave(function(e){
    					var $tooltip=$("#"+this._tipid)
    					ddimgtooltip.hidebox($, $tooltip)
    				})
    				$target.mousemove(function(e){
    					var $tooltip=$("#"+this._tipid)
    					ddimgtooltip.positiontooltip($, $tooltip, e)
    				})
    				if ($tooltip){ //add mouseenter to this tooltip (only if event hasn't already been added)
    					$tooltip.mouseenter(function(){
    						ddimgtooltip.hidebox($, $(this))
    					})
    				}
    			})
    
    		}) //end dom ready
    	}
    }
    
    //ddimgtooltip.init("targetElementSelector")
    ddimgtooltip.init("*[rev^=imgtip]")
    </script></head>
    
    <body>
    <p><a href="http://www.dynamicdrive.com" rev="imgtip[0]">Link 1</a></p>
    <p><a href="http://javascriptkit.com" rev="imgtip[1]" style="float:right">Link 2</a></p>
    <p><a href="http://cssdrive.com" rev="imgtip[2]">Link 3</a></p>
    <p><a href="http://codingforums.com" rev="imgtip[3]">Link 4</a></p>
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Similar Threads

  1. Image w/ description tooltip - Description hidden
    By Lady Rogue in forum Dynamic Drive scripts help
    Replies: 9
    Last Post: 01-25-2010, 04:39 PM
  2. Image w/ description tooltip
    By Pati2005 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 08-12-2007, 05:29 PM
  3. Image w/ description tooltip
    By ipcress in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 01-01-2007, 03:56 AM
  4. Image w/ description tooltip
    By rich1234 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 05-24-2006, 10:58 AM

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
  •