jQuery filename manipulation

Question

Hi all,

I am trying to do a fancy blur/fade effect (which means i need 2 images) but I only want to load 1 in the HTML (in case js is not active) and add the other filename via jQuery (copying and renaming the file/src)

The pure html is along the lines of:

<div id="work">
 <div>
  <img src="css/images/abc1.jpg" width="360" height="227" alt="" />
 </div>
 <div>
  <img src="css/images/xyz1.jpg" width="360" height="227" alt="" />
 </div>
</div>

But the html after jquery has manipulated the DOM needs to be like:

<div id="work">
 <div>
  <img src="css/images/abc0.jpg" width="360" height="227" alt="" />
  <img src="css/images/abc1.jpg" width="360" height="227" alt="" />
 </div>
 <div>
  <img src="css/images/xyz0.jpg" width="360" height="227" alt="" />
  <img src="css/images/xyz1.jpg" width="360" height="227" alt="" />
 </div>
</div>

The question is, what is the jQuery to clone/copy the relative images and then rename the src?

Any help would be much appreicated.

A.

Answer 1

The only problem I can see of doing it the way you would like is that you could run into blocking issues when trying to have the JS loading the files in as it clones the code. Your JS will wait for each file to download as you iterate through the collection.

A cleaner way might be for you to simply hide the second file in each blur section using CSS. this way the assets can be parallelized and still will work without JS.