Results 1 to 4 of 4

Thread: Array of images

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

    Question Array of images

    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.

  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

    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.
    Last edited by jscheuer1; 01-23-2012 at 01:56 PM. Reason: add scenario
    - John
    ________________________

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

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

    Default

    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.

  4. #4
    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

    $(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.
    - John
    ________________________

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

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
  •