Array of images

**MorbidThreat** · 01-23-2012, 08:58 AM

I'm trying to get a specific set of images into an array but it's not working.

Code:

y = document.getElementsByTagName('img');

The above works but isn't specific enough.

Code:

y = document.getElementById('test').getElementsByTagName('img');

The above is what I want but doesn't work. How can I achieve this?

Basically I need to use

Code:

$(y[z]).css("display", "none");

on some images in a loop based on specific conditions but only the ones inside the specific div.

**jscheuer1** · 01-23-2012, 01:34 PM

The code that you show is correct and workable. There must be some other problem, either with other javascript code you're not showing, or with HTML markup or css style. One thing though, you cannot get elements before they're parsed by the browser. The code in your post doesn't show whether or not the:

Code:

y = document.getElementById('test').getElementsByTagName('img');

executes before or after the markup in the test division has been parsed. I see you're using jQuery, so you needn't even use getElement(s) anything, you may use jQuery selectors. Also, using display none may interrupt and/or prevent the natural loading of the images by the browser, such as they might not be available when needed.

Without really knowing the overall design of the page, or the ultimate goal of the script, I'd suggest something like so, at least for starting out with just the first image in the test division showing.:

Code:

jQuery(function($){
	$('#test img').css({position: 'absolute', visibility: 'hidden'}).eq(0).css({visibility: 'visible'});
});

Here's one possible scenario for a slideshow of sorts:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	var $images = $('#test img'), count = 0, tot = $images.size(), howLong = 3000;
	$images.css({position: 'absolute', visibility: 'hidden'}).eq(0).css({visibility: 'visible'});

	function showNext(){
		count = (count + 1 + tot) % tot;
		$images.css({position: 'absolute', visibility: 'hidden'}).eq(count).css({visibility: 'visible'});
	}

	setInterval(showNext, howLong);
});
</script>
</head>
<body>
<div id="test">
<img src="test1.jpg" alt="original image" title="">
<img src="test2.jpg" alt="original image" title="">
<img src="test3.jpg" alt="original image" title="">
<img src="test4.jpg" alt="original image" title="">
</div>
</body>
</html>

If you want more help, please explain in detail the objective of the code and provide a link to your demo page.

**MorbidThreat** · 01-23-2012, 11:07 PM

First of all, thank you very much for the help.
I do believe the problem was that I was trying to create the array in the head before the images were loaded.

Here is my full code...

Code:

<script type="text/javascript">
$(window).resize(function() {
  var x = Math.floor($(pics).width() / 101);
  
  var z = x;
  
  for (z;z<y.length;z++) {
	$(y[z]).css("display", "none");
  }
  
  for (i=1; i<x; i++) {
	$(y[i]).css("display", "inline");
  }
  
});

</script>

Then of course the...

Code:

y = document.getElementById('test').getElementsByTagName("img");

Basically trying to write a script that gets the size of a div and divides it by the image width (101) then hides all of the images that wont fit...creating one row of images perfect for any browser size.

**jscheuer1** · 01-24-2012, 01:39 AM

$(pics) selects nothing unless the variable pics is already defined, which it is not in the code you show. You also seem to be assuming that the resize event will fire as the page loads or onload. But it probably will not. Even if all that proceeds as planned, there could be other problems.

But I may have misunderstood. There's really no good way for me to advise you unless I see the page. It doesn't have to work.

Please post a link to the page on your site that contains the problematic code so we can check it out.

Thread: Array of images

Thread Tools

Search Thread

Array of images

Bookmarks

Bookmarks

Posting Permissions