980202 8 ارسال شده در مرداد 93 گزارش بازنشر ارسال شده در مرداد 93 سلاممن یه اسلایدر عمودی برای نمایش مطالب میخواستممثه قسمت مطالب آموزشی این سایتhttp://webatd.com/زیاد سرچ کردم اما نتیجه ای حاصل نشدیکی هم یافتم ولی نه دمو داشت نه فایلی برای دانلود گذاشته شده بودبنابراین آموزشش بی نتیجه بودhttp://wpu.ir/ir4zyچند تا سایت خارجی معرفی شده در تاپیک ...منبع چیکوئری های زیبا و کاربردی... رو هم گشتم ولی نتیجه ای نداشتاز دوستان اگر کسی سورس کدی در این مورد دیده ممنون میشم لینکشو در اختیارمون بزاره 1 نقل قول لینک به ارسال
Ghasem Paran 333 ارسال شده در مرداد 93 گزارش بازنشر ارسال شده در مرداد 93 سلامشاید این بدردتون بخوره.http://wmh.github.io/jquery-scrollbox/اون سایتی هم گذاشتین ، از این پلاگین استفاده کرده :http://www.gmarwaha.com/jquery/jcarousellite/ 2 نقل قول لینک به ارسال
jali316 29 ارسال شده در آذر 93 گزارش بازنشر ارسال شده در آذر 93 سلاممیشه توضیح بیشتری بدید من جی کوئری ها رو دانلود کردم تو پوسته گذاشتم طبق سایت که داده بودید ولی کار نکردhttp://www.gmarwaha.com/jquery/jcarousellite/ نقل قول لینک به ارسال
imanfakhar 26231 ارسال شده در آذر 93 گزارش بازنشر ارسال شده در آذر 93 باید نشانی ها را همراه با [/size]<?php bloginfo('template_directory');?> 1 نقل قول لینک به ارسال
jali316 29 ارسال شده در آذر 93 گزارش بازنشر ارسال شده در آذر 93 در هدر<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jquery.jcarousel.min.js"></script>و<script type="text/javascript">$(".basic2 .carousel").jCarouselLite({ btnNext: ".basic2 .next", btnPrev: ".basic2 .prev"});</script>و html<div class="custom-container basic2"> <a href="#" class="prev">‹</a> <div class="carousel"> <ul> <li><img src="<?php bloginfo('template_url'); ?>/images/1.jpg"/></li> <li><img src="<?php bloginfo('template_url'); ?>/images/2.jpg"/></li> <li><img src="<?php bloginfo('template_url'); ?>/images/3.jpg"/></li> <li><img src="<?php bloginfo('template_url'); ?>/images/4.jpg"/></li> <li><img src="<?php bloginfo('template_url'); ?>/images/5.jpg"/></li> </ul> </div> <a href="#" class="next">›</a> <div class="clear"></div></div>و css.carousel {visibility: visible;overflow: hidden;position: relative;z-index: 2;left: 0px;width: 480px;}.carousel ul {margin: 0px;padding: 0px;position: relative;list-style: none;z-index: 1;width: 2720px;left: -480px;}.carousel ul li {overflow: hidden;float: left;width: 160px;height: 138px;}#jcl-demo .carousel { border: 1px solid #bababa; border-radius: 10px; background-color: ghostwhite; float: left; padding-left: 10px;} #jcl-demo .carousel>ul>li>img { width: 150px; height: 118px; vertical-align:middle; margin: 10px 10px 10px 0; border-radius: 5px; }#jcl-demo a.prev, #jcl-demo a.next { display: block; width: 26px; height: 30px; line-height: 1; background-color: #333333; color: ghostwhite; text-decoration: none; font-family: Arial, sans-serif; font-size: 25px; border-radius: 8px; float: left;} #jcl-demo a.prev { margin: 50px -5px 0 0; text-indent: 7px; } #jcl-demo a.next { margin: 50px 0 0 -5px; text-indent: 10px; } #jcl-demo a.prev:hover, #jcl-demo a.next:hover { background-color: #666666; }نتیجه نداده نقل قول لینک به ارسال
imanfakhar 26231 ارسال شده در آذر 93 گزارش بازنشر ارسال شده در آذر 93 این کد یا باید بعد از کد html باشه <script type="text/javascript">$(".basic2 .carousel").jCarouselLite({ btnNext: ".basic2 .next", btnPrev: ".basic2 .prev"});</script>یا باید بعد از لود صفحه اجرا بشه <script type="text/javascript">$(document).ready(function() {$(".basic2 .carousel").jCarouselLite({ btnNext: ".basic2 .next", btnPrev: ".basic2 .prev"});});</script> 1 نقل قول لینک به ارسال
jali316 29 ارسال شده در آذر 93 گزارش بازنشر ارسال شده در آذر 93 استاد محترم فخار ضمن تشکر فراوان استایلی همانند دمو می خوام بدم توسط Developer tools گوگل کروم کدها رو امتحان کردم ولی نشد بی زحمت دور عکسها و اسلایدر نگاه کنید دقیقا به این شکل و رنگ نقل قول لینک به ارسال
imanfakhar 26231 ارسال شده در آذر 93 گزارش بازنشر ارسال شده در آذر 93 دموش فایل css داره از همون فایل استفاده کنیدتوی این نشانی بخش کاستون استایلینگ هم کدهاش رو گذاشته http://www.gmarwaha.com/jquery/jcarousellite/styling.php نقل قول لینک به ارسال
jali316 29 ارسال شده در آذر 93 گزارش بازنشر ارسال شده در آذر 93 سلام اون کدها کامل نیستند دقیقا لوکال هاست امتحان کردم نقل قول لینک به ارسال
imanfakhar 26231 ارسال شده در آذر 93 گزارش بازنشر ارسال شده در آذر 93 کدوم کدها کامل نیست؟ به نشانی ای که دادم برید کدها را به صورت کامل گذاشته 1 نقل قول لینک به ارسال
Alireza Xn 1644 ارسال شده در آذر 93 گزارش بازنشر ارسال شده در آذر 93 بهترین اسلایدر عمودی که میتونم بهتون پیشنهاد کنم FlexSlider 2 هستش که طرح های کاستوم شده زیادی داره و خیلی راحت میتونید استایل اون رو بدون دانش زیادی از CSS یا جی کوئری ادیت کنید .سبک + سرعت بالا + راحتhttp://flexslider.woothemes.com/ 2 نقل قول لینک به ارسال
jali316 29 ارسال شده در آذر 93 گزارش بازنشر ارسال شده در آذر 93 #jcl-demo .carousel { border: 1px solid #bababa; border-radius: 10px; background-color: ghostwhite; float: left; padding-left: 10px;} #jcl-demo .carousel>ul>li>img { width: 150px; height: 118px; vertical-align:middle; margin: 10px 10px 10px 0; border-radius: 5px; }#jcl-demo a.prev, #jcl-demo a.next { display: block; width: 26px; height: 30px; line-height: 1; background-color: #333333; color: ghostwhite; text-decoration: none; font-family: Arial, sans-serif; font-size: 25px; border-radius: 8px; float: left;} #jcl-demo a.prev { margin: 50px -5px 0 0; text-indent: 7px; } #jcl-demo a.next { margin: 50px 0 0 -5px; text-indent: 10px; } #jcl-demo a.prev:hover, #jcl-demo a.next:hover { background-color: #666666; }البته این آی دی دمو است که به دلخواه میشه تغییر داد jcl-demo اما ما بقی ثابت است اینا رو دادم مثل شکلی که فرستادم نشد دکمه ها درست نیومد عکس ها هم به جای افقی پشت سر هم در دو سطر قرار گرفتند سایزها رو بررسی می کنم اندازه ها درسته ولی جفت جور نمیشه نقل قول لینک به ارسال
imanfakhar 26231 ارسال شده در آذر 93 گزارش بازنشر ارسال شده در آذر 93 html:<div class="custom-container basic2"><a href="#" class="prev">‹</a><div class="carousel"> <ul> <li><img src="image/1.jpg"></li> <li><img src="image/2.jpg"></li> <li><img src="image/3.jpg"></li> <li><img src="image/4.jpg"></li> <li><img src="image/5.jpg"></li> </ul></div><a href="#" class="next">›</a><div class="clear"></div></div>css:#jcl-demo .carousel {border: 1px solid #bababa;border-radius: 10px;background-color: ghostwhite;float: left;padding-left: 10px;}#jcl-demo .carousel>ul>li>img { width: 150px; height: 118px; vertical-align:middle; margin: 10px 10px 10px 0; border-radius: 5px;}#jcl-demo a.prev, #jcl-demo a.next {display: block;width: 26px;height: 30px;line-height: 1;background-color: #333333;color: ghostwhite;text-decoration: none;font-family: Arial, sans-serif;font-size: 25px;border-radius: 8px;float: left;}#jcl-demo a.prev { margin: 50px -5px 0 0; text-indent: 7px;}#jcl-demo a.next { margin: 50px 0 0 -5px; text-indent: 10px;} #jcl-demo a.prev:hover, #jcl-demo a.next:hover { background-color: #666666; }javascript:$(".basic2 .carousel").jCarouselLite({btnNext: ".basic2 .next",btnPrev: ".basic2 .prev"}); نقل قول لینک به ارسال
imanfakhar 26231 ارسال شده در آذر 93 گزارش بازنشر ارسال شده در آذر 93 این مجموعه اصلا با rtl سازگار نیست وگرنه کدها درستهکدهای html را داخل یک دایو ltr بگذارید<div dir="ltr"><div class="custom-container basic2"><a href="#" class="prev">‹</a><div class="carousel"> <ul> <li><img src="image/1.jpg"></li> <li><img src="image/2.jpg"></li> <li><img src="image/3.jpg"></li> <li><img src="image/4.jpg"></li> <li><img src="image/5.jpg"></li> </ul></div><a href="#" class="next">›</a><div class="clear"></div></div></div> 1 نقل قول لینک به ارسال
jali316 29 ارسال شده در آذر 93 گزارش بازنشر ارسال شده در آذر 93 استاد خیلی ممنون با direction در css درست شد حال اندازه 480 می خوام عرضش زیاد بشه به ul اندازه میدم نمیشه فکر کنم اندازه در جی کوئری هست چطور عرضش رو زیاد کنم . نقل قول لینک به ارسال
imanfakhar 26231 ارسال شده در آذر 93 گزارش بازنشر ارسال شده در آذر 93 اگر از css تغییر نکنه یعنی نمی تونید تغییر بدید دیگه 1 نقل قول لینک به ارسال
jali316 29 ارسال شده در دی 93 گزارش بازنشر ارسال شده در دی 93 سلامبا اضافه کردن visible به جی کوئری میشه تعداد نمایش عکس ها رو کم و زیاد کرد که عرض اسلایدر هم کم و زیاد میشه نوشتم تا بقیه هم استفاده کنند.مثلا به این صورت :<script type="text/javascript">$(function() { $(".default .carousel").jCarouselLite({ btnNext: ".default .next", btnPrev: ".default .prev",visible: 5});});</script> نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .