Gethat gepap

What Will I Learn?

You will learn how to create modal
You will learn how to display image galery on modal
You will learn how to get attribut HTML value using jQuery
You will learn how to show modal using jquery

Requirements

Basic knowledges about HTML
Basic knowledges about CSS
Basic knowledges about JavaScript
To practice this tutorial need an text editor, browser and host or install Bootstrap and jQuery file (or you can also add Bootstrap and jQuery CDN if you don't want to install or host it).

Difficulty

Intermediate

Tutorial Contents

In this tutorial, we will create an modal that display the clicked image in galery. When user click an image on galery, the modal will pop-up and display image in large size on modal. To create this all, we use Bootstrap Framework and jQuery. Bootstrap Framework to build modal and display image on galery, while jQuery to show a modal and display image on modal. For more detail, lets follow and pay attenttion on steps bellow :

+Preparation

Create a folder
Add some images. Here I prepare 3 Images for sample
Open your text editor, create new HTML file [galery.html] and save it on the previous folder

+Adding HTML5 Element, jQuery and Bootstrap CDN

As we know for using bootstrap we should use HTML5 Doctype. Add the HTML5 element on your file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Collabsible Navbar</title>
</head>
<body>
</body>
</html>

For using bootstrap framework we should install or host bootstrap file first. If we don't want to do that, you can also add Bootstrap CDN as a replacement. You can visit bootstrap official website to get it. add and put it in <head> element.

   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

To use jQuery we need to install or host it. Or we can also add jQuery CDN if we don't want to install or host it. we also have many choices CDN that we can use, either Google CDN or Microsoft CDN. For more Detail you can visit jquery official web. In this tutorial I use Google CDN. Add the CDN in <head> element.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

+Create a Sample Galery

wrap site contents.

<div class="container">
 </div>

To create iamges galery using bootstrap framework you can use .row class.

<div class="row">
 </div>

in a .row class bootrap has 12 cols. Here, I set 3 cols so we need combine 4 cols in a cols

<div class="col-sm-4">
</div>

Add <a> element with .thumbnail class in <div class="col-sm-4">

 <a class="thumbnail" href="#">
</a>

Add image in <a> element, and Don't forget to use .img-responsive class to make image responsive.

<img class="img-responsive" src="img1.jpg">

To add more image on galery element just repeat the steps above, like this :

<div class="col-sm-4">
                <a class="thumbnail" href="#">
                    <img class="img-responsive" src="img2.jpg">
                </a>
                </div>
                <div class="col-sm-4">
                    <a class="thumbnail" href="#">
                        <img class="img-responsive" src="img3.jpg">
                    </a>
                </div>

+Creating Modal Element

To create a modal, bootstrap has provided .modal and .fade class

<div class="modal fade" role="dialog" id="imgmodal">
</div>

All content in modal must in .dialog class

 <div class="modal-dialog">
</div>

add modal content

<div class="modal-content">
</div>

the last, Add <img> element to display image. Don't fill any value in src atribut.

<img class="img-responsive" src="" id="show-img">

Full code of modal :

<div class="modal fade" role="dialog" id="imgmodal">
    <div class="modal-dialog">
        <div class="modal-content"></div>          
                    <img class="img-responsive" src="" id="show-img">         
        </div>
    </div>
</div>

+Adding jQuery

To pop-up the modal and display the image we need to add jquery script

To write the jQuery Script we should open <script> tag. You can put it in <head> element or in <body> element.

<script></script>

Before add more event in jQuery. There is an event that we should add for the first. It is ready() event. this event to make sure that all html elements are loaded. if it is, then it will load jQuery script. So, all jQuery Script must write in this function event.

$(document).ready(function(){
});

Select the img element and add click event function

$("img").click(function(){
});

to get the src value of image clicked you can use $(this).attr('src');

var img=$(this).attr('src');

Select the img element in modal. To fill scr value of this element with the img clicked you can use attr() function

$("#show-img").attr('src',img);

show the modal

$("#imgmodal").modal('show');

+Testing

Save the file and run on your browser. Then try to click an image of your galery.

LIVE DEMO

+Full Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Pop-UP Image on modal</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>GALERY</h2>
    <div class="row">      
                <div class="col-sm-4">
                <a class="thumbnail" href="#">
                    <img class="img-responsive" src="img1.jpg">
                </a>
                </div>
                <div class="col-sm-4">
                <a class="thumbnail" href="#">
                    <img class="img-responsive" src="img2.jpg">
                </a>
                </div>
                <div class="col-sm-4">
                    <a class="thumbnail" href="#">
                        <img class="img-responsive" src="img3.jpg">
                    </a>
                </div>
    </div>
</div>
<div class="modal fade" role="dialog" id="imgmodal">
    <div class="modal-dialog">
        <div class="modal-content"></div>          
                    <img class="img-responsive" src="" id="show-img">         
        </div>
    </div>
</div>
<script>
    $(document).ready(function(){
        $("img").click(function(){
           var img=$(this).attr('src');
             $("#show-img").attr('src',img);
             $("#imgmodal").modal('show');
        });
    });
</script>
</body>
</html>

Curriculum

Posted on Utopian.io - Rewarding Open Source Contributors