By Thur on 17 March 2009 | Tagged :

In my previous entry I proudly stated this site is coded not to show the Glider when there are no Javascript capabilities (by simply adding a display:none to a class, embedded in <noscript></noscript>). Nice!
But still: even when not displayed all images are called, so there will be al lot of unnecessary ‘transferring data’ going on. I don’t want that, of course.
On account of my lack of Javascript knowledge I couldn’t find the proper way to do it.

I couldn’t, but this guy Rocko, on the Smashing Magazine Forum, was very fast (and I quote): “… , you can just edit the template file where the carousel entries are printed out and put the whole html (or just tags) into the JavaScript variables. Later, you’ll print these carousel JS-variables in the right place using JavaScript’s document.write() method.

Here’s the original code (only the <img></img> part):

<img src=”<?php echo bloginfo(‘template_url’); ?>/scripts/timthumb.php?src=/<?php
$values = get_post_custom_values(“Image”); echo $values[0]; ?>&w=626&h=249&zc=1&q=100″ alt=”Permanent Link to ‘<?php the_title(); ?>’” width=”626px” height=”249px” class=”full” />
<img src=”<?php echo bloginfo(‘template_url’); ?>/scripts/timthumb.php?src=/<?php
$values = get_post_custom_values(“Image”); echo $values[0]; ?>&w=100&h=75&zc=1&q=100″ class=”thumbnail” />

Here’s the presented solution:

<script type=”text/javascript”>
var full = “
<img src=\“<?php echo bloginfo(‘template_url’); ?>/scripts/timthumb.php?src=/<?php $values = get_post_custom_values(“Image”); echo $values[0]; ?>\&w=626\&h=249\&zc=1\&q=100\” alt=\“Permanent Link to \‘<?php the_title(); ?>\\” width=\“626px\” height=\“249px\” class=\“full\” />“;
var thumb = “<img src=\“<?php echo bloginfo(‘template_url’); ?>/scripts/timthumb.php?src=/<?php $values = get_post_custom_values(“Image”); echo $values[0]; ?>\&w=100\&h=75\&zc=1\&q=100\” class=\“thumbnail\” />“;
document.write(full + “\n\t\t” + thumb + “\n”);
</script>

Brilliant but simple (thus brilliant): the server generates the proper <img></img> html code, but on the client (where and only when JS is disabled) the document.write statement isn’t executed, hence no images are loaded. That’s it!

Thank you again, Rocko!

  • Print
  • email
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Hyves
  • LinkedIn
  • Technorati
  • Tumblr

Related Posts

You can leave a response or trackback from your own site.

One Comment

Rocko on 17 March 2009

Thanks my pleasure

Leave your response!

Your email address will not be published. Required fields are marked *

Get your own Globally Recognized Avatar at Gravatar.