Custom script on image click

Design help Custom code
1

I’m trying to create a sort of custom lightbox since the existing one does not fit my needs.

I don’t know much web programming, my background being in c++,c# and other other languages but afaik I have a working knowledge of html, css, js, jquery etc.

I created a big image and a collection of image below it displayed horizontally.

I added some classes for the display elements and then added the following script at the end:

<script>
$('.project-screenshot-preview').on('click', function(){
	console.debug("here");
  var lightboxImage = $(this).find('img').attr('src');
  $('.project-screenshot-current').attr('src', lightboxImage);
});
</script>

It shows up in the published page, and the classes are there as expected but nothing seems to happen when I click the images, and even the debug console message does not show up.

Afaik code added before the “” runs after the previous html tags are created and thus should attach to the buttons.

Here is my site Read-Only: LINK

2

HI @Lorin_Atzberger I have now tested your site and I’m getting response on click in console on each small image.

3

I don’t get it. Im still testing on my side and it does not work. I’ve even opened it up in a incognito tab and the result is still the same. No images changing, no console messages.

4

Oh, nevermind. It’s been a while since I touched web stuff. Evidently in chrome the logs don’t show up unless the dev tools are opened when the logs are issued. The lightbox functionality still does not work, so I’ll update this when I get it running.

5

Sorry for to be late with response as I was creating code for you that works. Im not familiar with jQuery as I’m JS mostly

I have tested this code and it works but I can’t apply it to your page (I have only externally inject it).
You should delete your jQ code when testing this one.

CODE

let mainImgUrl = document.querySelector(".project-screenshot-current").src
let [...thumbs] = document.querySelector(".collection-list-2").children

thumbs.forEach(thumb =>{
	thumb.addEventListener("click", (e) =>{
		let url = e.target.src;
		mainImgUrl = url
	})
})

RESULT

PS: You may have only Errors and Warning to be shown in console and not Verbose. To see more just check “ALL” or just these you need.

CleanShot 2022-05-30 at 21.32.26

1 Like
6

I have no idea why the logs didn’t show up before as after I replied to you they started showing up consistently even when the dev tools are closed.

Thank you for your piece of code. Before seeing your reply I also got it to work and also added an extra ‘current’ class to show the selected image.

<script>
var projectScreenshotCurrent = $('.project-screenshot-current');
var selectedScreenshotPreview = $('.project-screenshot-preview').first();
selectedScreenshotPreview.addClass('project-screenshot-preview-current');

$('.project-screenshot-preview').on('click', function(){
  var lightboxImage = $(this).attr('src');
  projectScreenshotCurrent.attr('src', lightboxImage);
  
  selectedScreenshotPreview.removeClass('project-screenshot-preview-current');
  selectedScreenshotPreview = $(this);
  selectedScreenshotPreview.addClass('project-screenshot-preview-current');
});
</script>
1 Like
7

Hi @Lorin_Atzberger is great to see you have figure it out as there is many ways how to achieve same result.
If issue doesn’t persist feel free to close your request as solved :wink:

8

Oh cool. Didn’t realise this is a thing. I marked yours as the solution in case it matters for something. I’ve seen multiple people ask this while googling so hopefully this is going to help other people in the future.

Thanks again!

1 Like
9

hi @Lorin_Atzberger marking as solution matters only for one reason and that is when users use advanced search filter to browse only solved requests. What solution is marked doesn’t mean anything but usually is marked the one that solved request for user. So if your code is used and issue is solved by this code it should be marked as solution that worked for you . :wink: