Develop Reference

Changing default file name download with JS?

How would I go about changing the name of a clip that is going to be downloaded by the client on a website? Each video clip currently downloaded is a default name how do I go about customising it?
Below is the function for the download button.
// Function to generate the Download button
VideoPlayer.prototype.initDownload = function () {
var downloadBtn = $("button.download"),
downloadToolTipCls = "download_tooltip",
sources = {},
downloadToopTip,
sourcesLength = 0,
sourcesKeys;
// Add each source
if (typeof (firstSrc = this.$video.attr("src")) !== "undefined") {
sources[firstSrc] = this.$video.attr("type");
}
this.$video.find("source").each(function () {
var $this = $(this);
sources[$this.attr("src")] = $this.attr("type");
});
sourcesKeys = Object.keys(sources);
sourcesLength = sourcesKeys.length;
if (sourcesLength === 1) {
downloadBtn.wrap("<a href=\"" + sourcesKeys[0] + "\" download />");
} else if (sourcesLength > 1) {
downloadBtn.after("<span class=\"" + downloadToolTipCls + "\" />");
downloadToopTip = $("." + downloadToolTipCls);
$.each(sources, function (source, type) {
downloadToopTip.append("<a href=\"" + source + "\" download> Type " + type + "</a>");
});
downloadBtn.click(function () {
downloadToopTip.toggle();
});
}
};

Put the name that you want for your file in download attribute download=name

How to give an image a different id each time it gets uploaded

I'm currently testing out a piece of code by user OGiS0. It is a javascript code that uploads images. How would I make it so that every time an image gets uploaded, it gets a new ID so I can drag and drop it without interference.
window.onload = function(){
//Check File API support
if(window.File && window.FileList && window.FileReader)
{
var filesInput = document.getElementById("files");
filesInput.addEventListener("change", function(event){
var files = event.target.files; //FileList object
var output = document.getElementById("result");
for(var i = 0; i< files.length; i++)
{
var file = files[i];
//Only pics
if(!file.type.match('image'))
continue;
var picReader = new FileReader();
picReader.addEventListener("load",function(event){
var picFile = event.target;
var div = document.createElement("div");
div.innerHTML = "<img id='thumbnail' draggable='true' ondragstart='drag(event)' src='" + picFile.result + "'" +
"title='" + picFile.name + "'/>";
output.insertBefore(div,null);
});
//Read the image
picReader.readAsDataURL(file);
}
});
}
else
{
console.log("Your browser does not support File API");
}
}
Fiddle to show how it works: http://jsfiddle.net/Yvgc2/1563/
Currently, all the images have the same id when uploaded so drag and drop cannot occur.

Quick and dirty: use a global variable (window.thumbId).
The reason why you shouldn't use the i variable is, that it will restart each time you upload picture(s).
window.thumbId will work regardless how many times and how many images you upload. You'll get ids like thumbnail1, thumbnail2, etc:
window.thumbId = (window.thumbId || 0)+1;
div.innerHTML = "<img id='thumbnail"+window.thumbId+"' draggable='true' ondragstart='drag(event)' src='" + picFile.result + "'" +
"title='" + picFile.name + "'/>";

If the files get stored in a DB, you can use the db index as a unique id, get last index and +1 on each new item.
If not you can use the loops index and replace this line
div.innerHTML = "<img id='"+i+"' draggable='true' ondragstart='drag(event)' src='" + picFile.result + "'" +
"title='" + picFile.name + "'/>";

Problems with Ajax on xampp

Hi i have a problem i was using usbwebserver for my localhost but i had to switch to xampp because of php 5.5. But now is one of my functions misbehaving. It shows only 2/6 pictures from directory and i don't know why. It's function that will add an image to my body when clicked on that image. No errors on page found.
var pom = document.getElementById("ImageAdd");
pom.style.visibility = "visible";
var dir = "uploads";
var fileextension = [".png", ".jpeg", ".jpg", ".gif"];
$.ajax({
url: dir,
success: function(data) {
for (var i = 0; i < fileextension.length; i++) {
$(data).find("a:contains(" + fileextension[i] + ")").each(function() {
var filename = this.href.replace(window.location.host, "").replace("http://", "");
$("#ImageAdd").append("<img src=\"" + dir + filename + "\" onclick=\"addimg('" + dir + filename + "')\">");
});
}
}
});

Show gallery images from folder into webpage using JavaScript

I am trying to load a gallery of images from a folder. I'm using JavaScript/jQuery. Here is the code.
$(document).ready(function(){
var dir = "images/"; // folder location
var fileextension = ".jpg"; // image format
var i = "1";
$(function imageloop(){
$("<img />").attr('src', dir + i + fileextension ).appendTo(".images");
if (i==13) {
alert('loaded');
} else {
i++;
imageloop();
};
});
});
But it shows nothing.
Please tell me what's wrong.
Thanks.

Add the following to the <head>:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
I rewrote the code since there were no specifics on the file locations try using a while orfor loop.
Snippet
$(document).ready(function() {
$('#btn').click(function(e) {
var dir = "http://loremflickr.com/200/150?random=";
var i = 0;
e.preventDefault();
while (i < 14) {
$("#images").append('<img src="' + dir + i + '" />');
i++;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id="images"></div>
<button id="btn">LOOP
</button>

How to implement an onclick function to an array of divs

I'm using the Flickr API and I want to create a onlick popup div for each image which shows the image in a larger form like this http://fancybox.net/.
How can I implement this so that the onclick function will be applied to each div in the div container?
The project: http://jsfiddle.net/phippsy20/rtzp8/
jQuery: so this statement makes the divs
for (var i = 0; i < 210; i++) {
$('<div />').attr('id', 'photo-' + i).addClass('photo').appendTo('#photo-container');
}
This function loads the picture from flickr as the background image:
$.each(data.photos.photo, function(i, photo) {
var imgURL = 'http://farm' + photo.farm + '.staticflickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret + '_n.jpg';
console.log(imgURL);
// Pre-cache image
$('<img />').attr({'src': imgURL, 'data-image-num': i}).load(function() {
console.log('image loaded');
var imageDataNum = $(this).attr('data-image-num');
$('#photo-' + imageDataNum).css('background-image', 'url(' + imgURL + ')').removeClass('fade-out').addClass('fade-in');
})

Ok, if i understand your question, this may help you:
$("#heading-name div").each(function(i){
$(this).attr("onclick","popup("+i+")");
});
Demo working: http://jsfiddle.net/k2h8p/1/ (test the code locally in your computer)