Question

I have a jQuery function that replaces thumbnails with the main image.
This is the code that I use for replacing the main image:

$(document).ready(function(){
    $(".wheelFinishThumbs a").click(function() {
    var mainImage = $(this).attr("href");
    var mainTemp = mainImage.replace(/-mid/,'');
    var mainTemp = mainTemp.replace(/png/,'jpg');
    $("#main_view img").attr('src', mainImage );
    $("#main_view a").attr('href',mainTemp);
    return false;       
    });

I use a PHP function to download (save) images by changing their header values. This is the HTML code that I use to download images

<a href="#" onclick="window.open('download.php?file=image.jpg','_self', 'download', 'status=0');">Click to download</a> 

but since “image.jpg” has to be my dynamic variable some how I’ve got to call this argument in the jQuery image replacement function and replace “image.jpg” dynamically each time I change the main image. I want to replace image.jpg with var mainImage from my image swapping function.

My jQuery knowledge is really limited, so If somebody can help me to do it, would be great.

Answer 1

This should work, assuming you are using jQuery 1.7+

Assuming your a tag markup is like this after you dynamically set the href to new image

<a href="urltoSomeImage.jpg" id="main_view">Download Image</a>

JavasScript

$(function(){
  $(document).on("click","#main_view",function(e){
      e.preventDefault();
      var self=$(this);
      alert("replace this with awesome code")

      window.open('download.php?file='+self.attr("href")+,'_self', 'download', 'status=0');
  });
});

Note that this function will work only of a single a element because we are targeting binding the functionality to the element with id main_view. Since ID’s should be unique in the DOM, If you want to have the functionality to many a tags, i would add a common class selector to the a tag like this

<a class="aDownloadble" href="urltoSomeImage2.jpg" id="main_view">Download Image2</a>
<a class="aDownloadble" href="urltoSomeImage4.jpg" id="main_view">Download Image4</a>

And Update my script like this

$(function(){
  $(document).on("click",".aDownloadble",function(e){
      e.preventDefault();
      var self=$(this);
      alert("replace this with awesome code")

      window.open('download.php?file='+self.attr("href"),'_self', 'download', 'status=0');
  });
});

jQuery on is nnot necessary. you can simply use the click event binding directly. But if you are loading the markup of those links via ajax / injecting to the DOM dynamically, you should use on or live.