[SOLVED] adding text before/after all images in the page

[SchweppesAle]

hi, I was wondering how I would go about doing this.

 

Like if I wanted to create a link to each image on the page and wrap it around them dynamically depending on where each one is located.  How would I go about doing this?

 

 

[Ken2k7]

I don't fully get what you mean by "wrap it around them dynamically". Do you have an example?

[SchweppesAle]

I don't fully get what you mean by "wrap it around them dynamically". Do you have an example?

 

I'd like to modify the following code so that each image of width > 450 is wrapped by a link tag

document.write('<a href = "myImages[i].src" rel = "lightbox">');

 

 

then at the end of that image document.write('</a>');

 

The only problem is, I'm not exactly sure how to append these tags before and after each image. 

<script language="javascript" type="text/javascript">
<!--
       function resize_images()
  {
	  	
        for (i = 0; i < myImages.length; i++)
        {
          
	  
	  myImages[i].style.display = "inline";
	  

	  
	  

	  
          if ( myImages[i].width > 450 && (myImages[i].className != 'noresize'))

          {
	  var tempHeight = myImages[i].height;
	  var tempWidth = myImages[i].width;
		  
		  
		  
		    myImages[i].onclick=function() {
			var picture = window.open(this.src, 'popupwindow' , 'width ='+tempWidth+', height = '+tempHeight+', scrollbars = no, resizable');
			picture.focus();
			return false;
			};

			myImages[i].style.border = '2px solid #ffffff';

			myImages[i].onmouseover = function(){
			this.style.border = '2px solid red';
			return false;
			};

			myImages[i].onmouseout = function(){
			this.style.border = '2px solid #ffffff';
			return false;
			};

		  var scaleheight = 450/(myImages[i].width) *(myImages[i].height);
            myImages[i].width = 450;
		myImages[i].height = scaleheight;




			myImages[i].style.cursor='pointer';/*
			document.write("<br/>");
			document.write("click to enlarge");*/

          }
	  myImages[i].style.visibility = "visible";
	  
	  
        } 



  }
    //-->
    </script>

[Ken2k7]

Use a loop. What's myImages? Is that an array of images?

 

for (var e = myImages.length; --e > -1; ) {
     document.write('<a href="' + myImages[e].src . '" rel="lightbox"');
}

Something like that?

[SchweppesAle]

Use a loop. What's myImages? Is that an array of images?

 

for (var e = myImages.length; --e > -1; ) {
     document.write('<a href="' + myImages[e].src . '" rel="lightbox"');
}

Something like that?

 

sorry about that.  I pulled out too much before i posted the code.

 

myImages is an array of every image within the set element.  So the images themselves have already been placed within the html document.  I'm having trouble with adding the additional tags before and after each image.

 

 

<script language="javascript" type="text/javascript">
<!--
       function resize_images()
  {
	  

var myDiv = document.getElementById('center');
var myImages = myDiv.getElementsByTagName("img");



        for (i = 0; i < myImages.length; i++)
        {
          /*
	  while ( !myImages[i].complete )
          {
           
          }*/
	  
	  myImages[i].style.display = "inline";
	  

	  
	  

	  
          if ( myImages[i].width > 450 && (myImages[i].className != 'noresize'))

          {
	  var tempHeight = myImages[i].height;
	  var tempWidth = myImages[i].width;
		  
		  
		  
		    myImages[i].onclick=function() {
			var picture = window.open(this.src, 'popupwindow' , 'width ='+tempWidth+', height = '+tempHeight+', scrollbars = no, resizable');
			picture.focus();
			return false;
			};

			myImages[i].style.border = '2px solid #ffffff';

			myImages[i].onmouseover = function(){
			this.style.border = '2px solid red';
			return false;
			};

			myImages[i].onmouseout = function(){
			this.style.border = '2px solid #ffffff';
			return false;
			};

		  var scaleheight = 450/(myImages[i].width) *(myImages[i].height);
            myImages[i].width = 450;
		myImages[i].height = scaleheight;




			myImages[i].style.cursor='pointer';/*
			document.write("<br/>");
			document.write("click to enlarge");*/

          }
	  myImages[i].style.visibility = "visible";
	  
	  
        } 



  }
    //-->
    </script>

[Ken2k7]

Okay, can you give me just a glimpse of how the HTML is set up?

 

Thanks!

[Psycho]

No need to "add" anchor tags - just dynamically give the images an onclick event. This should do what you want (tested in IE7 & FF3):

 

<script type="text/javascript">

function linkImages()
{
    var minImageWidth = 450;
    var imageList = document.images;
    var imageCount = imageList.length;

    for (var idx=0; idx<imageCount; idx++)
    {
        if (imageList[idx].width > minImageWidth)
        {
            imageList[idx].onclick = openImage;
        }
    }
    return;
}

function openImage()
{
    window.location = this.src;
}

window.onload = linkImages;

</script>

[SchweppesAle]

as far as I know, the current lightbox script which I downloaded needs to be activated using the following format.

 

<a href = "location of image" rel = "lightbox">some image</a>

 

I'm not sure the window.location method will be able to pull this off.  I need to actually enclose the image with a link and set the rel attribute to "lightbox".

 

 

 

 

 

 

 

[Psycho]

Well, you could try to add a rel="lightbox" to the images as well.

        if (imageList[idx].width > minImageWidth)
        {
            imageList[idx].rel = 'lightbox';
            imageList[idx].onclick = openImage;
        }

 

Or, if that doesn't work, then put an anchor tag around every image before the Javascript runs, but make the href value "#". The image and anchor tags should have similar IDs. Then change the href to the img src using the JS.

 

HTML when page loads

<a href="#" rel="lightbox" id="href_1"><img src="http://www.mydomain.com/image.jpg" id= id="img_1"></a>

 

Then in the script above replace the loop with this (not tested)

        if (imageList[idx].width > minImageWidth)
        {
            idNum = imageList[idx].id.substr(4);
            document.getElementById('href_'+idNum).href=imageList[idx].src
        }

[Ken2k7]

mjdamato, you left an empty id attribute.

[SchweppesAle]

Is there a way to use appendchild to do this?  I'm trying to make this as simple as possible for the client since he really doesn't know any html.  Asking him to place <a href = "#" into the code is going to return some pretty funny looks. 

[SchweppesAle]

just found an insertbefore and an insertafter method for javascript.  maybe this will do the trick. 

[SchweppesAle]

just found an insertbefore and an insertafter method for javascript. maybe this will do the trick.

 

*stares at type mismatch error then slams head down on desk*

 

function resize_images()
  {


var myDiv = document.getElementById('center');
var myImages = myDiv.getElementsByTagName("img");



       for (i = 0; i < myImages.length; i++)
       {
         /*
	  while ( !myImages[i].complete )
         {
          
         }*/

	  myImages[i].style.display = "inline";






         if ( myImages[i].width > 450 && (myImages[i].className != 'noresize'))

         {
	  var tempHeight = myImages[i].height;
	  var tempWidth = myImages[i].width;




		  var location = '<a href = '+myImages[i].src+'>';
		  var location2 = '</a>';



		  myImages[i].insertBefore(location, location2);


		    myImages[i].onclick=function() {
			var picture = window.open(this.src, 'popupwindow' , 'width ='+tempWidth+', height = '+tempHeight+', scrollbars = no, resizable');
			picture.focus();
			return false;
			};

			myImages[i].style.border = '2px solid #ffffff';

			myImages[i].onmouseover = function(){
			this.style.border = '2px solid red';
			return false;
			};

			myImages[i].onmouseout = function(){
			this.style.border = '2px solid #ffffff';
			return false;
			};

		  var scaleheight = 450/(myImages[i].width) *(myImages[i].height);
           myImages[i].width = 450;
		myImages[i].height = scaleheight;




			myImages[i].style.cursor='pointer';/*
			document.write("<br/>");
			document.write("click to enlarge");*/

         }
	  myImages[i].style.visibility = "visible";


       } 



  }
   //-->
   </script>

 

 

[Ken2k7]

*facepalms*

 

You should really read up on functions and what parameter they take before applying them blindly. insertBefore takes a DOM element as a parameter, not a string. Does that help?

[SchweppesAle]

*facepalms*

 

You should really read up on functions and what parameter they take before applying them blindly. insertBefore takes a DOM element as a parameter, not a string. Does that help?

 

sorry man, my Javascript is weak.

 

I'm getting an unexpected call to method or property access error now.

 

<script language="javascript" type="text/javascript">
<!--
       function resize_images()
  {
	  

var myDiv = document.getElementById('center');
var myImages = myDiv.getElementsByTagName("img");



        for (i = 0; i < myImages.length; i++)
        {
          /*
	  while ( !myImages[i].complete )
          {
           
          }*/
	  
	  myImages[i].style.display = "inline";
	  

	  
	  

	  
          if ( myImages[i].width > 450 && (myImages[i].className != 'noresize'))

          {
	  var tempHeight = myImages[i].height;
	  var tempWidth = myImages[i].width;
		  
		  

		  /*
		  var location = '<a href = '+myImages[i].src+'>';
		  var location2 = '</a>';
		  */

		 var link = document.createElement('a');
		 link.setAttribute('href', myImages[i].src);
		 link.setAttribute('rel', 'lightbox'); 
		  
		  myImages[i].insertBefore(link);
		  
		  /*
		    myImages[i].onclick=function() {
			var picture = window.open(this.src, 'popupwindow' , 'width ='+tempWidth+', height = '+tempHeight+', scrollbars = no, resizable');
			picture.focus();
			return false;
			};*/

			myImages[i].style.border = '2px solid #ffffff';

			myImages[i].onmouseover = function(){
			this.style.border = '2px solid red';
			return false;
			};

			myImages[i].onmouseout = function(){
			this.style.border = '2px solid #ffffff';
			return false;
			};

		  var scaleheight = 450/(myImages[i].width) *(myImages[i].height);
            myImages[i].width = 450;
		myImages[i].height = scaleheight;




			myImages[i].style.cursor='pointer';/*
			document.write("<br/>");
			document.write("click to enlarge");*/

          }
	  myImages[i].style.visibility = "visible";
	  
	  
        } 



  }
    //-->
    </script>

 

 

starting to think this isn't worth the time invested.

 

 

[Ken2k7]

Not sure that makes any sense. You can't insert anything to images because its tag auto-closes itself. It's probably best to ask rather than blindly applying something. Why? Because it gets confusing to you who are trying to learn when you here multiple viewpoints.

 

insertBefore works like:

<div id="e">
     <p id="k"> blah </p>
</div>

You have that DIV, and you want to insert something before p. Well, document.getElementById("e").insertBefore(new_element, document.getElementById("k"));

 

It takes 2 parameters as far as I know. The second, if omitted, will be treated more like insertAfter. You can see why your code fails right?

[Psycho]

I'm trying to make this as simple as possible for the client since he really doesn't know any html.  Asking him to place <a href = "#" into the code is going to return some pretty funny looks.

 

Can you at least require that the images be enclosed in SPAN tags (without any parameters)? If so, this script will add the hyperlinks needed:

 

<html>
<head>
<script type="text/javascript">

function linkImages(image)
{
    var minImageWidth = 450;
    var imageList = document.images;
    var imageCount = imageList.length;

    for (var idx=0; idx<imageCount; idx++)
    {
        if (imageList[idx].width > minImageWidth)
        {
            var parentSpan = imageList[idx].parentNode;
            var imageHTML  = parentSpan.innerHTML;
            var imageSrc   = imageList[idx].src;
            var newHTML = '<a href="'+imageSrc+'" rel="lightbox">'+imageHTML+'</a>';
            parentSpan.innerHTML = newHTML;
        }
    }
    return;
}

window.onload = linkImages;

</script>

</head>

<body>
  <span><img SRC="small.jpg" /></span><br><br>
  <span><img SRC="lighthouse.jpg" /></span><br><br>
  <span><img SRC="rock_island.jpg" /></span>
</body>
</html>