Show/hide trigger by on_click

Question

This is a little bit different than another question I just had answered. i want <a href="#"><img style="float:right;" src="/explore_btn.png"></a> to trigger the large image to load in the <div id="show_area">. So if achor has id="list" then load that image in show_area when explore_btn.png is clicked for that container. there will be 12 different containers with thumbnails. How can I do this correctly

<script>
$('#list img').on('click',function(){
    var old_img = this.src;
    var new_img =old_img.split('-150x150').join('')
    $('#show_area').html('<img src="'+new_img+'" />');
});
</script>

    <div id="show_area"> large image here </div>

        <div class="container1">
            <a id="list" href="#">
            <img style="float:left;" src="/escher_full-150x150.png" width="150" height="150" />
            </a>
        <div class="search_desc">
        <strong>Escher</strong><br><br>
<!-- clicking explore_btn will load escher_full.png in the show_area div -->
        <a href="#"><img style="float:right;" src="/explore_btn.png"></a>
        </div>
        </div>

        <div class="container2">
            <a id="list" href="#">
            <img style="float:left;" src="/footer_full-150x150.png" width="150" height="150" />
            </a>
        <div class="search_desc">
        <strong>footer</strong><br><br>
        <a href="#"><img style="float:right;" src="/explore_btn.png"></a>
        </div>
        </div>

Elements id's must be unique. Change your anchors to use a class instead. — Jason P, Aug 28 '13 at 19:00

score 2 · Accepted Answer · edited May 23 '17 at 12:05

2

Change all id="list" to class="list" (because ID's must be unique) and then use this:

$('.list img').on('click',function(){

You can read this about ID attribute. You could actually change all the <a> elements with <div> instead... or why do you want to have <a> ?

So your code should look like:

<script>
$(document).ready(function () {
    $('.list img').on('click', function () {
        var old_img = this.src;
        var new_img = old_img.split('-150x150').join('')
        $('#show_area').html('<img src="' + new_img + '" />');
    });
    $('.search_desc img').on('click', function () {
        var origin = $(this).parents('div.search_desc').parent().find('img:first')[0];
        var old_img = origin.src;
        var new_img = old_img.split('-150x150').join('')
        $('#show_area').html('<img src="' + new_img + '" />');
    });
});
</script>

I wrapped your code in a ready function so it's loaded after the page finished loading.

FIDDLE for testing

edited May 23 '17 at 12:05

Community

1
1

answered Aug 28 '13 at 19:02

Sergio

28,539
11
85
132

I'll change the `` to `div`. so if I clicked on explore_btn.png it will trigger the image `` to load in the `
`?
– acctman Aug 28 '13 at 19:14
@acctman, missed that part with the img src, can you explain the relation between them again? img on search_desc should open img src on div .containerx but on #show_area. Is that correct? – Sergio Aug 28 '13 at 19:18
this is the layout
display large img
and then a thumbnail with a explore_btn image. So if the user click the thumbnail "or" the explore_btn image it should load the full size image of the thumbnail into show_area div. So the user would have two ways to get the large image to display. click the thumbnail or explore_btn – acctman Aug 28 '13 at 19:26
correct it should still remove -150x150 so that the larger image loads – acctman Aug 28 '13 at 19:30
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/36416/discussion-between-acctman-and-sergio) – acctman Aug 28 '13 at 20:04
slight problem, when applied to my page, nothing happens when I click the links – acctman Aug 28 '13 at 20:05

Show/hide trigger by on_click

1 Answers1