มูลนิธิภาพถ่าย
มูลนิธิให้การตอบสนองภาพที่คุณสามารถสร้างภาพขนาดย่อป๊อปอัปดื่ม
ลอง»รูปขนาดย่อ
ใน <img> องค์ประกอบภายนอกเพิ่ม <a> ภาพองค์ประกอบเป็นสมอลิงค์
ใน <a> เพิ่มแท็ก .th ภาพระดับเป็นภาพขนาดเล็ก เลื่อนเมาส์ไปที่ด้านบนของกรอบสีฟ้าอ่อนปรากฏขึ้น:
 | ภาพที่ตอบสนองต่อ มูลนิธิรูปภาพในการตอบสนองต่อรูปแบบเริ่มต้น เราสามารถตั้งค่าเบราว์เซอร์ของคุณเพื่อดูขนาดหน้าในการขยายผลรูปตัวอย่าง |
|---|
เนื้อภาพถ่าย
เราสามารถ .th ระดับเพิ่ม .radius การตั้งค่ารูปย่อชั้นเนื้อ:
ตัวอย่าง
<img src = "paris.jpg" alt = "ปารีส">
</ A>
ลอง»
ป๊อปกระชับ
มูลนิธิสามารถทำได้ป๊อปอัพภาพได้อย่างง่ายดาย
เพื่อสร้างหน้าต่างเปลือกใน <ul> เพื่อเพิ่มองค์ประกอบ .clearing-thumbs ชั้นเรียนและ data-clearing คุณสมบัติ ใน <ul> ในรายการของภาพเพิ่ม
หมายเหตุ: ป๊อบอัพภาพต้องใช้ JavaScript ดังนั้นจะต้องมีการเริ่มต้นก่อนที่จะใช้มูลนิธิ JS
ตัวอย่าง
<li> <a href = "ชั้น rock600x400.jpg" = "th"> <img src =" rock200x100.jpg "> </ a> </ li>
<li> <a href = "ชั้น skies600x400.jpg" = "th"> <img src =" skies200x100.jpg "> </ a> </ li>
<li> <a href = "ชั้น lights600x400.jpg" = "th"> <img src =" lights200x100.jpg "> </ a> </ li>
</ ul>
<! - เตรียมมูลนิธิ JS ->
<script>
$ (เอกสาร) .ready (ฟังก์ชั่น () {
$ (เอกสาร) .foundation ();
})
</ script>
ลอง»
คำอธิบายข้อความภาพ
คุณสามารถเพิ่ม data-caption แอตทริบิวต์ภาพแต่ละภาพในการตั้งค่ารายละเอียดของภาพ:
ตัวอย่าง
<li> <a href = "ชั้น rock600x400.jpg" = "th"> <img ข้อมูลคำอธิบายภาพ =" เทศน์ร็อค "src =" rock200x100.jpg "> </ a> </ li>
<li> <a href = "ชั้น skies600x400.jpg" = "th"> <img ข้อมูลคำอธิบายภาพ =" พระอาทิตย์ขึ้นท้องฟ้า "src =" skies200x100.jpg "> </ a> </ li>
<li> <a href = "ชั้น lights600x400.jpg" = "th"> <img ข้อมูลคำอธิบายภาพ =" แสงเหนือ "src =" lights200x100.jpg "> </ a> </ li>
</ ul>
ลอง»
| เคล็ดลับ: คุณสามารถเพิ่มแอตทริบิวต์ข้อมูลคำอธิบายภาพในองค์ประกอบ HTML เช่นข้อมูลคำอธิบายภาพ = "<h2> ผาหิน </ h2> <p> ตั้งอยู่ในประเทศนอร์เวย์ </ p>" |
|---|
แสดงเฉพาะภาพขนาดย่อ
เมื่อคุณต้องการที่จะบรรลุภาพขนาดย่อที่จะปรากฏเฉพาะเมื่อคุณสามารถ <ul> ใช้ .clearing-feature การเรียนและ <li> การใช้ .clearing-featured-img ระดับ
ตัวอย่าง
<li> <a href = "ชั้น rock600x400.jpg" = "th"> <img ข้อมูลคำอธิบายภาพ =" เทศน์ร็อค "src =" rock200x100.jpg "> </ a> </ li>
<li> <a href = "ชั้น skies600x400.jpg" = "th"> <img ข้อมูลคำอธิบายภาพ =" พระอาทิตย์ขึ้นท้องฟ้า "src =" skies200x100.jpg "> </ a> </ li>
<li class = "การล้างแบบ -img"> <a href = ระดับ "lights600x400.jpg" = "th"> <img ข้อมูลคำอธิบายภาพ = "แสงเหนือ" src = "lights200x100.jpg"> </ a> < / li>
</ ul>
ลอง»