I am trying to make a simple photo gallery. I know it's probably easier to find a free one but I'm not learning anything by doing that. My setup is plain and pretty simple. I've attached a screenshot of my page which is loaded with images (they will eventually be resized smaller once everything is working). I simply wish to click on any image and then open that image to a larger size on a new page. THIS ELUDES ME!!! Below is the Javascript that creates the page of images.
The below function runs at "onload" of the page.
Thanks for your help,
The below function runs at "onload" of the page.
Code:
<script>
function getImages(dirLocation) {
var dir = dirLocation;
var fileextension = "jpg";
$.ajax({
//This will retrieve the contents of the folder if the folder is configured as 'browsable'
url: dir,
success: function(data) {
//This empty() statement clears the canvas so a new directory can be reloaded
$("#container1").empty();
//List all png file names in the page
$(data).find("a:contains(" + fileextension + ")").each(function() {
var pathName = this.href;
var strLen = pathName.lastIndexOf('/');
var fileName = pathName.substring(pathName.lastIndexOf('/') + 1);
var newFileName = pathName.slice(0, strLen, pathName) + "/" + dir + fileName;
var div = "<div id='images' class='images'>" +
"<a href=''><img src=" + newFileName + " width='450' height='auto' onclick='showImage()>" +
"<div class='caption'></div></a></div>"
$("#container1").append($(div));
});
}
});
}
//
//
//
function showImage() {
var largeImage = document.getElementById('images');
largeImage.style.display = 'block';
largeImage.style.width=1000+"px";
largeImage.style.height="auto";
var url=largeImage.getAttribute('src');
window.open(url,'Image','width=largeImage.stylewidth,height=largeImage.style.height,resizable=1');
}
</script>