PDA

View Full Version : سوال: کار نکردن گالری؟


پیام حیاتی
پنج شنبه 29 آبان 1393, 15:17 عصر
سلام
من طبق یک آموزش خواستم از یک پلاگین برای نمایش تصاویر در سایت استفاده کنم :
http://www.jacklmoore.com/colorbox/
مراحل رو انجام میدم اما نتیجه ای حاصل نمیشه!
این کدهای بنده :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Gallery</title>


<script src="jquery.colorbox-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery-1.11.1.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">


<script>
$(document).ready(function(e) {
$('a.gallery').colorbox({rel:'gal'});
});
</script>


</head>


<body>


<div class="gallery">
<a href=""><img src="img/1.jpg" ></a>
<a href=""><img src="img/2.jpg" ></a>
<a href=""><img src="img/3.jpg" ></a>
<a href=""><img src="img/4.jpg" ></a>
<a href=""><img src="img/5.jpg" ></a>
</div>


</body>
</html>
mehdi.mousavi
جمعه 30 آبان 1393, 06:58 صبح
سلام.
من فرصت آزمایش کدهاتون رو ندارم، اما با اولین نگاه ایراد احتمالی رو حدس زدم. شما باید خط 8 در کد فوق رو، به
خط 12 منتقل کنید. در واقع ابتدا باید jQuery رو معرفی کنید، سپس Colorbox رو چون Colorbox بر مبنای jQuery نوشته
شده. ضمن اینکه یکی از دو خط 9 یا 10 رو حذف کنید (اینکه در یک صفحه از دو نسخه متفاوت از jQuery بخواهید استفاده کنید
صحیح نیست).

موفق باشید.
پیام حیاتی
جمعه 30 آبان 1393, 20:58 عصر
ممنون آقا مهدی کدها رو به این شکل تغییر دادم درست شد :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Gallery</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="jquery-1.11.1.js"></script>
<script src="jquery.colorbox-min.js"></script>

<script>
$(document).ready(function(e) {
$('a.gallery').colorbox({rel:'gal'});
});
</script>
</head>
<body>
<a class="gallery" href="img/1.jpg"><img src="img/1.jpg"></a>
<a class="gallery" href="img/2.jpg"><img src="img/2.jpg"></a>
<a class="gallery" href="img/3.jpg"><img src="img/3.jpg"></a>
<a class="gallery" href="img/4.jpg"><img src="img/4.jpg"></a>
<a class="gallery" href="img/5.jpg"><img src="img/5.jpg"></a>
</body>
</html>