• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Problem getting lightbox modals working with various thumbs and photos

Enthusiast ,
Jan 17, 2018 Jan 17, 2018

Copy link to clipboard

Copied

I'm trying to get the modal lightbox work for different thumbs and different large photos.  It works great when you use the same photo for the thumb and the large photo but now they want a different thumb and a different photo.  Here is the code for the thumb:

<img id="myImg1" src="cain-thumb.jpg" width="165" height="200">

<img id="myImg2" src="lennon-thumb.jpg" width="165" height="200">

-----

Here is the modal content for each of the above:

!-- The Modal -->

<div id="myModal" class="modal">

  <span class="close">×</span>

  <img class="modal-content" id="img101" img src="cain-large.jpg">

</div>

<!-- The Modal -->

<div id="myModal" class="modal">

  <span class="close">×</span>

  <img class="modal-content" id="img102" img src="lennon-large.jpg">

</div>

-----

Here is the script.  I keep playing around with it thinking I've fixed it but cannot and I'm not sure which part of the code to tweak so that when the cain thumb is clicked the cain photo opens and then when the lennon thumb is clicked the lennon photo opens:

I also keep getting an error in DW about it must be unique; I tried that and that does not work as well:

unique.jpg

<script>

// Get the modal

var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption

var img = document.getElementById('myImg1');

var modalImg = document.getElementById("img101");

var captionText = document.getElementById("caption");

img.onclick = function(){

    modal.style.display = "block";

    modalImg.src = this.src;

    captionText.innerHTML = this.alt;

}

// Get the image and insert it inside the modal - use its "alt" text as a caption

var img = document.getElementById('myImg2');

var modalImg = document.getElementById("img102");

var captionText = document.getElementById("caption");

img.onclick = function(){

    modal.style.display = "block";

    modalImg.src = this.src;

    captionText.innerHTML = this.alt;

}

/ Get the <span> element that closes the modal

var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal

span.onclick = function() {

    modal.style.display = "none";

}

</script>

-----------------------

Any help is appreciated.  Thanks.

Views

657

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Jan 18, 2018 Jan 18, 2018

If you don't want to use Bootstrap, get Fancybox 3.  It works great on mobile devices, too.

Copy & paste this code into a new, blank document.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Fancybox 3 with jQuery</title>

<!--Fancybox CSS-->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css"/>

</head>

<body>

<h1>Lightbox Viewer with <a href="https://fancyapps.com/fancybox/3/">Fancybox 3 </a>& latest jQuery</h1>

<a data-fancybox=

...

Votes

Translate

Translate
Community Expert ,
Jan 17, 2018 Jan 17, 2018

Copy link to clipboard

Copied

Are you using Bootstrap for your layout?

Bootstrap Modal + Carousel Gallery - https://alt-web.com/

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jan 17, 2018 Jan 17, 2018

Copy link to clipboard

Copied

No I found this over a year ago and it works great but I've only been using it for one photo.  Example:

lennon-photo.jpg

The CSS will make the same image above look like a thumb and then enlarge it when you click on it.  Because they want a thumb AND a large photo that's where I'm now stumped and am hoping you can just explain what I need to tweak in above code to make it work.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 17, 2018 Jan 17, 2018

Copy link to clipboard

Copied

Read the link I posted above.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jan 18, 2018 Jan 18, 2018

Copy link to clipboard

Copied

I got it now - works.  Thanks very much.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jan 18, 2018 Jan 18, 2018

Copy link to clipboard

Copied

Nancy, one problem is the CSS file shows the width of the lightbox to be 600px. The images are 800px so they are scrunched. I tried making a local copy of the bootstrap CSS and it works but then I lose the previous and next icons.

Is there an easier way to make this adjustment than downloading the entire bootstrap CSS file?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jan 18, 2018 Jan 18, 2018

Copy link to clipboard

Copied

Nancy here is another problem I have.  Suppose I don't want to list the thumbs as in the original tutorial like this:

  <li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="0"><img class="img-thumbnail" src="cain-thumb.jpg"></a></li>

  <li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="1"><img class="img-thumbnail" src="lennon-thumb.jpg"></a></li>

  <li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="2"><img class="img-thumbnail" src="clausen-thumb.jpg"></a></li>

So I had to put the data-toggle somewhere and put it like this:

<a href="#myGallery" data-slide-to="0" data-toggle="modal" data-target="#myModal"><img class="img-thumbnail" src="cain-thumb.jpg"></a>

  <a href="#myGallery" data-slide-to="1" data-toggle="modal" data-target="#myModal"><img class="img-thumbnail" src="lennon-thumb.jpg"></a>

  <a href="#myGallery" data-slide-to="2" data-toggle="modal" data-target="#myModal"><img class="img-thumbnail" src="clausen-thumb.jpg"></a>

But this does not work. It's probably because I'm not putting that data toggle in the right place but I'm not sure where I need to put it.

Any ideas?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jan 18, 2018 Jan 18, 2018

Copy link to clipboard

Copied

UPDATE - I now remember how I originally created the lightbox - with this code:

Tryit Editor v3.5

If someone could just help me tweak the above so that you click a thumb image a different image opens in the lightbox.  I don't want to reinvent the wheel with a completely different bootstrap thing.

Based on the above I tried tweaking it like below but the thumb is still opening and not the "large" image:

<img id="myImg" src="cain-thumb.jpg" width="165" height="200">

<!-- The Modal -->

<div id="myModal" class="modal">

  <span class="close">&times;</span>

  <img class="modal-content" id="img100" src="cain-large.jpg" width="800" height="572">

  <div id="caption"></div>

</div>

<script>

// Get the modal

var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption

var img = document.getElementById('myImg');

var modalImg = document.getElementById("img100");

var captionText = document.getElementById("caption");

img.onclick = function(){

    modal.style.display = "block";

    modalImg.src = this.src;

    captionText.innerHTML = this.alt;

}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 18, 2018 Jan 18, 2018

Copy link to clipboard

Copied

If you don't want to use Bootstrap, get Fancybox 3.  It works great on mobile devices, too.

Copy & paste this code into a new, blank document.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Fancybox 3 with jQuery</title>

<!--Fancybox CSS-->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css"/>

</head>

<body>

<h1>Lightbox Viewer with <a href="https://fancyapps.com/fancybox/3/">Fancybox 3 </a>& latest jQuery</h1>

<a data-fancybox="gallery" class="fancybox" data-slide="1" href="https://placeimg.com/800/600/arch/1.jpg"><img class="img-thumbnail" alt="..." src="https:/placeimg.com/200/150/arch/1.jpg"></a>

<a data-fancybox="gallery" class="fancybox" data-slide="2" href="https://placeimg.com/800/600/arch/2.jpg"><img class="img-thumbnail" alt="..." src="https:/placeimg.com/200/150/arch/2.jpg"></a>

<a data-fancybox="gallery" class="fancybox" data-slide="3" href="https://placeimg.com/800/600/arch/3.jpg"><img class="img-thumbnail" alt="..." src="https:/placeimg.com/200/150/arch/3.jpg"></a>

<a data-fancybox="gallery" class="fancybox" data-slide="4" href="https://placeimg.com/800/600/arch/4.jpg"><img class="img-thumbnail" alt="..." src="https:/placeimg.com/200/150/arch/4.jpg"></a>

<!--latest jQuery 3-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Fancybox 3-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>

<script>

//Invoke Fancybox on page load

$(document).ready( function() {

$('.fancybox').fancybox(

{protect:true});

});

</script>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jan 19, 2018 Jan 19, 2018

Copy link to clipboard

Copied

Thank you - much simpler and works great.  Thanks.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 19, 2018 Jan 19, 2018

Copy link to clipboard

Copied

I just thought I would point out that if you are using FB in a commercial environment then you need to purchase a licence.

Personally l find the FB site to be very misleading, enticing you to openly download a working product then informing you need a licence but they have no way of stopping its use if you decide not to buy one.

Its a good product but how its marketed is a bit strange. Not many extension/plugin makers let you openly download their paid for products hoping you will pay for its use.

And of course the problem of pasting links to their js and css files in forums makes it appear even more so thats its freely available to use to those who perhaps would not bother to go to the website to find out the usage details.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 19, 2018 Jan 19, 2018

Copy link to clipboard

Copied

LATEST

Your point is well taken.   Anyone using FancyBox for the first time should look at the terms.

fancyBox - Touch enabled, responsive and fully customizable jQuery lightbox script

If you already have a license for FancyBox2 , you do not need to buy another one.

FancyBox is licensed under the GPLv3 license for all open source applications.

A commercial license is required for all commercial applications (including sites, themes and apps you plan to sell).

I take that to mean that I can use it freely on my own website.  But if I'm building a client site,  I must  have a license.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines