2 column multiple modal images

Report · Jul 25, 2018

Hello,

I'm trying to create multiple modal images that are in 2 columns on my webpage. I was using the template from w3 schools, but I can't seem to figure out how to make multiple images modal. I can only get the first one. How would I be able to do this? Here is my script below for my images. I want to be able to click on the image and have a full size image come up.

<h5>Worden Looking West Toward Allegany</h5>

</div>

<h5>Friedsam Memorial Library</h5>

</div>

<h5>Alumni Hall </h5>

</div>

<h5>Shrine of St. Theresa</h5>

</div>

<h5>Friedsam Memorial Library</h5>

</div>

<h5>Friedsam Memorial Library</h5>

</div>

Report · Jul 25, 2018

First lets estabish what workflow - method you want to use before wasting everyones time which this forum seems to have a habit of doing these days.

Do you want to do this using:

1, Bootstrap,

2, jQuery

3, Vanilla javacript

4, Vue

5, React

6, Angular

7, Pure css no frameworks

If you respond with a workflow similar to one which I use, I'll provide a solution. If you dont I'll leave it to someone else.

Report · Jul 25, 2018

I need to stay with CSS, HTML, and Javascript

Report · Jul 25, 2018

amberc3152909 wrote
I need to stay with CSS, HTML, and Javascript

Wrong answer.........someone else will have to help you but I'd advice you post in another forum where they can actually code vanilla javascript (if that is what you mean) because most in this forum only know how to deploy Bootstrap solutions.

Report · Jul 25, 2018

I'll take my chances with someone that doesn't have the attitude. Thanks.

Report · Jul 25, 2018

amberc3152909 wrote
I'll take my chances with someone that doesn't have the attitude. Thanks.

Good luck with that one....I see youre still waiting an hour later.

Report · Jul 25, 2018

osgood_ wrote
amberc3152909 wrote
I'll take my chances with someone that doesn't have the attitude. Thanks.
Good luck with that one....I see youre still waiting an hour later.

I did not bother because everything (in this forum) is now Bootstrap, but if the poster is interested, view source -

http://www.pziecina.com/Adobe/lightbox/lightbox.html

The number of columns/rows will only depend on the html.

Report · Jul 25, 2018

It really is going to depend on what you're comfortable with as far as coding goes, and the exact effect you want to achieve, when determining what's going to work best for you.

Are you OK with modifying found javascript and adding it to your template?

If so, do a search for "image gallery javascripts" in Google and you'll be presented with a lot of different options, most with full instructions on how to implement them. Fancybox and Lightbox2 are a couple of popular options.

What other items do you want in the modal window along with the larger version of the image?

You may only think you want the image to be enlarged, but what about Previous/Next and Close buttons? Is the ability to control the style of the modal window itself important?

Is keyboard navigation through your gallery something you need? Accessibility for those who don't use mice on their desktops could be important, even required, by your client.

There are really an untold number of ways to add modal windows to a site. Some don't require any scripting and work fairly well with just html and css. Others force the use of large script libraries that need to be pared down to only the code you're actually using. If you've had no experience with the latter, it can be a little overwhelming and is prone to breaking.

Report · Jul 25, 2018

Before we go any further, you only need one modal window -- not multiple modals. I also see no point in re-inventing the wheel. What you want can be done with a few lines of code and Fancybox. It's modern, it's responsive, it's touch screen freindly & well tested to work in all devices. Below is the basic code. Replace gallery images with your own. Tada! Problem solved.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fancybox Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Fancybox Modal CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" />
</head>
<body>
<!--Add thumbnails and links to full size images below-->
<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>
<a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a>
<a data-fancybox="gallery" href="big_3.jpg"><img src="small_3.jpg"></a>
<a data-fancybox="gallery" href="big_4.jpg"><img src="small_4.jpg"></a>
<!--jQuery Core Library-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!--Fancybox Modal JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
</body>
</html>

EDIT: Below is the Fancybox documentation in case you need advanced features.

https://fancyapps.com/fancybox/3/docs/

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

Report · Jul 25, 2018

https://forums.adobe.com/people/Nancy+OShea  wrote
Before we go any further, you only need one modal window -- not multiple modals.  I also see no point in re-inventing the wheel.  What you want can be done with a few lines of code and Fancybox.    It's modern, it's responsive, it's touch screen freindly & well tested to work in all devices.  Below is the basic code.  Replace gallery images with your own.  Tada!  Problem solved.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Fancybox Demo</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--Fancybox Modal CSS--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" /> </head>  <body> <!--Add thumbnails and links to full size images below--> <a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>  <a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a>  <a data-fancybox="gallery" href="big_3.jpg"><img src="small_3.jpg"></a>  <a data-fancybox="gallery" href="big_4.jpg"><img src="small_4.jpg"></a>   <!--jQuery Core Library--> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>  <!--Fancybox Modal JS--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script> </body> </html>

EDIT: Below is the Fancybox documentation in case you need advanced features.
https://fancyapps.com/fancybox/3/docs/

That uses jQuery - OP stated Javascript, which is why I didnt bother to provide a url to Fancybox although I'm pretty sure OP doesnt know exactly what they want to use as long as it works..........would have been a waste of my time providng a bespoke vanilla javascript solution only for someone to come along and post a url to Fancybox or Bootstrap......as is what usually happens these days......point, click, point, click.....grab this code grab that code........plug it in.

Report · Jul 25, 2018

osgood_ wrote
...only for someone to come along and post a url to Fancybox or Bootstrap......as is what usually happens these days......point, click, point, click.....grab this code grab that code........plug it in.

I know you use jQuery. And probably for the same reasons most of us do. There's a lot to be said for workflows, plugins, 3rd party extensions or whatever that help keep the project on time and on budget.

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

Report · Jul 25, 2018

https://forums.adobe.com/people/Nancy+OShea wrote
osgood_ wrote
...only for someone to come along and post a url to Fancybox or Bootstrap......as is what usually happens these days......point, click, point, click.....grab this code grab that code........plug it in.
I know you use jQuery. And probably for the same reasons most of us do. There's a lot to be said for workflows, plugins, 3rd party extensions or whatever that help keep the project on time and on budget.

Of course I use Jquery and was hoping the OP would have chosen jQuery from the list I provided, not that I would have really advised to use Fancybox (its not free, although most people think it is - you need to buy a license to use it)

A bespoke modal in jQuery takes about 15 minutes to deploy from start to finish....you get to code something rather than point and click or copy and paste. Everyone who is serious about web develoment should code their own.........it helps to undersatnd jQuery if you are going to use it or better still do it in vanilla javascript - that takes only about the same time and the way to go if you are dead against jQuery, I'm not but others are but then again they are probably using vue, react or angular - all are equally as simple as jQuery to code a modal

Report · Jul 25, 2018

The reason I suggested Fancybox 3 over other lightbox type scripts is because it's better than the rest. A lot of thought went into it. Fancybox 3 not only supports modal images but also AJAX, YouTube, Vimeo, iFrames, etc... A single commercial licence only costs USD $29. And if you already own a license for Fancybox 2, you're good to go. You don't need to buy another one.

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

Report · Jul 25, 2018

https://forums.adobe.com/people/Nancy+OShea wrote
The reason I suggested Fancybox 3 over other lightbox type scripts is because it's better than the rest. A lot of thought went into it. Fancybox 3 not only supports modal images but also AJAX, YouTube, Vimeo, iFrames, etc... A single commercial licence only costs USD $29. And if you already own a license for Fancybox 2, you're good to go. You don't need to buy another one.

$29 dollars each time you deploy it or you could buy the extended licence $119 dollars - a whopping 76kbs js/css or code your own....15mins or find a free one by Googling.

Report · Jul 25, 2018

Like here url below, only 12kbs plus a few lines of css

Gallery with modal preview

Adobe Community

2 column multiple modal images

1 Correct answer