ببینید الآن این کد کار می کنه ولی این اصلا بدرد من نمیخوره چون آمده اولا به تگ a کد داده نه به خود tag img و بعد هم اینکه یک div دیگه برای سایز اصلی عکس درست کرده که اصلا خوب نیست. من یک img تو محتوای پست دارم که می تونم با جاوا اسکریپت به اون کلاس بدم... ولی نمیتونم دیگه div و ... اینها اضافه کنم. چون تو آموزشش نوشته بود از طریق کد جاوا اسکریپت هم میشه من فکر کردم با کمی کد بشه!
کد HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>Bootstrap - Lightbox</title>
<link rel="stylesheet" href="http://www.jasonbutz.info/bootstrap-lightbox/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="http://www.jasonbutz.info/bootstrap-lightbox/assets/css/bootstrap-lightbox.min.css">
</head>
<body data-spy="scroll" data-target=".navbar">
<a data-toggle="lightbox" href="#demoLightbox" class="thumbnail">
<img src="http://www.jasonbutz.info/bootstrap-lightbox/assets/img/small.png"
alt="Click to view the lightbox">
</a>
<div id="demoLightbox" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class='lightbox-content'>
<img src="http://www.jasonbutz.info/bootstrap-lightbox/assets/img/large.png">
<div class="lightbox-caption"><p>Your caption here</p></div>
</div>
</div>
<script src="http://www.jasonbutz.info/bootstrap-lightbox/assets/js/jquery.min.js"></script>
<script src="http://www.jasonbutz.info/bootstrap-lightbox/assets/js/bootstrap.min.js"></script>
<script src="http://www.jasonbutz.info/bootstrap-lightbox/assets/js/bootstrap-lightbox.min.js"></script>
</body>
</html>