Multiple Modals for image gallery

New Here ,
Jan 02, 2019 Jan 02, 2019

Copy link to clipboard

Copied

Hello people of the internet!

I'm new at this so sorry in advance xD

I'm making a web page that is based on this code How To Create a Lightbox​ and my problem is i cant get it to work on multiple images.

The idea is you click button1 and the modal appears with gallery1 and when you click on button2 modal appears with modal2......button10 gallery10 and so on.

Thanks in advance Happy new year btw !!!

here is my code:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Untitled Document</title>

   

   

<script>

// Open the Modal

function openModal() {

  document.getElementById('myModal').style.display = "block";

}

// Close the Modal

function closeModal() {

  document.getElementById('myModal').style.display = "none";

}

var slideIndex = 1;

showSlides(slideIndex);

// Next/previous controls

function plusSlides(n) {

  showSlides(slideIndex += n);

}

// Thumbnail image controls

function currentSlide(n) {

  showSlides(slideIndex = n);

}

function showSlides(n) {

  var i;

  var slides = document.getElementsByClassName("mySlides");

  var dots = document.getElementsByClassName("demo");

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

  if (n > slides.length) {slideIndex = 1}

  if (n < 1) {slideIndex = slides.length}

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

    slides.style.display = "none";

  }

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

    dots.className = dots.className.replace(" active", "");

  }

  slides[slideIndex-1].style.display = "block";

  dots[slideIndex-1].className += " active";

  captionText.innerHTML = dots[slideIndex-1].alt;

}

</script>   

   

   

   

   

   

<style>

   

   

   

    .row > .column {

  padding: 0 8px;

}

.row:after {

  content: "";

  display: table;

  clear: both;

}

/* Create four equal columns that floats next to eachother */

.column {

  float: left;

  width: 25%;

}

/* The Modal (background) */

.modal {

  display: none;

  position: fixed;

  z-index: 1;

  padding-top: 100px;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  overflow: auto;

  background-color: black;

}

/* Modal Content */

.modal-content {

  position: relative;

  background-color: #fefefe;

  margin: auto;

  padding: 0;

  width: 90%;

  max-width: 1200px;

}

/* The Close Button */

.close {

  color: white;

  position: absolute;

  top: 10px;

  right: 25px;

  font-size: 35px;

  font-weight: bold;

}

.close:hover,

.close:focus {

  color: #999;

  text-decoration: none;

  cursor: pointer;

}

/* Hide the slides by default */

.mySlides {

  display: none;

}

/* Next & previous buttons */

.prev,

.next {

  cursor: pointer;

  position: absolute;

  top: 50%;

  width: auto;

  padding: 16px;

  margin-top: -50px;

  color: white;

  font-weight: bold;

  font-size: 20px;

  transition: 0.6s ease;

  border-radius: 0 3px 3px 0;

  user-select: none;

  -webkit-user-select: none;

}

/* Position the "next button" to the right */

.next {

  right: 0;

  border-radius: 3px 0 0 3px;

}

/* On hover, add a black background color with a little bit see-through */

.prev:hover,

.next:hover {

  background-color: rgba(0, 0, 0, 0.8);

}

/* Number text (1/3 etc) */

.numbertext {

  color: #f2f2f2;

  font-size: 12px;

  padding: 8px 12px;

  position: absolute;

  top: 0;

}

/* Caption text */

.caption-container {

  text-align: center;

  background-color: black;

  padding: 2px 16px;

  color: white;

}

img.demo {

  opacity: 0.6;

}

.active,

.demo:hover {

  opacity: 1;

}

img.hover-shadow {

  transition: 0.3s;

}

.hover-shadow:hover {

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

   

   

   

   

   

</style>   

   

   

   

   

</head>

<body>

   

   

<button onclick="openModal();currentSlide(1)">button1</button>

 

<!-- The Modal/Lightbox -->

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

  <span class="close cursor" onclick="closeModal()">&times;</span>

  <div class="modal-content">

    <div class="mySlides">

      <div class="numbertext">1 / 4</div>

      <img src="img1_wide.jpg" style="width:100%">

    </div>

    <div class="mySlides">

      <div class="numbertext">2 / 4</div>

      <img src="img2_wide.jpg" style="width:100%">

    </div>

    <div class="mySlides">

      <div class="numbertext">3 / 4</div>

      <img src="img3_wide.jpg" style="width:100%">

    </div>

    <div class="mySlides">

      <div class="numbertext">4 / 4</div>

      <img src="img4_wide.jpg" style="width:100%">

    </div>

    <!-- Next/previous controls -->

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>

    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    <!-- Caption text -->

    <div class="caption-container">

      <p id="caption"></p>

    </div>

    <!-- Thumbnail image controls -->

    <div class="column">

      <img class="demo" src="img1.jpg" onclick="currentSlide(1)" alt="Nature">

    </div>

    <div class="column">

      <img class="demo" src="img2.jpg" onclick="currentSlide(2)" alt="Snow">

    </div>

    <div class="column">

      <img class="demo" src="img3.jpg" onclick="currentSlide(3)" alt="Mountains">

    </div>

    <div class="column">

      <img class="demo" src="img4.jpg" onclick="currentSlide(4)" alt="Lights">

    </div>

  </div>

</div>

   

   

   

    <button onclick="openModal();currentSlide(1)">button2</button>

 

<!-- The Modal/Lightbox -->

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

  <span class="close cursor" onclick="closeModal()">&times;</span>

  <div class="modal-content">

    <div class="mySlides">

      <div class="numbertext">1 / 4</div>

      <img src="img5_wide.jpg" style="width:100%">

    </div>

    <div class="mySlides">

      <div class="numbertext">2 / 4</div>

      <img src="img6_wide.jpg" style="width:100%">

    </div>

    <div class="mySlides">

      <div class="numbertext">3 / 4</div>

      <img src="img7_wide.jpg" style="width:100%">

    </div>

    <div class="mySlides">

      <div class="numbertext">4 / 4</div>

      <img src="img8_wide.jpg" style="width:100%">

    </div>

    <!-- Next/previous controls -->

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>

    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    <!-- Caption text -->

    <div class="caption-container">

      <p id="caption"></p>

    </div>

    <!-- Thumbnail image controls -->

    <div class="column">

      <img class="demo" src="img5.jpg" onclick="currentSlide(1)" alt="Nature">

    </div>

    <div class="column">

      <img class="demo" src="img6.jpg" onclick="currentSlide(2)" alt="Snow">

    </div>

    <div class="column">

      <img class="demo" src="img7.jpg" onclick="currentSlide(3)" alt="Mountains">

    </div>

    <div class="column">

      <img class="demo" src="img8.jpg" onclick="currentSlide(4)" alt="Lights">

    </div>

  </div>

</div>

   

   

   

</body>

</html>

I hope i knew how to get that cool ass button that shows you the code to appear (SRY)

Views

2.9K

Likes

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
Adobe Community Professional ,
Jan 02, 2019 Jan 02, 2019

Copy link to clipboard

Copied

having 10 galleries on 1 page is going to take forever to load.  I think I would approach this a little differently just to keep page load as fast as possible.

Create a summary page with one image representing each Gallery page..

The 1st image takes users to a new Gallery 1 page with lightbox/modal window viewer.

The 2nd image takes users to a new Gallery 2 page, and so on....

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

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
Adobe Community Professional ,
Jan 02, 2019 Jan 02, 2019

Copy link to clipboard

Copied

I second Nancy OShea​'s reply... The more images you add, the more bloated the page load would become. (In addition, the code you posted won't work simply because you're using the same ID on two DIVs, and the Javascript is caught trying to figure out which modal segment you want to show.)

Likes

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
New Here ,
Jan 02, 2019 Jan 02, 2019

Copy link to clipboard

Copied

Ohh sorry my bad I didn't actually mean 10 i just meant multiple sorry for the confusion.

so how would i separate them though but still have the script recognize them (sorry if im being a complete noob here)

Likes

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
Adobe Community Professional ,
Jan 02, 2019 Jan 02, 2019

Copy link to clipboard

Copied

Same answer as before.  The script you have now won't work with multiple galleries.   IDs are unique and cannot be re-used on the same page.

If yyou're building this for yourself and you're a Creative Cloud member, you have free access to Adobe Portfolio which might be a lot simpler for you to use.   Synch your Lighrtoom album/collection to Portfolio/  Your images are placed inside a PhotoGrid with a lightbox viewer.  No coding skill needed.

Adobe Portfolio | Build your own personalized website

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

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
Adobe Community Professional ,
Jan 02, 2019 Jan 02, 2019

Copy link to clipboard

Copied

as example of what you are asking for you can have a look at this script and lib

lightbox2/index.html at dev · lokesh/lightbox2 · GitHub

as you can see i th code you will find an attribute called data-lightbox (proper to this lib)... and each images having the same (equal) value of this attribute will be grouped together in a specific and independant gallery.

well now, this example is the most basic one, but, most of the libs or plugin, that you will find diging the web will work the same.

BUT as Nancy point at ... don't forget that having multiple galleries on the same page , and depending of the global amount images that they will host can be a real loading page problem...

anyway... 1 gallery having 10 images will occupy the same loading time that 2 galleries of 5 images each...

Likes

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
Mentor ,
Jan 02, 2019 Jan 02, 2019

Copy link to clipboard

Copied

I'm not sure if it possible to answer your question. How about looking at this example and telling me how close/far it is to what you want to actually do?

Magic Box Demo

Likes

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
Mentor ,
Jan 02, 2019 Jan 02, 2019

Copy link to clipboard

Copied

Just for clarity, as this forum can get extremely confusing, the image weight issue brought up does not really apply to our tools, as all full-size images are fetched on demand in a staged preloader.

Likes

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
Adobe Community Professional ,
Jan 02, 2019 Jan 02, 2019

Copy link to clipboard

Copied

have only one gallery on the page, will preload a single image that can be displayed....

have 4 galleries on the same page will preload 4 potentially displayable images

the real question is does image gallery library handle correctly the srcset attribut... ? and how ? does yours handle it ?

Likes

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
Mentor ,
Jan 02, 2019 Jan 02, 2019

Copy link to clipboard

Copied

Our preloader only works for an active gallery so it's not an issue. Srcset is easy to code manually or in a dedicated tool, but would be nearly impossible to automate for an image gallery tool. In the vast majority of cases, though, a good designer should be able to get by with a single image in an overlay-style gallery scenario. You could get obsessive, though. Kind of like Adrian Monk does web design and changes images for every 100px of viewport width.

Likes

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
Adobe Community Professional ,
Jan 02, 2019 Jan 02, 2019

Copy link to clipboard

Copied

I know and respect your vision on those libs (layer sider, revolution slider and so on)... but they started offering solution for multiple image sourcing... https://www.themepunch.com/faq/display-different-images-different-screen-sizes-revolution-slider/

but ,

let's not get lost in a reductive example (the one of Adrian Monk you mention)... the different image sources should not be based on a width in pixels, but on a resolution depending on the type of device.

especially since when we are talking about an image gallery, and especially for photographers, the image displayed must not be identical between a typical retina screen and a low-resolution screen

that's just a 2 cents remark

Likes

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
Mentor ,
Jan 03, 2019 Jan 03, 2019

Copy link to clipboard

Copied

I could argue. And even make point that would be totally worthless on this forum. So, I will agree that your comments are worth at least 2 cents and move on,

Likes

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 03, 2019 Jan 03, 2019

Copy link to clipboard

Copied

tumblra151999  wrote

Hello people of the internet!

I'm new at this so sorry in advance xD

I'm making a web page that is based on this code How To Create a Lightbox and my problem is i cant get it to work on multiple images.

The idea is you click button1 and the modal appears with gallery1 and when you click on button2 modal appears with modal2......button10 gallery10 and so on.

Thanks in advance Happy new year btw !!!

This would be quite simple using vue js. If you're still alive and want an example let me know and I'll let you have one.

Likes

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
Mentor ,
Jan 03, 2019 Jan 03, 2019

Copy link to clipboard

Copied

Vue is pretty good stuff. How much customization would it take to auto-fit slides to the viewport - is there a native function or does it require a bit of CSS. My feelings on viewing a few online examples of vue-based widgets is that they use a simple approach and are devoid of the absolutely gauche design and animations used in many jQuery-based viewers (Woo comes to mind).

Likes

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 03, 2019 Jan 03, 2019

Copy link to clipboard

Copied

ALsp  wrote

Vue is pretty good stuff. How much customization would it take to auto-fit slides to the viewport - is there a native function or does it require a bit of CSS. My feelings on viewing a few online examples of vue-based widgets is that they use a simple approach and are devoid of the absolutely gauche design and animations used in many jQuery-based viewers (Woo comes to mind).

Vue still requires css to auto fit slides to the viewport. Not sure how I would approach this particular requirement though - most probably put the image galleries in 'objects' and call the data using method functions, when needed.

Vue is pretty useful as its simple to grasp the very basics and build upon those plus it makes you investigate a bit more vanilla javascript along the way as it can't really do what jQuery can do and jQuery can't do what Vue can do.

The only problem is developers are now mixing and matching - the stuff Vue can't do easily they use jQuery, within Vue

Likes

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
Mentor ,
Jan 03, 2019 Jan 03, 2019

Copy link to clipboard

Copied

The only problem is developers are now mixing and matching - the stuff Vue can't do easily they use jQuery, within Vue

That's actually not a small problem.

We tend to use CSS as much as possible and then augment with dedicated functions. Constraining an element to viewport height is pretty straightforward with CSS, and any images inside the element will go along for the ride. Back in the day, we had to do that with script because of the old browsers - and it was really complicated. Anyway... that's the best part of standards and modern browsers: you can let CSS do more of the grunt work. Can't wait for Edge to switch to Chromium - too. While Chrome has its own bugs, they are usually a bit easier to deal with.

Likes

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 03, 2019 Jan 03, 2019

Copy link to clipboard

Copied

ALsp  wrote

The only problem is developers are now mixing and matching - the stuff Vue can't do easily they use jQuery, within Vue

That's actually not a small problem.

I don't see the point combining Vue and JQuery, although it works perfectly well - might as well stick with jQuery if you're going to do that.

I think the idea was to try and wean developers off jQuery (I'm not totally sure why) - Vue made some aspects easy but when you have to grab anything from the DOM its still lacking (apart from v-model which is a 2 way binding solution) but makes up for it in other areas........so it's swings an roundabouts really.

When I use Vue I use css, keyframes and javascript for fade effects as opposed to when I use jQuery it has inbuilt fadeIn/fadeOut effects - Vue only has limited built in transitions, which dont seem to work in complex situations.

Likes

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
Mentor ,
Jan 03, 2019 Jan 03, 2019

Copy link to clipboard

Copied

LATEST
When I use Vue I use css, keyframes and javascript for fade effects as opposed to when I use jQuery it has inbuilt fadeIn/fadeOut effects - Vue only has limited built in transitions, which dont seem to work in complex situations.

My partner is actually much more involved in scripts - he's a freaking genius - but I do have my moments 😉 One thing we've noted is that scripted animations are never as smooth as CSS animations. So, our trend is to use script to trigger and time CSS animations. This why I keep telling Birnou that the examples he shows me sometimes are choppy. In my experience, we've dealt with all that and know the limitations of certain types of jQuery routines and they kind of suck - but hey, some people think Tatas are dream cars.

Likes

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