Collection of clickable images that lead to creatively designed individual pages

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.

Answer №1

Instead of passing the src attribute value to a page as a querystring with jQuery, why not consider a different approach?

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

Upon reaching preview.html, you can retrieve the src parameter using a javascript function like the one suggested here.

For example:

var src = getParameterByName('src');

Of course, utilizing server-side scripting would make the process even simpler.

Answer №2

It seems like bringing the picture ID to the next page is necessary.

However, instead of redirecting to a new page, you may consider fetching the image using an Ajax request or following a specific naming convention based on the ID for styling purposes.

By loading a modal dialog or similar element, you can maintain your site's style more efficiently when displaying photos.

Various modal dialog plugins exist for handling images, such as the Zurb Reveal plugin:

Additionally, there are numerous jQuery plugins tailored for photos that offer features like navigation, descriptions, and keyboard controls.

While opening images on a separate page is an option, utilizing a plugin can streamline the process and enhance functionality without reinventing the wheel.

Take, for example, the Galleria plugin I found during a quick search: . However, there are countless similar tools available.

Answer №3

To utilize the image as a GET parameter, follow this format:

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

Next, in your template.html file, create a layout for your image and

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

enclose code within square brackets

I have a shortcode function that currently works with or without square brackets. However, I would like it to only work with square brackets. shortcode (Current) itemText num="1" title="This is a title" shortcode (Desired) [itemText n ...

How can you use JavaScript to identify resize or zoom changes across all ancestor DOM elements?

I have a DOM element that consists of a chart. <div id="plot1" class='plot-chart'></div> This specific DIV can be nested within various other DIVs. <div id="one" style="width:100%;height:100%;zoom:0.9;"> <div id="two"& ...

JavaScript integration is a key aspect of working with Rails 3.1, especially when utilizing JQuery

I've been searching for a clear answer to this issue and I know I'm not the only one stressing about it. Current best practices suggest placing javascripts at the bottom of the page. However, any blocks that use proper $(function() {...}); will ...

JavaScript mouse and touch movement events (mousemove, pointermove, touchmove) are not always accurate

I'm currently working on developing a JavaScript whiteboard and have implemented the following code: let lastTimestamp = 0; const fps = 1000/60; document.addEventListener("pointermove", moveMouse, false); function moveMouse (e) { e.preve ...

How can I showcase data retrieved from a function using Ajax Datatable?

I have implemented an Ajax function that retrieves data from a PHP file and displays it in a DataTable. Initially, this setup was working fine. However, when I added a new function to the PHP file, my Ajax function stopped retrieving data from the file. I ...

React Native displaying identical path

Is there a way to dynamically change routes in React Native when a button is pressed? Inside my SplashContainer component, I have the following method: handleToSignUp = () => { console.log("Running handleToSignUp") this.props.navigator.push({ ...

Attempting to send an AJAX request using jQuery, receiving a successful response but encountering an error with the AJAX functionality

My AJAX request in jQuery is as follows: $.ajax({ url: "http://someurl.stuff.com", beforeSend: function(xhr) { xhr.setRequestHeader("Accept", "application/json"); xhr.setRequestHeader("Host",null); xhr.setRequestHeader("Access ...

"Utilizing Jquery for interactive menu functionality - delivering the requested JSON

I have successfully implemented a dynamic menu using jQuery that parses a JSON response file to create the menu. However, instead of having the menu items link to URLs, I want them to retrieve and parse JSON data from those URLs. Despite my efforts, the me ...

What is the best way to remove this .click function?

My goal is to create a switch function where clicking the "on" button changes its CSS, and if the user then clicks on the "off" button, the CSS returns to normal. I also need the switch to default to the "on" position, but my attempts so far have been unsu ...

Positioning Google Chart in HTML

I'm attempting to arrange three distinct Google pie charts in a horizontal layout. At present, I have applied inline CSS for formatting purposes. Oddly enough, the third chart always ends up on a separate line. Could anyone kindly point out my error? ...

Unable to access variable using GET method, however able to retrieve it using var_dump($_GET)

I am attempting to create a simple AJAX call that passes a variable and displays it in a modal. The passing of the variable is successful, however, I am unable to retrieve the variable from the GET method. When using echo var_dump($_GET);, I get: array(2 ...

The functionality of the date picker is hindered when a dropdown with multiple selections is activated, and conversely, the multi-selection feature of

I am working on an application where I need to implement a drop-down with multi-selection functionality, as well as a date picker for text boxes. For the drop-down with multi-selection feature, I referred to the code in the following link: . Additionally, ...

Choosing a random JSON object using jQuery

My jQuery script is designed to display the content from a JSON file when the page loads... $.getJSON('b.json', function(data) { $('#dictionary').empty().hide(); $.each(data, function(entryIndex, entry) { var html ...

The ActionController is encountering an UnknownFormat error when trying to respond to AJAX requests with js using

I've been scouring the internet for information on this topic, but I'm having trouble understanding how AJAX works with Rails. I've gone through the documentation multiple times and it's just not clicking for me. From what I gather, AJ ...

Customizing product prices with unique icons

I have successfully integrated a 'Latest Products' row on the Homepage of my WooCommerce enabled WordPress Website. Now, I am looking to enhance it by adding an icon on each side of the price entry. Although I know how to manually insert <i c ...

Floating multiple block-level elements within an <li> tag in HTML allows for greater control over the layout and

I am facing a complex issue that requires attention. Let me explain the situation: There is an unordered list consisting of list items displayed vertically with alternating background colors, all having the same width within a fixed-width div. Some list i ...

Seamless transition between various divs with a fluid blending effect

I am currently working on a list with four links that switch between different divs, and it is functioning well. However, I would like to enhance the user experience by adding a smooth blend effect when transitioning between the divs. At the moment, the an ...

Discover the significance of a data attribute's value for effective comparisons

I have a loop that generates random numbers and positions to create 4 answer choices for users. Now, I am trying to determine the value of the clicked button and compare it to the position of the correct answer. However, whenever I try to do this, it retu ...

React.js is throwing a 429 error message indicating "Too Many Requests" when attempting to send 2 requests with axios

Currently, I am in the process of learning React with a project focused on creating a motorcycle specifications search web application. In my code file /api/index.js, I have implemented two axios requests and encountered an error stating '429 (Too Ma ...

Does width change based on position?

When I set position:absolute for an element, its width remains constant regardless of the text inside. However, if I set position:relative for the same element, the width will adjust based on the text content. I have created a fiddle with two menus, each ...