Skip to main content
G
Garyreg
Participant
November 6, 2018
Answered

Click on small image to enlarge in table above [for e-comm site]

  • November 6, 2018
  • 3 replies
  • 4113 views

Hi I am trying to create a simple table where a person clicks on one of the smaller images and the larger then appears in the table above. i have inserted a picture of wht i am tring to do Many thanks

This topic has been closed for replies.
Correct answer hans-g.

Hello osgood_,

prompted by "Is that ancient stuff ... " I had a look at my old fashioned first drafts. I found this page from 2012: DisjointTest

Have fun watching! And Garyreg, on the other hand maybe it could be for you.

Hans-Günter

3 replies

Jon Fritz
Community Expert
Jon FritzCommunity Expert
Community Expert
November 6, 2018

Yes, you can do this in DW without coding, though I have no idea if the code works well on mobile devices...

1. In the main Properties window, give each image a unique ID that makes sense to you (bigpic, smallone, smalltwo...)
2. Open the Behaviors window under Window > Behaviors

3. Click on one of the small images, then the + in the Behaviors window

4. Choose Swap Image

5. In the dialogue that comes up, select the id of your big image

6. Uncheck the box for "Restore images onMouseOut"
7. Hit OK
8. Click the onmouseover showing to the left of your new behavior in the Behaviors window

9. Change it to onClick from the dropdown menu

10. Repeat the same steps for the other small images (set the Swap Image to the large image's id, uncheck the box, set to onclick)

That should do it.

    O
    osgood_
    Legend
    November 6, 2018

    https://forums.adobe.com/people/Jon+Fritz+II  wrote

    Yes, you can do this in DW without coding, though I have no idea if the code works well on mobile devices...

    1. In the main Properties window, give each image a unique ID that makes sense to you (bigpic, smallone, smalltwo...)
    2. Open the Behaviors window under Window > Behaviors

    3. Click on one of the small images, then the + in the Behaviors window

    4. Choose Swap Image

    5. In the dialogue that comes up, select the id of your big image

    6. Uncheck the box for "Restore images onMouseOut"
    7. Hit OK
    8. Click the onmouseover showing to the left of your new behavior in the Behaviors window

    9. Change it to onClick from the dropdown menu

    10. Repeat the same steps for the other small images (set the Swap Image to the large image's id, uncheck the box, set to onclick)

    That should do it.

    Is that ancient stuff still included in DW?????..............hummm

    hans-g.
    hans-g.Correct answer
    Legend
    November 7, 2018

    Hello osgood_,

    prompted by "Is that ancient stuff ... " I had a look at my old fashioned first drafts. I found this page from 2012: DisjointTest

    Have fun watching! And Garyreg, on the other hand maybe it could be for you.

    Hans-Günter

    G
    GaryregAuthor
    Participant
    November 6, 2018

    Hi Thanks very much for your reply, is there a simpler way than coding? Thanks

    O
    osgood_
    Legend
    November 6, 2018

    Garyreg  wrote

    Hi Thanks very much for your reply, is there a simpler way than coding? Thanks

    No, that is the simplest it gets, using pure javascript and no frameworks.

    If you dont want to code then you might benefit from an alternative program like Wappler or maybe an extension for Dreamweaver such as something from PVII Project Seven - both paid for commercial product/s

    If you Google for either they will come up top.

    G
    GaryregAuthor
    Participant
    November 6, 2018

    Thanks very much for your help

    O
    osgood_
    Legend
    November 6, 2018

    Code example below:

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <title>Javascript Image Gallery</title>

    <style>

    body {

    margin: 0;

    }

    * {

    box-sizing: border-box;

    }

    img {

    max-width: 100%;

    height: auto;

    }

    .gallery_wrapper {

    width: 50%;

    margin: 0 auto;

    }

    .gallery {

    display: flex;

    justify-content: space-between;

    }

    figure {

    margin: 0;

    padding: 0;

    width: 32%;

    }

    .fadeIn {

    opacity: 0;

    -webkit-animation: fadeIn 1s ease both;

    animation: fadeIn 1s ease both;

    }

    @-webkit-keyframes fadeIn {

    from {opacity: 0}

    to {opacity: 1}

    }

    @keyframes fadeIn {

    from {opacity: 0}

    to {opacity: 1}

    }

    </style>

    </head>

    <body>

    <div class="gallery_wrapper">

    <div class="large_image">

    <img src="https://source.unsplash.com/1200x900/?nature,water" alt="">

    </div>

    <!-- end large_image -->

    <div class="gallery">

    <figure>

    <img src="https://source.unsplash.com/1200x900/?nature,water" class="gallery_image" alt="">

    </figure>

    <figure>

    <img src="https://source.unsplash.com/1200x900/?nature,trees" class="gallery_image" alt="">

    </figure>

    <figure>

    <img src="https://source.unsplash.com/1200x900/?nature,leaves" class="gallery_image" alt="">

    </figure>

    </div>

    <!-- end gallery -->

    </div>

    <!-- end gallery_wrapper -->

    <script>

    // create variables

    const gallery_image = document.querySelectorAll('.gallery_image');

    const large_image = document.querySelector('.large_image');

    // loop trough all gallery images and add an event listener

    for(var i = 0; i < gallery_image.length; i++) {

    gallery_image.addEventListener('click', getLargeImage);

    }

    //function which is called when image is clicked

    function getLargeImage(){

    const imgSrc = this.getAttribute('src');

    large_image.innerHTML = '<img class="fadeIn" src="'+ imgSrc + '">';

    }

    </script>

    </body>

    </html>

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices