Streaming live at 10am (PST)

Need help with image swap on click

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

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

anything that will get it working

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

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

Try this. It uses the div / interaction method.

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

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

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:

Hi @Adam_Wright, do you want something like this?

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

@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.

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

You can see how it is done in the designer:

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

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);
    }, 300);
    artThumbs.on('click', 'div', function() {
      var index = $(this).index();

I get an error message when clicking on the link

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

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.

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

Awesome @samliew

I decided to make an adjustment to one of my projects.

My setup is basically a PHP page that pulls data and images from sql server.

I had 1 large static image that would dynamically insert the selected image into the place holder

  • based on what the user selected.

I hadn’t thought about using the JS Find method that you used…

  • so I switched it over to the Find method and Webflows Slider (instead of static place holder).

Both examples dynamically load the images from a database.

For me - the ability to load the images on the fly is the most important. This project is pretty much a 1 page template that handles 400k+ images.

Thanks a lot for the idea ! :slightly_smiling:

1 Like

Hi did you manged to make a demo ?

Hi Sam still having some trouble with this could you please help

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.