Need help with image swap on click

Design help Animations & Interactions
1

hi all

im not sure what its called but i want the small picture to be moved where the bigger picture is when you click on it I’m using lightbox atm

maybe i should be using a action

heres my link

website

2

I’m guessing you would need both images in the light box.

That way… you could flip back and forth between the 2 images.

3

but i dont want the light box to be fullscreen

4

oic.

I would use JQuery depending on the number of images you have…

with that… you could just replace the image source.

but without JQuery… you could create a div for each “large front image” and “large back image”.

Clicking on a thumb image would hide the current “large image” and show the selected “large image”.

So for example… say you have 2 images… front and back.

You make the large front image visible… back large image hidden.

Show 2 thumbs… one of the front - the other of the back.

If you click on the back thumb… it would hide the Large front image and show the Large back image.

If you click on the front thumb… it would hide the Large back image and show the Large front image.

5

im not that big on JQuery could you help with steps ? or any other ideas

6

You need help with JQuery ? or the multi-div method…

7

anything that will get it working

8

You can try creating an image swap on the larger image, and then apply an interaction to the smaller image to get the image swap to occur.

So, create a div for the larger images, and place both images inside of it. Then use the Interactions panel to swap out the images when the smaller image is clicked.

There is a description here of the interaction part of the process: How to Make a Custom Lightbox with Webflow Interactions (It looks like the page is incomplete, but it might be a good place to start.)

(I’ve never done this myself, or I would give you more specific advice. I’m still waiting for up-to-date tutorials on interactions.)

Good luck! :grinning:

1 Like
9

yes. This is what I mean with the multi-div route.

10

Try this. It uses the div / interaction method.

https://preview.webflow.com/preview/change-image-click-interaction?preview=1745b0113395cddbc9c608b54b5a46d4

@PixelGeek - @cyberdave Not sure why I can’t make the site Public.

11

Hi @Revolution, what message do you receive, when trying to make the site public? Has the page been published?

12

Hi @Adam_Wright, if @Revolution solution does not work for you, could you please share your read-only link when posting for design help, it will help: Share a read-only link | Webflow University

13

Hi @Adam_Wright, do you want something like this?

http://squarerooms.webflow.io/catalogue-single

14

I can’t seem to find the option. Perhaps I’m just not seeing it.

15

@Adam_Wright …
@samliew 'smethod is a little easier to maintain to build / cleaner.

I think he’s using the webflow slider.

His method… like the one I showed above requires that you preload the images.

Using the JQuery method is smallest / easiest to update.
I haven’t had time to do a demo though.
I have a project due tomorrow that uses the JQuery method… will see if I can snip some code out.

16

Hi Sam yes the is bang on what im after, what this easy todo?

17

You can see how it is done in the designer: https://webflow.com/website/Squarerooms

Here is the code in the Page Settings > Footer Code:

<script>
Webflow.push(function() {
  var artSlider = $('#article-slider');
  var artThumbs = $('#slider-thumbs');
  if(artSlider.length > 0) {
    setInterval(function() {
      var index = artSlider.find('.w-active').index();
      var slide = artSlider.find('.w-slide').eq(index);
      artThumbs.children().eq(index).addClass('active').siblings().removeClass('active');
    }, 300);
    artThumbs.on('click', 'div', function() {
      var index = $(this).index();
      artSlider.find('.w-slider-dot').eq(index).trigger('tap');
    });
  }
});
</script>
18

I get an error message when clicking on the link

Is it just a case of adding that code to my site?

19

Click on “Open in Webflow”. There is no error.

You need to do the following:

  • Hide nav bullets, not delete them
  • Give the slider and thumbnails ids of article-slider and slider-thumbs respectively.
20

Okay thanks Sam let me give this a try I will get back to you later :slight_smile: