Urgent! downloading images in browser using javascript code and redesign issue

Amy Goffman

New Member
Joined
Nov 14, 2016
Messages
2
Reaction score
1
At this point, I'm just looking to get the first two filetypes working. I am creating an extension for Firefox by using the javascript. When I am taking the cursor to the thumbnail. I am setting the click to a zoomed-in version of the image, which could be or not placed on the same page. This extension will search for full image URL and image will be downloaded using a single keypress (this key could be anyone, let assume it is A). Right now, I am working with gif, jpg and png format. In future, I will extend the extension to SWF or videos.But for now, I have to focus on the current formats (png and jpg).

Code snippet:
Code:
function ExtendedDownload(ipic) {
    var variable1 = document.createElement('a');
    document.body.appendChild(variable1);
    variable1.download = ipic.split('/').pop().split('?')[0];
    variable1.href = ipic;
    variable1.click();
}

Ipic is the URL and variable1.download are the image, the program is retrieving.
In the start, it was waiting for the keypress, and trying to figure the valid hovering from the cursor. I am able to figure out this thing on my own, but I am facing issues with hovering. I am able to know about the function ^^, it will download the file as required in chrome. But, if I use Firefox, the job will simply show the image. I don't want this, it is like copy-pasting and zooming.

I have tried one solution, I was trying to convert the image from the current to the base64 format using JS and they trying to download the image. This is perfectly working in terms of theory. Doing so, this is resulting in base64 string formats. And for a small file, the size in 2 to 3MB and browser does not respond, while doing this. On the internet, all the solutions are converging to downloading a new image.

Right now, I am trying to create a new website design. The current website was created in 2012 and need serious restructuring. I was working with static designs and doesn't include any responsive scripts. But it does require to do those simple things for complex design restructuring. Right now, I am doing it for information pages of the website. Currently, the pages only contain map, images, article, Ad, ratings and comments. The new addition of video, google maps inside the article and removal of some images is required. As an example, I am working on this page: http://militarybases.co/r/an-in-depth-review-of-navy-swcc-fitness-training/. You can see the blurring of the Ads at the top and menu bar does not look good too. Clearly, the previous designer only has used linear layout without any concern for future extension to the design and just paste everything in a single div (with vertical layout settings). Not to mention, see the blank space after the maps and around the div body. I need help with javascript and WordPress so that this issue will solve with greater ease without disturbing the load time of the webpage.
 
Back
Top