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

กฎการใช้บอร์ด
คำถามหมวดนี้ ควรระบุ รายละเอียดของ Server OS, เวอร์ชั่น ของ PHP, CMS ที่ท่านใช้
รวมถึง Hosting หรือ Control Panel Hosting

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ

BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด

กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: คลิกรูปที่ Thumbnail แล้วให้แสดงเป็นรูปใหญ่

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

โดย M032 » 09/02/2016 1:25 pm

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>
ขอบคุณค่ะ

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

โดย tsukasaz » 09/02/2016 11:31 am

ถ้าใช้ 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>

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

โดย konseo » 09/02/2016 10:07 am

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

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

โดย M032 » 09/02/2016 9:30 am

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

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

โดย konseo » 09/02/2016 8:53 am

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

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

โดย thatsawan » 06/02/2016 11:48 am

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> 

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

โดย M032 » 06/02/2016 11:30 am

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

ข้างบน