คลิกรูปที่ Thumbnail แล้วให้แสดงเป็นรูปใหญ่

[M032]

คลิกรูปที่ Thumbnail แล้วให้แสดงเป็นรูปใหญ่ ทำยังไงค่ะ

[thatsawan]

bootstrap
http://www.w3schools.com/bootstrap/tryi ... &stacked=h

โค้ด: เลือกทั้งหมด

<a href="cinqueterre.jpg" class="thumbnail">
        <p>The Cinque Terre: A rugged portion of coast in the Liguria region of Italy.</p>      
        <img src="cinqueterre.jpg" alt="Cinque Terre" style="width:150px;height:150px">
      </a> 

[konseo]

เป็นแบบป๊อปอัพหรือเปล่าครับ มีตัวอย่างเยอะเลยครับ

[M032]

เป็นแบบป๊อปอัพหรือเปล่าครับ มีตัวอย่างเยอะเลยครับ

ใช่ค่ะ

[konseo]

งั้นที่ฮิตที่สุดคงหนีไม่พ้น fancybox นะครับ
http://fancybox.net/howto
http://fancyapps.com/fancybox/#docs

[tsukasaz]

ถ้าใช้ Joomla ที่เป็น Template มาตรฐาน ลองใช้โค้ดด้านล่างได้ครับ เพราะใน Joomla เตรียมไว้ให้อยู่แล้ว

โค้ด: เลือกทั้งหมด

<p>
	<a class="btn" href="#myModal" data-toggle="modal">
		<img src="images/01.png" alt="" width="100" />
	</a>
</p>
<div id="myModal" class="modal hide fade" tabindex="-1">
	<div class="modal-header">
		<button class="close" type="button" data-dismiss="modal">×</button>
	</div>
	<div class="modal-body">
		<p><img src="images/01.png" alt="" /></p>
	</div>
</div>

[M032]

ถ้าใช้ Joomla ที่เป็น Template มาตรฐาน ลองใช้โค้ดด้านล่างได้ครับ เพราะใน Joomla เตรียมไว้ให้อยู่แล้ว

โค้ด: เลือกทั้งหมด

<p>
	<a class="btn" href="#myModal" data-toggle="modal">
		<img src="images/01.png" alt="" width="100" />
	</a>
</p>
<div id="myModal" class="modal hide fade" tabindex="-1">
	<div class="modal-header">
		<button class="close" type="button" data-dismiss="modal">×</button>
	</div>
	<div class="modal-body">
		<p><img src="images/01.png" alt="" /></p>
	</div>
</div>

ขอบคุณค่ะ