CODEWITHSUNDEEP
jqueryhtml
tleo
tleo

Reputation: 361

Replace image, video sizes in HTML with JQuery

I have many videos and photos with size of width: 600px but different heights in a WordPress blog. How can I replace them using JQuery to scale? The videos are in

Here's an example of the code:

<img height="100" width="600" alt="image title" src="image link">
<embed width="600" ...>
<iframe width="600" ...>

Thanks,

Upvotes: 2

Views: 1156

Answers (3)

user657496
user657496

Reputation: 

$('img, embed, iframe').attr('width',newWidth);
  • edit after your comment

Ofcourse there is:

$('img, embed, iframe').each(function() {
    if($(this).width() > 520) {
        $(this).attr('width','520');
        $(this).attr('height','auto');
    }
});

The selector $('img, embed, iframe') selects all the elements matching to our criteria. They have to be either an img, an embed, or an iframe. .each(function(){...}); means that for all of these matches, we're going to do the code located within the brackets. What we do there, is check if the current object $(this) has a width greater than 520px (the function returns only 520, without px). If so, the code between the brackets is executed. We just change the attribute width from whatever it is (greater than 520px obviously) to 520px. That's it, basic jQuery. Good luck with your project!

Upvotes: 1

Christophe
Christophe

Reputation: 4828

here is a good jquery plugin that will make your job easier -> http://plugins.jquery.com/project/imgscale

Upvotes: 0

Sylvain
Sylvain

Reputation: 3873

Shouldn't you rather use CSS ?

$('img, embed, iframe').css('width',newWidth);

Upvotes: 0

Related Questions