آموزش foundation-عکس ها
عکس ها در فریم ورک foundation
فریم ورک foundation عکس های واکنش گرا و افکت های بند انگشتی خوب و جعبه های نور(lightbox) زیبایی را ارائه می دهد:
عکس های بند انگشتی
یک عنصر <a> را به دور یک عنصر <img> قرار دهید تا از عکس مورد نظر بعنوان لنگرگاه استفاده کنید.
برای اینکه عکس مورد نظر را به صورت بند انگشتی در آورید، کلاس th. را به عنصر <a> اضافه کنید. این کلاس همچنین باعث می شود که به هنگام hover بر روی عکس، یک کادر بیرونی به رنگ آبی نمایش داده شود:
مثال
<img src="paris.jpg" alt="Paris">
</a>
نتیجه:
 |
عکس های واکنش گرا |
|---|
عکس های بند انگشتی گرد شده
اگر که می خواهید یک عکس بند انگشتی به صورت گرد شده داشته باشید، کلاس های radius. و th. را اضافه کنید:
مثال
<img src="paris.jpg" alt="Paris">
</a>
نتیجه:
جعبه ی نور مسطح
یک جعبه ی نور درواقع یک modal است که به همراه یک عکس، تمام صفحه را پر می کند، درست مثل یک گالری عکس.
برای ایجاد یک جعبه ی نور مسطح، کلاس clearing-thumbs. و خصوصیت data-clearing را به یک عنصر <ul> اضافه کنید. حالا آیتم های لیست را اضافه کنید و به وسیله ی لینک ها، عکس ها را اضافه کنید.
نکته: جعبه های نور مسطح، نیاز به جاوااسکریپت دارند. پس به یاد داشته باشید که فایل جاوااسکریپت فریم ورک foundation را مقدار دهی اولیه کنید:
مثال
<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>
نتیجه- بر روی عکس ها کلیک کنید تا افکت جعبه ی نور را مشاهده کنید:
|
در مثال بالا، عنصر <img> مورد نظر، درواقع عکسی است که قبل از باز کردن جعبه ی نور، نمایش داده می شود. و عکسی که درونخود عنصر <a> قرار دارد(مقدار href) درواقع همان عکسی است که درون جعبه ی نور نمایش داده می شود. بعضی مواقع ممکن است شما عکس هایی با اندازه ی متفاوت را بخواهید. این به شما بستگی دارد. |
|---|
متن عنوان جعبه ی نور
برای اضافه کردن یک عنوان به هر عکس، خصوصیت data-caption را اضافه کنید:
مثال
<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>
نتیجه- بر روی عکس ها کلیک کنید تا متن عنوان را مشاهده کنید:
|
نکته: شما همچنین می توانید عناصر HTML را درون خصوصیت data-caption قرار دهید، مانند زیر: "<data-caption="<h2>Pulpit Rock</h2><p>Located in Norway</p |
|---|
شروع از یک عکس خاص
اگر می خواهید که گالری عکس خودتان را به جای نمایش دادن عکس های چندگانه، با یک عکس تکی باز کنید، کافی است کلاس clearing-feature. را به عنصر <ul> و کلاس clearing-featured-img. را به عنصر <li> مد نظر خود اضافه کنید:
مثال
<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>
نتیجه:
- نوشته شده توسط احسان عباسی
- بازدید: 3895
دیدگاهها
مثال های جعبه نور خراب هستند
با تشکر از شما. مثال ها به زودی اصلاح می شوند.