www.webdeveloper.com
Results 1 to 2 of 2

Thread: Dynamic rel argument values for image size

  1. #1
    Join Date
    Sep 2009
    Location
    London, UK
    Posts
    1

    Dynamic rel argument values for image size

    Hi guys, hope someone can help. I think this should be very easy to seasoned JS developers. I've tried lots of ways but this has me stumped. I'll explain in detail what I am doing.

    This code references a Jquery class:
    <a class="bumpbox" href="IMG.jpg" rel="640,480">View Image</a>

    The image file:
    <img src="IMG.jpg" id="x">

    which upon clicking opens the image in a clean popup window. So far so good. I want to know the height X width properties of the image programatically, so I wrote this Javascript function:

    <script language = "Javascript">
    var w;
    var h;

    w = document.images.x.width;
    h = document.images.x.height;

    var hw = w+', '+h;

    </script>


    which works beautifully. I appened <a> code above to include
    onclick = "alert(hw);" to test the values are correct and it works great. A pop-up of the heightXwidth values of the image pops up on the click.


    So my problem is that the image loaded is dynamic and the height and width values are going to be different each time.

    For this bit:
    <a class="bumpbox" href="IMG.jpg" rel="640,480">View Image</a>

    I need to pass in those values to the "rel" values dynamically.

    I were doing ASP, I'd use

    rel="<%=h%>,<%=w%>"

    But I want to keep this server side and use the values retrieved from my javascript function. I've tried lots of ways here but no cigar

    Stuff like
    <a class="bumpbox" href="IMG.jpg" rel="<script>hw<script>">View Image</a>


    Can anyone help? Is this even possible?

    Thanks in advance!

  2. #2
    Join Date
    Apr 2008
    Location
    UK
    Posts
    76
    You need to be careful about getting the height and width from images. They will only have height and width attributes when the image has completed loading. (e.g. capture "onload" events on image elements).

    Never-the-less, when your in a position to set the rel of the anchor tags (e.g you know the height/ width), just do theAnchorElement.rel = h +"X" + w

    To do this nicely with jQuery, you might look at something like...
    Code:
    $(document).ready(function() {
    	$('.bumpbox').each(function() {
    		var me = $(this);
    		var imageToPreload = new Image();
    		
    		imageToPreload.onload = function() {
    			me.attr('rel', $(this).attr('width') + "X" + $(this).attr('height'));
    		}
    		imageToPreload.src = $(this).attr('href');
    	});
    })

Thread Information

Users Browsing this Thread

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

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