Highlighted

2 column multiple modal images

New Here ,
Jul 25, 2018

Copy link to clipboard

Copied

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.

<div class="row">

  <div class="column"> <a href="images/Worden_Looking_West_a.jpg" target="new"><img src="images/Worden_Looking_West_w.jpg" alt="Worden Looking West Toward Allegany" style="width:100%"></a>

    <div class="w3-container">

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

    </div>   

  </div>

  <div class="column">

    <img src="images/worden002w.jpg" alt="Friedsam Memorial Library" style="width:100%">

    <div class="w3-container">

        <h5>Friedsam Memorial Library</h5>

    </div>

  </div>

  <div class="column">

    <img src="images/worden003w.jpg" alt="Alumni Hall" style="width:100%">

    <div class="w3-container">

        <h5>Alumni Hall </h5>

    </div>

  </div>

  <div class="column">

    <img src="images/worden004w.jpg" alt="Shrine of St. Theresa" style="width:100%">

    <div class="w3-container">

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

    </div>

  </div>

  <div class="column">

    <img src="images/worden005w.jpg" alt="Friedsam Memorial Library" style="width:100%">

    <div class="w3-container">

        <h5>Friedsam Memorial Library</h5>

    </div>

  </div>

  <div class="column">

    <img src="images/worden006w.jpg" alt="Friedsam Memorial Library" style="width:100%">

    <div class="w3-container">

        <h5>Friedsam Memorial Library</h5>

    </div>

  </div>

</div>

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

Gallery with modal preview

Views

1.7K

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

2 column multiple modal images

New Here ,
Jul 25, 2018

Copy link to clipboard

Copied

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.

<div class="row">

  <div class="column"> <a href="images/Worden_Looking_West_a.jpg" target="new"><img src="images/Worden_Looking_West_w.jpg" alt="Worden Looking West Toward Allegany" style="width:100%"></a>

    <div class="w3-container">

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

    </div>   

  </div>

  <div class="column">

    <img src="images/worden002w.jpg" alt="Friedsam Memorial Library" style="width:100%">

    <div class="w3-container">

        <h5>Friedsam Memorial Library</h5>

    </div>

  </div>

  <div class="column">

    <img src="images/worden003w.jpg" alt="Alumni Hall" style="width:100%">

    <div class="w3-container">

        <h5>Alumni Hall </h5>

    </div>

  </div>

  <div class="column">

    <img src="images/worden004w.jpg" alt="Shrine of St. Theresa" style="width:100%">

    <div class="w3-container">

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

    </div>

  </div>

  <div class="column">

    <img src="images/worden005w.jpg" alt="Friedsam Memorial Library" style="width:100%">

    <div class="w3-container">

        <h5>Friedsam Memorial Library</h5>

    </div>

  </div>

  <div class="column">

    <img src="images/worden006w.jpg" alt="Friedsam Memorial Library" style="width:100%">

    <div class="w3-container">

        <h5>Friedsam Memorial Library</h5>

    </div>

  </div>

</div>

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

Gallery with modal preview

Views

1.7K

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
Jul 25, 2018 0
LEGEND ,
Jul 25, 2018

Copy link to clipboard

Copied

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.

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
Reply
Loading...
Jul 25, 2018 1
New Here ,
Jul 25, 2018

Copy link to clipboard

Copied

I need to stay with CSS, HTML, and Javascript

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
Reply
Loading...
Jul 25, 2018 0
LEGEND ,
Jul 25, 2018

Copy link to clipboard

Copied

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.

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
Reply
Loading...
Jul 25, 2018 0
New Here ,
Jul 25, 2018

Copy link to clipboard

Copied

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

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
Reply
Loading...
Jul 25, 2018 0
LEGEND ,
Jul 25, 2018

Copy link to clipboard

Copied

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.

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
Reply
Loading...
Jul 25, 2018 0
LEGEND ,
Jul 25, 2018

Copy link to clipboard

Copied

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.

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
Reply
Loading...
Jul 25, 2018 0
Adobe Community Professional ,
Jul 25, 2018

Copy link to clipboard

Copied

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.

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
Reply
Loading...
Jul 25, 2018 0
Adobe Community Professional ,
Jul 25, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

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
Reply
Loading...
Jul 25, 2018 1
LEGEND ,
Jul 25, 2018

Copy link to clipboard

Copied

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.

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
Reply
Loading...
Jul 25, 2018 0
Adobe Community Professional ,
Jul 25, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

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
Reply
Loading...
Jul 25, 2018 0
LEGEND ,
Jul 25, 2018

Copy link to clipboard

Copied

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

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
Reply
Loading...
Jul 25, 2018 0
Adobe Community Professional ,
Jul 25, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

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
Reply
Loading...
Jul 25, 2018 1
LEGEND ,
Jul 25, 2018

Copy link to clipboard

Copied

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.

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
Reply
Loading...
Jul 25, 2018 0
LEGEND ,
Jul 25, 2018

Copy link to clipboard

Copied

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

Gallery with modal preview

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
Reply
Loading...
Jul 25, 2018 1