swap out the main picture for a new one once the thumbnail is selected (gallery feature)

Question

swap out the main picture for a new one once the thumbnail is selected (gallery feature)

Hey everyone! I recently decided to create a personal portfolio website to showcase my new passion for photography.

Everything is set up at the moment and you can check it out here.

However, I've been struggling to get the image replacement to work in CSS. Despite my best efforts, I couldn't figure it out and ended up failing miserably. So, I'm thinking of using jQuery instead.

This is where I need your expertise. I have zero knowledge of jQuery and I require assistance in making the large image change to the thumbnail that is clicked, almost like a button. Do you think this is possible? Your help would be greatly appreciated. Thank you!

jquery html css

Answer 1

Answer №1

If you're looking to enhance your webpage with a dynamic image gallery, consider incorporating some jQuery code like the example below:

$(document).ready(function(){
    $('.gallery img').click(function() {
        var img = $(this).attr('src');
        $('.content img').attr('src', img);
    });
});

Remember to include the jQuery core library in the <head> section of your HTML document:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

For a visually appealing effect, you can also change the cursor style for the thumbnails to indicate they are clickable. This can be achieved using CSS or with the help of jQuery:

$(document).ready(function(){
    $('.gallery img').click(function() {
        var img = $(this).attr('src');
        $('.content img').attr('src', img);
    }).each(function() {
        $(this).css('cursor', 'pointer');
    });
});

Check out the demos here to see these features in action.

Answer 2

If you're looking to enhance your webpage with a dynamic image gallery, consider incorporating some jQuery code like the example below:

$(document).ready(function(){
    $('.gallery img').click(function() {
        var img = $(this).attr('src');
        $('.content img').attr('src', img);
    });
});

Remember to include the jQuery core library in the <head> section of your HTML document:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

For a visually appealing effect, you can also change the cursor style for the thumbnails to indicate they are clickable. This can be achieved using CSS or with the help of jQuery:

$(document).ready(function(){
    $('.gallery img').click(function() {
        var img = $(this).attr('src');
        $('.content img').attr('src', img);
    }).each(function() {
        $(this).css('cursor', 'pointer');
    });
});

Check out the demos here to see these features in action.

Answer 3

Answer №2

Absolutely, utilizing Javascript/jQuery is essential for achieving your desired outcome.

Don't forget to insert the jQuery script on your webpage within the <head> section.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>

This straightforward function will cater to your requirements...

$(document).ready(function() {
$('.img img').hover(function() {
    $img = $(this)
    $('.content img').attr('src',$img.attr('src'))
});
});

Expanding your knowledge of Javascript/jQuery will undoubtedly prove beneficial as it's an impressive technology and a valuable skill.

Explore more jQuery tutorials here.

Answer 4

Absolutely, utilizing Javascript/jQuery is essential for achieving your desired outcome.

Don't forget to insert the jQuery script on your webpage within the <head> section.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>

This straightforward function will cater to your requirements...

$(document).ready(function() {
$('.img img').hover(function() {
    $img = $(this)
    $('.content img').attr('src',$img.attr('src'))
});
});

Expanding your knowledge of Javascript/jQuery will undoubtedly prove beneficial as it's an impressive technology and a valuable skill.

Explore more jQuery tutorials here.

Answer 5

Answer №3

Instead of relying on JQuery or any JavaScript, consider using pure CSS2 to achieve the desired effect. Take a look at this NOT SUITABLE FOR WORK site:

When you hover over the thumbnails on that site, you'll notice a simple and effective transition without the need for JavaScript. As someone who prefers minimal JS, I believe in keeping things as light as possible.

-- pete

I advocate for minimal use of JS, especially when it comes to basic links that can be easily implemented without unnecessary scripting!

Answer 6

Instead of relying on JQuery or any JavaScript, consider using pure CSS2 to achieve the desired effect. Take a look at this NOT SUITABLE FOR WORK site:

When you hover over the thumbnails on that site, you'll notice a simple and effective transition without the need for JavaScript. As someone who prefers minimal JS, I believe in keeping things as light as possible.

-- pete

I advocate for minimal use of JS, especially when it comes to basic links that can be easily implemented without unnecessary scripting!

Answer 7

Answer №4

Is there a conflict-free version of this code for Joomla 1.5.1? I have a thumbnail linking to a main image that works in Dreamweaver with jQuery 1.2.3, but it's not functioning when uploaded to Joomla with jQuery 1.5.1.

<script type="text/javascript>
jQuery(document).ready(function(){
    jQuery(".tmbimage a").click(function(){
        var largePath = jQuery(this).attr("href");
        var largeAlt = jQuery(this).attr("title");
        jQuery("#mainimg").attr({ src: largePath, alt: largeAlt });
    }); 
});
</script>

Answer 8

Is there a conflict-free version of this code for Joomla 1.5.1? I have a thumbnail linking to a main image that works in Dreamweaver with jQuery 1.2.3, but it's not functioning when uploaded to Joomla with jQuery 1.5.1.

<script type="text/javascript>
jQuery(document).ready(function(){
    jQuery(".tmbimage a").click(function(){
        var largePath = jQuery(this).attr("href");
        var largeAlt = jQuery(this).attr("title");
        jQuery("#mainimg").attr({ src: largePath, alt: largeAlt });
    }); 
});
</script>

swap out the main picture for a new one once the thumbnail is selected (gallery feature)

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Utilizing Bootstrap 3: Mastering the Implementation of .col Classes with .form-control Classes

How can I simplify the CSS properties for this border?

Avoid having any spaces between HTML tags when being displayed from a single <?php?> in PHP

"Interact with jQuery by sliding side to side or in a circular motion

How can I keep the size of a Bootstrap button consistent while wrapping text inside it?

The Gravity Simulation Seems to Be Malfunctioning

Deleting a Session Cookie: Steps to Remove It

What is the best way to assign multiple default values to an HTML select element by utilizing the data stored in a PHP array?

What is the best way to create a code block with a specific width in mind?

"Exploring the Possibilities: Foundation 4 Reveal and WP AJAX for Creating Previous/Next Modal Windows within an Open Modal

Displaying a View with a content-type of "application/json" results in the presentation of a plain HTML format on the screen

Ways to stop VoiceOver from selecting the background content when a modal is open

Extract information from a JSON document and showcase photographs in a visual collection

Is there a way to simplify and optimize the code further?

Uploading information from a confirmation page to the controller

"Unable to get 'vertical-align middle' to function properly in a table

Dealing with interruptions in the sequence of results from a database request

`Modified regions determined by cursor location`

A "Uncaught TypeError" error occurs when trying to execute a function using the dollar sign

What is the method for causing a patch event using inline HTMX tags when a carousel-item in a Bootstrap 5 carousel is activated?