www.webdeveloper.com
Results 1 to 4 of 4

Thread: Image and Text Scripts. Is it possible?

  1. #1
    Join Date
    Apr 2014
    Posts
    2

    Lightbulb Image and Text Scripts. Is it possible?

    Hello.

    I have the following script in my webpage.:
    Code:
    <script type="text/javascript">
    	  function showImage(imgName) {
    		 document.getElementById('largeImg').src = imgName;
    		 showLargeImagePanel();
    		 unselectAll();
    	 }
    	 function showLargeImagePanel() {
    		 document.getElementById('largeImgPanel').style.visibility = 'visible';
    	 }
    	 function unselectAll() {
    		 if(document.selection) document.selection.empty();
    		 if(window.getSelection) window.getSelection().removeAllRanges();
    	 }
    	 function hideMe(obj) {
    		 obj.style.visibility = 'hidden';
    	 }
    </script>
    I call this script everytime I click on a certain image (in my case it's a thumbnail image). It just enlarges the image in middle of the webpage and when I click outside that image it closes it again.

    This is how I call the function:
    Code:
    <img src="1.JPG" style="cursor:pointer" onclick="showImage('1.JPG');" title="Title1"; />
    My question is: What can I add to the script so that I can add text to the image? For example, a box to it's side or underneath it that says the name of the photo a perhaps a small note that I can write and varies for different image. For example image1 title: title 1 note: I took this pic in my room. Etc.

    Sorry if the question is too trivial, I'm still a learner.

    Thank you for your time,
    E.
    Last edited by jedaisoul; 04-26-2014 at 01:19 PM. Reason: code tags added

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,687
    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>
    <style type="text/css">
    /*<![CDATA[*/
    
    BODY {
      height:3000px;
    }
    
    .popimg {
      z-Index:101;border:solid red 1px;
    }
    
    .mask {
      z-Index:100;background-Color:red;
    /* Moz */
      opacity: .5;
    /* IE5-7 */
      filter: alpha(opacity=50);
    /* IE8 */
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }
    
    .caption {
     z-Index:102;width:200px;margin-Top:5px;background-Color:#FFFFCC;border:solid red 1px;text-Align:center;
    }
    
    /*]]>*/
    </style>
    </head>
    
    <body>
    
     <img src="http://www.vicsjavascripts.org/StdImages/Egypt12.jpg" alt="thumb" onclick="zxcPopUpImage.Open('http://www.vicsjavascripts.org/StdImages/WinterPalace.jpg','Caption 1',this);" style="position:relative;top:500px;" />
     <img src="http://www.vicsjavascripts.org/StdImages/Listening.jpg" alt="thumb" width="200" onclick="zxcPopUpImage.Open('http://www.vicsjavascripts.org/StdImages/Listening.jpg','Caption 2');" />
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // PopUp Image (21-April-2014)
    // by: Vic Phillips - http://www.vicsjavascripts.org/
    
    
    var zxcPopUpImage={
    
     Open:function(src,html,obj){
      var o=this;
      if (!o.ud){
       o.nxt=false;
       o.ni=new Image();
       o.ni.src=src;
       o.obj=typeof(obj)=='object'&&obj.nodeName?obj:null;
       o.c.innerHTML=typeof(html)=='string'?html:'';
       o.load(o);
      }
      else if (src!=o.i.src){
       o.nxt=[src,html,obj];
      }
     },
    
     Close:function(src,obj){
      var o=this;
      if (o.ud){
       o.open(o);
      }
     },
    
     init:function(o){
      var ms=o.Animate,ic=o.ImageClass,cc=o.CaptionClass,mc=o.MaskClass,mk=document.createElement('DIV'),msk=mk.cloneNode(false),c=mk.cloneNode(false),i=document.createElement('IMG')
      mk.style.position=msk.style.position='fixed';
      mk.style.right=mk.style.bottom=mk.style.width=mk.style.height='0px';
      msk.style.left='0px';
      msk.style.width='100%';
      msk.className=mc;
      c.className=cc;
      i.className=ic;
      typeof(ic)!='string'?i.style.zIndex='101':null;
      i.style.position=c.style.position='absolute';
      i.style.left=i.style.top=c.style.left=c.style.top=msk.style.top='-3000px';
      typeof(mc)=='string'?document.body.appendChild(msk):null;
      typeof(cc)=='string'?document.body.appendChild(c):null;
      document.body.appendChild(mk);
      document.body.appendChild(i);
      o=this;
      o.mk=mk;
      o.msk=msk;
      o.ud=false;
      o.nxt=false;
      o.c=c;
      o.i=i;
      o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
      o.a=[[i,'width'],[i,'height'],[i,'left'],[i,'top']];
      this.addevt(document,'click','Close');
      this.addevt(window,'resize','resize');
      this.addevt(window,'scroll','resize');
     },
    
     load:function(o){
      clearTimeout(o.to);
      if (o.ni.width<40){
       o.to=setTimeout(function(){ o.load(o); },100);
      }
      else {
       o.open(o,o.ni.src);
      }
     },
    
     open:function(o,src){
      var p=o.obj?o.pos(o.obj):[o.mk.offsetLeft/2,o.mk.offsetTop/2],w=o.obj?o.obj.offsetWidth:0,h=o.obj?o.obj.offsetHeight:0,nw=o.ni.width,nh=o.ni.height,mw=o.mk.offsetLeft,mh=o.mk.offsetTop,d=new Date(),s=o.s(),ms=o.ms/(o.nxt?2:1);
      o.msk.style.height=mh+'px';
      o.msk.style.top='0px';
      if (src){
       o.i.src=src;
       o.i.style.width=w+'px';
       o.i.style.height=h+'px';
       o.i.style.left=p[0]+'px';
       o.i.style.top=p[1]+'px';
      }
      o.c.style.top='-3000px';
      o.animate(o,o.a[0],src?w:o.a[0][3],src?nw:w,d,ms);
      o.animate(o,o.a[1],src?h:o.a[1][3],src?nh:h,d,ms);
      o.animate(o,o.a[2],src?p[0]:o.a[2][3],src?(mw-nw)/2:p[0],d,ms);
      o.animate(o,o.a[3],src?p[1]:o.a[3][3],src?(mh-nh)/2+s[1]:p[1],d,ms,src?'show':'hide');
     },
    
     resize:function(){
      var o=this,nw=o.i.offsetWidth,nh=o.i.offsetHeight,mw=o.mk.offsetLeft,mh=o.mk.offsetTop,s=o.s();
      if (o.ud){
       o.a[2][3]=s[0]+(mw-nw)/2;
       o.i.style.left=o.a[2][3]+'px';
       o.a[3][3]=s[1]+(mh-nh)/2;
       o.i.style.top=o.a[3][3]+'px';
       o.msk.style.height=mh+'px';
       if (o.c.innerHTML){
        o.c.style.left=o.a[2][3]+(nw-o.c.offsetWidth)/2+'px';
        o.c.style.top=o.a[3][3]+nh+'px';
       }
      }
     },
    
     animate:function(o,a,f,t,srt,mS,h){
      clearTimeout(a[4]);
      var ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[3]=Math.max(0,n);
       a[0].style[a[1]]=a[3]+'px';
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ o.animate(o,a,f,t,srt,mS,h); },10);
      }
      else {
       a[3]=t;
       a[0].style[a[1]]=t+'px';
       if (h=='hide'){
        o.i.style.top=o.msk.style.top=o.c.style.top='-3000px';
        o.ud=false;
        o.nxt?o.Open(o.nxt[0],o.nxt[1],o.nxt[2]):null;
       }
       if (h=='show'){
        o.ud=true;
        o.resize();
       }
      }
     },
    
     s:function(){
      return window.innerHeight?[window.pageXOffset,window.pageYOffset]:document.documentElement.clientHeight?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop];
     },
    
     pos:function(o){
      var rtn=[0,0];
      while(o){
       rtn[0]+=o.offsetLeft;
       rtn[1]+=o.offsetTop;
       o=o.offsetParent;
      }
      return rtn;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    
    }
    
    zxcPopUpImage.init({
     ImageClass:'popimg',     //(optional) the classname of the popup image for z-Index etc. (string, default = z-Index = 101)
     CaptionClass:'caption',  //(optional) the classname of the caption DIV.                 (string, default = no caption)
     MaskClass:'mask',        //(optional) the classname of the mask.                        (string, default = no mask)
     Animate:1000             //(optional) the animation duratiopn in millisec.              (string, default = 1000)
    });
    /*]]>*/
    </script>
    
    </body>
    
    </html>
    Last edited by vwphillips; 04-22-2014 at 03:03 AM.
    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/

  3. #3
    Join Date
    Apr 2014
    Posts
    2
    Hello.

    I was expecting just a slight editing of the code I already showed, not a large and completly new code.

    Is there an easier way of just adding text to the code I already have?

    Sorry for the inconvenience,
    Enrique

  4. #4
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,687
    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">
    function showImage(imgName,caption) {
    document.getElementById('largeImg').src = imgName;
    showLargeImagePanel(caption);
    unselectAll();
    }
    function showLargeImagePanel(caption) {
    var p=document.getElementById('largeImgPanel')
    p.getElementsByTagName('DIV')[0].innerHTML=caption||'';
    p.style.visibility = 'visible';
    }
    function unselectAll() {
    if(document.selection) document.selection.empty();
    if(window.getSelection) window.getSelection().removeAllRanges();
    }
    function hideMe(obj) {
    obj.style.visibility = 'hidden';
    }
    </script>
    </head>
    
    <body>
    <img src="http://www.vicsjavascripts.org/StdImages/1.gif" style="cursorointer" onclick="showImage('http://www.vicsjavascripts.org/StdImages/2.gif','caption');" title="Title1"; />
    <div id="largeImgPanel" onclick="hideMe(this);" style="visibility:hidden;" >
    <img id="largeImg" src="http://www.vicsjavascripts.org/StdImages/1.gif" style="cursor:pointer;"  title="Title1"; />
    <div></div>
    </div>
    
    </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/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles