Page of images that when clicked go to new styled page

Question

I'm new to JavaScript and jQuery, I know HTML & CSS rather well.

I have a page of 20 minimised pictures (soon to be 500+ images) that when clicked are opened into a new page.

I am having no issues there. What I would like is when a picture is clicked it is opened in an already styled page and the selected picture is placed in the center of that page (or where ever I would like it placed).

I know I must need to carry the picture id to the new page, but I am completely lost as to what code to use. Here is what I am using right now to get to the new page.

<img src="img/1.jpg" class="thumbnail" id="preview">

and to get this image to open in a new window I am using

<script>
$(document).ready(function() {
    $('img.thumbnail').click(function() {
        window.location.href = this.id + '.html';
    });
});
</script>

This code opens the image in another window but it is not styled, I would like to have it styled and have any image that is selected placed where I select it to be.

I don't want to create 500+ pages for each image and I know I have seen it done, I just don't know how to do it.

Thank you for any assistance that can be offered.

do you created page for every image, or you are using something to make it dynamic? — Pepo_rasta, Jul 31 '15 at 09:00

score 1 · Accepted Answer · edited May 23 '17 at 12:14

1

Why not pass the value of src attribute to page as a querystring with jQuery?

window.location.href = 'preview.html?src='+$(this).attr('src');

Then in preview.html, fetch the src parameter with javascript using the function provided here.

Example:

var src = getParameterByName('src');

It would be a lot more simple if you're able to use server-side scripting though.

edited May 23 '17 at 12:14

Community

1
1

answered Jul 31 '15 at 09:03

rasso

2,131
3
21
24

score 1 · Answer 2 · answered Jul 31 '15 at 09:08

I know I must need to carry the picture id to the new page

Probably not, if you want to display a styled image I'd expect you to want to either request the image via an Ajax request, or perhaps by using a known naming convention if you wanted to use your id based approach.

The reason I say, not a new page, is that it's going to be easier to maintain your site styling if you say, load a modal dialog or something along those lines to display your photos.

There are many modal dialog plugins which will handle images such as the zurb reveal plugin:

http://foundation.zurb.com/docs/components/reveal.html

There are also a whole range of photo specific jquery plugins which will give you added funtionality like previous / next, descriptions, and keyboard navigation.

Whilst you could use the approach you describe and open them in a separate page, I would suggest investigating using a plugin to avoid needing to re-invent the wheel.

I did a quick google, and this one looked interesting: http://galleria.io/ but there are hundred of similar tools out there.

score -1 · Answer 3 · answered Jul 31 '15 at 08:58

-1

use the image as GET param like this:

$('img.thumbnail').click(function() {
    window.location.href = 'template.html?image='+ encodeURIComponent( $(this).attr("src"));
});

then inside your template.html prepare a layout for your image and

<img src="<? echo urldecode($_GET['image']); ?>" />

answered Jul 31 '15 at 08:58

Vanojx1

5,574
2
23
37

dont think, hes using or want to use PHP – Pepo_rasta Jul 31 '15 at 09:03
1

if he cant use php then the solution from Ozgun Bar can be good – Vanojx1 Jul 31 '15 at 09:08
yup, there is no PHP tag in the question, prepare to get downvoted – Mark Jul 31 '15 at 09:08
anyway a php solution can be easier... but np – Vanojx1 Jul 31 '15 at 09:10
how does he do PHP anyway in `template.html`? – Mark Jul 31 '15 at 09:10
1

change template.html to template.php or if you wanna be more tricky use htaccess file with AddType application/x-httpd-php .htm .html :) – Vanojx1 Jul 31 '15 at 09:15

Page of images that when clicked go to new styled page

3 Answers3