Being relatively new to JavaScript and jQuery, my knowledge is solid when it comes to HTML & CSS. Currently, I have a page with 20 minimized pictures (with plans to increase to 500+ images) that open into a new page when clicked.
Although I have no issues with the functionality of clicking the pictures to open in a new window, I want to customize this process. Specifically, I would like the selected picture to open in an already styled page, positioned at the center or any other designated location on the page.
I understand that I may need to transfer the picture id to the new page, but I'm unsure about the specific code to achieve this. The current code I am using to navigate to the new page is as follows:
<img src="img/1.jpg" class="thumbnail" id="preview">
To open the image in a new window, I have implemented the following script:
<script>
$(document).ready(function() {
$('img.thumbnail').click(function() {
window.location.href = this.id + '.html';
});
});
</script>
Although this code successfully opens the image in another window, it lacks styling. My goal is for the image to be styled and placed wherever desired when selected. With over 500 images planned, creating individual pages for each one is not practical. I know this can be achieved, however, I require guidance on how to proceed.
I appreciate any assistance that can be provided. Thank you.