سبد خرید (0)

تبلیغات

آموزش foundation-عکس ها

عکس ها در فریم ورک foundation

فریم ورک foundation عکس های واکنش گرا و افکت های بند انگشتی خوب و جعبه های نور(lightbox) زیبایی را ارائه می دهد:


عکس های بند انگشتی 

یک عنصر <a> را به دور یک عنصر <img> قرار دهید تا از عکس مورد نظر بعنوان لنگرگاه استفاده کنید. 

برای اینکه عکس مورد نظر را به صورت بند انگشتی در آورید، کلاس th. را به عنصر <a> اضافه کنید. این کلاس همچنین باعث می شود که به هنگام hover بر روی عکس، یک کادر بیرونی به رنگ آبی نمایش داده شود:

مثال

<a href="paris.jpg" class="th">
  <img src="paris.jpg" alt="Paris">
</a>

نتیجه:

خودتان امتحان کنید »
Note

عکس های واکنش گرا
عکس ها در فریم ورک foundation به طور پیش فرض واکنش گرا می باشند. پنجره ی مرورگر خود را تغییر اندازه دهید تا مشاهده کنید که چطور عکس بالا در صفحه های نمایش کوچکتر، مقیاس دهی می شود.


عکس های بند انگشتی گرد شده

اگر که می خواهید یک عکس بند انگشتی به صورت گرد شده داشته باشید، کلاس های radius. و th. را اضافه کنید: 

مثال

<a href="paris.jpg" class="th radius">
  <img src="paris.jpg" alt="Paris">
</a>

نتیجه:

خودتان امتحان کنید »

جعبه ی نور مسطح

یک جعبه ی نور درواقع یک modal است که به همراه یک عکس، تمام صفحه را پر می کند، درست مثل یک گالری عکس. 

برای ایجاد یک جعبه ی نور مسطح، کلاس clearing-thumbs. و خصوصیت data-clearing را به یک عنصر <ul> اضافه کنید. حالا آیتم های لیست را اضافه کنید و به وسیله ی لینک ها، عکس ها را اضافه کنید.

نکته: جعبه های نور مسطح، نیاز به جاوااسکریپت دارند. پس به یاد داشته باشید که فایل جاوااسکریپت فریم ورک foundation را مقدار دهی اولیه کنید: 

مثال

<ul class="clearing-thumbs" data-clearing>
  <li><a href="rock600x400.jpg" class="th"><img src="rock200x100.jpg"></a></li>
  <li><a href="skies600x400.jpg" class="th"><img src="skies200x100.jpg"></a></li>
  <li><a href="lights600x400.jpg" class="th"><img src="lights200x100.jpg"></a></li>
</ul>

<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

نتیجه- بر روی عکس ها کلیک کنید تا افکت جعبه ی نور را مشاهده کنید:

خودتان امتحان کنید »
Note

در مثال بالا، عنصر <img> مورد نظر، درواقع عکسی است که قبل از باز کردن جعبه ی نور، نمایش داده می شود. و عکسی که درونخود عنصر <a> قرار دارد(مقدار href) درواقع همان عکسی است که درون جعبه ی نور نمایش داده می شود. بعضی مواقع ممکن است شما عکس هایی با اندازه ی متفاوت را بخواهید. این به شما بستگی دارد. 


متن عنوان جعبه ی نور

برای اضافه کردن یک عنوان به هر عکس، خصوصیت data-caption را اضافه کنید: 

مثال

<ul class="clearing-thumbs" data-clearing>
  <li><a href="rock600x400.jpg" class="th"><img data-caption="The Pulpit Rock"src="rock200x100.jpg"></a></li>
  <li><a href="skies600x400.jpg" class="th"><img data-caption="Sunrise Skies"src="skies200x100.jpg"></a></li>
  <li><a href="lights600x400.jpg" class="th"><img data-caption="Northern Lights"src="lights200x100.jpg"></a></li>
</ul>

نتیجه- بر روی عکس ها کلیک کنید تا متن عنوان را مشاهده کنید: 

خودتان امتحان کنید »
Note

نکته: شما همچنین می توانید عناصر HTML را درون خصوصیت data-caption قرار دهید، مانند زیر: 

"<data-caption="<h2>Pulpit Rock</h2><p>Located in Norway</p


شروع از یک عکس خاص

اگر می خواهید که گالری عکس خودتان را به جای نمایش دادن عکس های چندگانه، با یک عکس تکی باز کنید، کافی است کلاس clearing-feature. را به عنصر <ul> و کلاس clearing-featured-img. را به عنصر <li> مد نظر خود اضافه کنید:

مثال

<ul class="clearing-thumbs clearing-feature" data-clearing>
  <li><a href="rock600x400.jpg" class="th"><img data-caption="The Pulpit Rock"src="rock200x100.jpg"></a></li>
  <li><a href="skies600x400.jpg" class="th"><img data-caption="Sunrise Skies"src="skies200x100.jpg"></a></li>
  <li class="clearing-featured-img"><a href="lights600x400.jpg" class="th"><img data-caption="Northern Lights" src="lights200x100.jpg"></a></li>
</ul>

نتیجه:

خودتان امتحان کنید »

دیدگاه‌ها  

+1 # mahdi kalhor 1395-02-06 17:31
مثال های جعبه نور خراب هستند
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1395-02-06 18:26
با تشکر از شما. مثال ها به زودی اصلاح می شوند.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت پرداخت آنلاین - بانک پارسیان پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان