آموزش ساخت گالری تصاویر به صورت Tab

در این مقاله می آموزید که چگونه یک گالری تصویر که بصورت tab می باشد را با استفاده از CSS و جاوا اسکريپت ایجاد کنید

از تصاویر برای بسط دادن یک عکس خاص استفاده کنید . تصویری که داخل ستون روی آن کلیک می شود ، در یک کادر در پایین ستون ها نمایش داده می شود.

قدم اول : کد HTML را اضافه کنید.
مثال :

                                 
                

                  

                    
                  
                  

                    
                  
                  

                    
                  
                  

                    
                  
                

                                    
                

                  
                  ×

                    
                  

                    
                  

                
                

قدم دوم :   کد CSS را اضافه کنید.
مثال :

چهار ستون ایجاد کنید و تصاویر را فرم دهید .

                .column {
                  float: left;
                  width: 25%;
                  padding: 10px;
                }

                /* Style the images inside the grid */
                .column img {
                  opacity: 0.8;
                  cursor: pointer;
                }

                .column img:hover {
                  opacity: 1;
                }

                /* Clear floats after the columns */
                .row:after {
                  content: "";
                  display: table;
                  clear: both;
                }

                /* The expanding image container (positioning is needed to position the close button and the text) */
                .container {
                  position: relative;
                  display: none;
                }

                /* Expanding image text */
                #imgtext {
                  position: absolute;
                  bottom: 15px;
                  left: 15px;
                  color: white;
                  font-size: 20px;
                }

                /* Closable button inside the image */
                .closebtn {
                  position: absolute;
                  top: 10px;
                  right: 15px;
                  color: white;
                  font-size: 35px;
                  cursor: pointer;
                }

                

قدم سوم :   کد جاوا اسکریپت را اضافه کنید.
مثال :

                                  // Get the expanded image
                  var expandImg = document.getElementById("expandedImg");
                  // Get the image text
                  var imgText = document.getElementById("imgtext");
                  // Use the same src in the expanded image as the image being clicked on from the grid
                  expandImg.src = imgs.src;
                  // Use the value of the alt attribute of the clickable image as text inside the expanded image
                  imgText.innerHTML = imgs.alt;
                  // Show the container element (hidden with CSS)
                  expandImg.parentElement.style.display = "block";
                }
                

<div style="text-align:center">

  <h2>Tabbed Image Gallery</h2>

  <p>بر روی تصاویر زیر کلیک کنید</p>

</div>

<!-- The four columns -->

<div class="row">

  <div class="column">

    <img src=" http://articles.tahlildadeh.com/image.axd?picture=img_nature_wide.jpg" alt="Nature" onclick="myFunction(this);">

  </div>

  <div class="column">

    <img src=" http://articles.tahlildadeh.com/image.axd?picture=img_snow_wide.jpg" alt="Snow" onclick="myFunction(this);">

  </div>

  <div class="column">

    <img src=" http://articles.tahlildadeh.com/image.axd?picture=img_mountains_wide.jpg" alt="Mountains" onclick="myFunction(this);">

  </div>

  <div class="column">

    <img src=" http://articles.tahlildadeh.com/image.axd?picture=img_lights_wide.jpg" alt="Lights" onclick="myFunction(this);">

  </div>

</div>



<div class="container">

  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>

  <img id="expandedImg" style="width:100%">

  <div id="imgtext"></div>

</div>

<script>

function myFunction(imgs) {

  var expandImg = document.getElementById("expandedImg");

  var imgText = document.getElementById("imgtext");

  expandImg.src = imgs.src;

  imgText.innerHTML = imgs.alt;

  expandImg.parentElement.style.display = "block";

}

</script>

خروجی Tab Gallery