آموزش Image Grid

دانلود آموزش طراحی سایت

 آموزش ساخت Image Grid

در این مقاله می آموزید که چطور یک شبکه تصویر (image grid) با استفاده از CSS و جاوا اسکريپت ایجاد کنید

در این مقاله می آموزید چطور یک گالری تصویر ایجاد کنید که تعداد چهار تصویر یا دو تصویر یا تصاویر تمام عرض با کلیک بر روی یک دکمه ، تمایز ایجاد کند.

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

            <div class="row">
  <div class="column">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=stones.jpg">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=rocks.jpg">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=falls2.jpg">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=paris.jpg">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=nature_4.jpg">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=mist.jpg">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=paris.jpg">
  </div>
  <div class="column">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=new-nature.jpg">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=ocean.jpg">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=stones.jpg">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=mountainskies.jpg">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=rocks.jpg">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=new-nature.jpg">
  </div>
  <div class="column">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=stones.jpg">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=rocks.jpg">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=falls2.jpg">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=paris.jpg">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=nature_4.jpg">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=mist.jpg">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=paris.jpg">
  </div>
  <div class="column">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=new-nature.jpg">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=ocean.jpg">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=stones.jpg">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=mountainskies.jpg">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=rocks.jpg">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=new-nature.jpg">
  </div>
</div>

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

برای ایجاد یک چیدمان واکنش گرا از CSS Flexbox استفاده کنید

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

با استفاده از کد جاوا اسکریپت یک Grid View قابل کنترل ایجاد کنید:

نمونه مثال Image Grid: