سلام. خوبین؟
براتون پلاگین جی کوئری لایت باکس (جعبه سبک) آوردم. این پلاگین رو من نساختم و از سایت
http://www.jacklmoore.com/colorbox
برداشتم و براتون هم سرهم بندیش کردم
و طریقه استفادش رو نوشتم.
خُب بریم سراغ آموزش.
کدهای زیر رو تو هد کپی کنید. اگه خواستید میتونید برای سبک شدن قالب اون دوتا فایل جی کوئری رو در آخر قالبتون قبل بشته شدن تگ بادی بزارید.
در مورد اون width و height که در کد زیر میبینید باید بگم که اونا اندازه این باکس هست. مثلا نوشته طول 50% یعنی اندازه طول این باکس 50 درصد اندازه مرورگر شماست. طول و عرضش با اندازه مرورگر شما تنظیم میشه
<link type="text/css" rel="stylesheet" href="http://up.koreserials.ir/up/koreserials/Other/LightBox/colorbox.css"><script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://up.koreserials.ir/up/koreserials/Other/LightBox/jquery.colorbox-min.js"></script>
<script>
$(document).ready(function(){
$(".Reza").colorbox({width:"50%", height:"75%"});
});
</script>
حالا باید به لینکی که میخواید کلاس Reza رو بدید
تو قسمت آدرس لینک هم باید آدرس عکس رو قرار بدبد
مثل زیر
<a class="Reza" href="آدرس عکس">متن یا عکس به صورت کوچیک</a>حالا اگه چندتا عکس دارید که دلتون میخواد بصورت گالری بازش کنید باید به لینک ها علاوه بر کلاس Reza عبارت rel="gal" رو هم اضاف کنید
مثل زیر
<a class="Reza" href="https://rozup.ir/up/pixelha/Pictures/people/player/Sergio-Ramos-2.jpg" rel="gal">عکس یک</a><br><a class="Reza" href="https://rozup.ir/up/pixelha/Pictures/people/game-and-cartoon-character/Minion-Banana.jpg" rel="gal">عکس دو</a><br>
<a class="Reza" href="https://rozup.ir/up/pixelha/Pictures/animal/domestic/cute-sleep-cat.jpg" rel="gal">عکس سه</a><br>
بزودی قالبم براتون ترجمه میکنم میزارم
موفق باشید
