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

مقالات برنامه نویسی

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

در این مقاله می آموزید که چگونه یک گالری تصویر که بصورت 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";
                }

نمونه مثال Tab Gallery:



<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>