گالری عکس زیبا (1)

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

پیش نمایش

برای استفاده از این کد گالری عکس زیبا شما باید آن را در صفحات جداگانه در بلاگ خود قرار دهید پیشنهاد یک لرن این است که آن را در پست های خود استفاده نکنید.

 

توضیحات این کد :
برای استفاده از این کد خواهشمندیم که فایل های استایل و اسکریپت را تغییر ندهید .
همانطور که در پیش نمایش مشاهده کردید دو دسته تصویر در این گالری به کار رفته شده دسته اول تصاویر کوچکی هستند که در حالت اولیه وجود دارند و تصاویر دسته دوم تصاویری هستند که پس از کلیک بر روی تصاویر کوچک نمایش داده میشوند .
برای آنکه تصاویر کوچک را تغییر دهید باید ابتدا تصاویر خود بر روی یک فضای آپلود , آپلود کنید و لینک های آن را جایگزین لینک های فعلی کنید مثلا در خط 13 این کد این تصویر وحود دارد
http://dl.1learn.ir/admin/posts/jquery-gallery/1.jpg
شما باید تصویر خود را را در مکانی اپلود و به جای این لینک قرار دهید همچنین باقی تصاویر نیز بدین گونه میباشند .
پس از آنکه تصاویر کوچک را جایگزین کردید باید تصاویر بزرگ را نیز جایگزین کنید همانند روش بالا مثلا در خط 71 این تصویر وجود دارد
http://dl.1learn.ir/admin/posts/jquery-gallery/1_2.jpg
که شما میتوانید دوباره تصویر خود را جایگزین این لینک کنید
و پس از انکه شما بر روی یک تصویر کلیک کردید تصاویر بزرگ شما باز خواهد شد که درباره ی آن تصویر توضیحاتی میتوانید بنویسید که مثلا در این کد در خط 75 میتوانید توضیحات مربوط به تصویر را وارد کنید.
این مثال که گفته شد فقط برای یک تصویر بود شما باید برای هر 16 تصویر موجود این کار ها را انجام دهید .
در این کد از عبارت ها و کامنت های فارسی برای راحتی کار شما قرار داده شده است و فقط شما باید لینک ها و توضیحات را جایگزین کنید
امیدواریم از این کد نهایت استفاده را ببرید .
<!-- یک لرن دات آی آر www.1learn.ir --- >
<script src="http://dl.1learn.ir/admin/posts/jquery-gallery/jquery.tools.min.js"></script>
<link rel="stylesheet" type="text/css"
href="http://dl.1learn.ir/admin/posts/jquery-gallery/standalone.css"/>
<link rel="stylesheet" type="text/css"
      href="http://dl.1learn.ir/admin/posts/jquery-gallery/j-g-style.css"/>
<script src="http://dl.1learn.ir/admin/posts/jquery-gallery/reflection.min.js"></script>
<!-- تصاویر -->
<div class="navi prev"></div>
<div id="thumbnails">
<div class="items">
        <div>
      <img src="http://dl.1learn.ir/admin/posts/jquery-gallery/1.jpg" />
    </div>
        <div>
      <img src="http://dl.1learn.ir/admin/posts/jquery-gallery/2.jpg" />
    </div>
        <div>
      <img src="http://dl.1learn.ir/admin/posts/jquery-gallery/3.jpg" />
    </div>
        <div>
      <img src="http://dl.1learn.ir/admin/posts/jquery-gallery/4.jpg" />
    </div>
        <div>
      <img src="http://dl.1learn.ir/admin/posts/jquery-gallery/5.jpg" />
    </div>
        <div>
      <img src="http://dl.1learn.ir/admin/posts/jquery-gallery/6.jpg" />
    </div>
        <div>
      <img src="http://dl.1learn.ir/admin/posts/jquery-gallery/7.jpg" />
    </div>
        <div>
      <img src="http://dl.1learn.ir/admin/posts/jquery-gallery/8.jpg" />
    </div>
        <div>
      <img src="http://dl.1learn.ir/admin/posts/jquery-gallery/9.jpg" />
    </div>
        <div>
      <img src="http://dl.1learn.ir/admin/posts/jquery-gallery/10.jpg" />
    </div>
        <div>
      <img src="http://dl.1learn.ir/admin/posts/jquery-gallery/11.jpg" />
    </div>
        <div>
      <img src="http://dl.1learn.ir/admin/posts/jquery-gallery/12.jpg" />
    </div>
        <div>
      <img src="http://dl.1learn.ir/admin/posts/jquery-gallery/13.jpg" />
    </div>
        <div>
      <img src="http://dl.1learn.ir/admin/posts/jquery-gallery/14.jpg" />
    </div>
        <div>
      <img src="http://dl.1learn.ir/admin/posts/jquery-gallery/15.jpg" />
    </div>
        <div>
      <img src="http://dl.1learn.ir/admin/posts/jquery-gallery/16.jpg" />
    </div>
      </div>
</div>
 
<div class="navi next"></div>
<br clear="all" />
 
<div id="box">
  <!-- توضیحات تصاویر -->
<div id="images">
<div class="items">
<!-- تصویر اول -->
<div><img src="http://dl.1learn.ir/admin/posts/jquery-gallery/1_2.jpg"></div>
<div class="info">
<h3 align="right">تصویر</h3>
<p align="right">
توضیحات این تصویر
</p>
</div>
<!-- تصویر اول -->     
<!-- تصویر دوم -->
<div><img src="http://dl.1learn.ir/admin/posts/jquery-gallery/2_2.jpg"></div>
<div class="info">
<h3 align="right">تصویر</h3>
<p align="right">
توضیحات این تصویر
</p>
</div>
<!-- تصویر دوم --> 
<!-- تصویر سوم -->
<div><img src="http://dl.1learn.ir/admin/posts/jquery-gallery/3_2.jpg"></div>
<div class="info">
<h3 align="right">تصویر</h3>
<p align="right">
توضیحات این تصویر
</p>
</div>
<!-- تصویر سوم --> 
<!-- تصویر چهارم -->
<div><img src="http://dl.1learn.ir/admin/posts/jquery-gallery/4_2.jpg"></div>
<div class="info">
<h3 align="right">تصویر</h3>
<p align="right">
توضیحات این تصویر
</p>
</div>
<!-- تصویر چهارم --> 
<!-- تصویر پنجم -->
<div><img src="http://dl.1learn.ir/admin/posts/jquery-gallery/5_2.jpg"></div>
<div class="info">
<h3 align="right">تصویر</h3>
<p align="right">
توضیحات این تصویر
</p>
</div>
<!-- تصویر پنجم --> 
<!-- تصویر ششم -->
<div><img src="http://dl.1learn.ir/admin/posts/jquery-gallery/6_2.jpg"></div>
<div class="info">
<h3 align="right">تصویر</h3>
<p align="right">
توضیحات این تصویر
</p>
</div>
<!-- تصویر ششم --> 
<!-- تصویر هفتم -->
<div><img src="http://dl.1learn.ir/admin/posts/jquery-gallery/7_2.jpg"></div>
<div class="info">
<h3 align="right">تصویر</h3>
<p align="right">
توضیحات این تصویر
</p>
</div>
<!-- تصویر هفتم --> 
<!-- تصویر هشتم -->
<div><img src="http://dl.1learn.ir/admin/posts/jquery-gallery/8_2.jpg"></div>
<div class="info">
<h3 align="right">تصویر</h3>
<p align="right">
توضیحات این تصویر
</p>
</div>
<!-- تصویر هشتم --> 
<!-- تصویر نهم -->
<div><img src="http://dl.1learn.ir/admin/posts/jquery-gallery/9_2.jpg"></div>
<div class="info">
<h3 align="right">تصویر</h3>
<p align="right">
توضیحات این تصویر
</p>
</div>
<!-- تصویر نهم --> 
<!-- تصویر دهم -->
<div><img src="http://dl.1learn.ir/admin/posts/jquery-gallery/10_2.jpg"></div>
<div class="info">
<h3 align="right">تصویر</h3>
<p align="right">
توضیحات این تصویر
</p>
</div>
<!-- تصویر دهم --> 
<!-- تصویر یازدهم -->
<div><img src="http://dl.1learn.ir/admin/posts/jquery-gallery/11_2.jpg"></div>
<div class="info">
<h3 align="right">تصویر</h3>
<p align="right">
توضیحات این تصویر
</p>
</div>
<!-- تصویر یازدهم --> 
<!-- تصویر دوازدهم -->
<div><img src="http://dl.1learn.ir/admin/posts/jquery-gallery/12_2.jpg"></div>
<div class="info">
<h3 align="right">تصویر</h3>
<p align="right">
توضیحات این تصویر
</p>
</div>
<!-- تصویر دوازدهم --> 
<!-- تصویر سیزدهم -->
<div><img src="http://dl.1learn.ir/admin/posts/jquery-gallery/13_2.jpg"></div>
<div class="info">
<h3 align="right">تصویر</h3>
<p align="right">
توضیحات این تصویر
</p>
</div>
<!-- تصویر سیزدهم --> 
<!-- تصویر چهاردهم -->
<div><img src="http://dl.1learn.ir/admin/posts/jquery-gallery/14_2.jpg"></div>
<div class="info">
<h3 align="right">تصویر</h3>
<p align="right">
توضیحات این تصویر
</p>
</div>
<!-- تصویر چهاردهم --> 
<!-- تصویر پانزدهم -->
<div><img src="http://dl.1learn.ir/admin/posts/jquery-gallery/15_2.jpg"></div>
<div class="info">
<h3 align="right">تصویر</h3>
<p align="right">
توضیحات این تصویر
</p>
</div>
<!-- تصویر پانزدهم --> 
<!-- تصویر شانزدهم -->
<div><img src="http://dl.1learn.ir/admin/posts/jquery-gallery/16_2.jpg"></div>
<div class="info">
<h3 align="right">تصویر</h3>
<p align="right">
توضیحات این تصویر
</p>
</div>
<!-- تصویر شانزدهم --> 
</div>
 <!-- کلید قبل و بعد -->
    <div class="navi prev"></div>
    <div class="navi next"></div>
    <a class="close" href="#"> &nbsp; &nbsp; &nbsp; </a>
  </div>
</div>
 
<script>
  $(function() {
 
    // thumbnail scrollable
  $("#thumbnails").scrollable({size: 5, clickable: false})
                .find("img").each(function(index) {
 
  // thumbnail images trigger the overlay
  $(this).overlay({
 
  effect: 'apple',
  target: '#box',
  mask: { maskId: 'mask' },
 
  // when box is opened, scroll to correct position (in 0 seconds)
  onLoad: function() {
  $("#images").data("scrollable").seekTo(index, 0);
  }
  });
  });
 
    // scrollable inside the box.
  $("#images").scrollable();
 
    // enable tooltips for the images
  $("#images img").tooltip({
  position: "bottom center",
  offset: [-75, -30],
  opacity: 0.8,
  effect: 'fade',
 
  // position tooltips relative to the parent scrollable
  relative: true
  });
 
    // enable reflections
  $("#thumbnails img").reflect({height: 0.5, opacity: 0.6});
 
    });
</script>
 
<!--یک لرن دات آی آر-->

فرادرس

برچسب ها : ، ، ، ، ،