Question

The title is just my thought on how to do something, not necessarily, “the way”, here is the situation.

I’m using the following to embedd nice square thumbnails from my Flickr feed into my site.

<div id="flickr_badge_wrapper" class="group">
 <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?show_name=1&count=6&display=latest&size=s&layout=x&source=user&user=57701525%40N08"></script>
</div><!-- end flickr_badge-wrapper -->

Works just fine. Only the markup it generates (see below) contains a width=”75″ height=”75″. This is causing havoc because it’s a fluid layout and I don’t have a known height. I have figured out all the CSS… it works when I delete height from the img tag (tested in Firebug). Now I just need a way to get rid of that height attribute, after the Flickr feed has loaded.

<div id="flickr_badge_wrapper" class="group">
<script type="text/javascript" src="blah blah"></script>
  <div class="flickr_badge_image" id="flickr_badge_image1">
  <a href="http://www.flickr.com/photos/57701525@N08/5635787388/">
  <img src="http://farm6.static.flickr.com/5110/5635787388_ee1c039ba2_s.jpg" alt="A photo on Flickr" title=" " height="75" width="75"></a>
  </div>
</div>

Would love an idea with jQuery!

Answer 1

Assuming that they are all within <div class="flickr_badge_image">

$('div.flickr_badge_image img').removeAttr('width').removeAttr('height');

If you have control of the source though, it’d be much better to do this server side. Just in case JavaScript were turned off or to avoid any flash of content issues.