PDA

View Full Version : اسلایدشویی برای نمایش عکس به همراه لینک و متن و ...


bftarane
یک شنبه 28 مهر 1392, 09:09 صبح
سلام.
اسلایدشویی می شناسید که بشه در یه قسمتش عکس مثلاً محصول رو نشون داد و یه قسمت هم داشته باشه که بشه مثلاً قیمت و لینک ادامه جزئیات و ... رو بشه توش نشون داد؟
ممنون میشم اگه آموزش یا حالا اسلایدشوی رایگانی که بشه دانلود کرد معرفی کنید.
اگه آموزش باشه خیلی بهتره.
Omid Jackson
یک شنبه 28 مهر 1392, 10:41 صبح
خودتون یه پلاگین جی کوئری تعریف کنین
یه فایل js درست کنین و کد زیر رو توش قرار بدین:

(function($){

}(jQuery));
داخل این باید پلاگین رو تعریف کنین به صورت زیر:

(function($){
$.fn.pluginNames = function() {
}
}(jQuery));
بعد دیگه با دستورات ساده میتونین پلاگین رو بنویسین که بعد راحت میتونین به شکل زیر فراخونی کنینش:

$("#id").pluginNames();
سعی میکنم یه پلاگین ساده آماده کنم با توضیحات قرار بدم
Omid Jackson
یک شنبه 28 مهر 1392, 10:49 صبح
قبلا یه اسلاید شو ساده درست کرده بودم الآن پیداش کردم

(function($) {
$.fn.slideImg = function() {
var $el = $(this);
var slider = function() {
$el.prepend($el.children(":last-child").clone());
$el.children(":last-child").fadeOut(1000);
setTimeout(function() {
$el.children(":last-child").remove()
},1000);
setTimeout(slider,4000);
}
setTimeout(slider,4000);
}
}(jQuery));


#slider img {
position: absolute;
}



$(document).ready(function() {
$("#slider").slideImg();
});
bftarane
یک شنبه 28 مهر 1392, 10:54 صبح
منم یه آموزش ساده پیدا کردم. ببینم می تونم کاری کنم یا نه. خیلی گشتم یه مدلایی پیدا کردم اومده بودن به alt ایمیج که مقدار می دادن در caption اسلایدشو نشون می داد ولی من اون مدلی نمی خوام.
مشکل وقت اگه نداشتم دوست داشتم خودم از روشی که شما گفتید انجام بدم. ولی اگه بتونم آمادش رو پیدا کنم بهتره.
http://snook.ca/archives/javascript/simplest-jquery-slideshow
Omid Jackson
یک شنبه 28 مهر 1392, 11:09 صبح
خط 2 پلاگینی به اسم slideImg درست کردم
خط 4 یه تابع به اسم slider تعریف کردم
خط 5 میاد از اول دیو که صدا زده این تابع رو از آخرین عکس مشابه رو اضافه میکنه (بی دردسرترین راه که به ذهنم اومد، چون برای اینکه z-index بدیم مشکل ساز میشد و دردسر داشت)
خط 6 آخرین فرزند دیو که آخرین عکس میشه از fadeOut برای خروج استفاده میشه
خط 7 تا 9 برای حذف کردن عکس رویی هست که وقفه 1 ثانیه گذاشتم تا fadeOut کارش رو انجام بده بعد این عکس رویی رو حذف میکنه (آخرین عکس موجود)
خط 10 هم هر 4 ثانیه تابع رو صدا میزنه تا افکت روی عکس بعد اعمال بشه
خط 12 رو گذاشتم که وقتی لود شد عکس رویی 4 ثانیه نمایش داده بشه و بعد شروع کنه به صدا زدن تابع
دلیل position عکس ها برای این بوده که عکس ها به روی هم بیفتن
bftarane
یک شنبه 28 مهر 1392, 11:14 صبح
الآن پست 3 رو دیدم. می رم امتحان می کنم اگه سوالی داشتم می یام می پرسم.
Omid Jackson
یک شنبه 28 مهر 1392, 11:53 صبح
این اسلادشو (http://jsfiddle.net/OmidJackson/MM5ZE/) رو آماده کردم که ببینین کار مشکلی نیست
bftarane
یک شنبه 28 مهر 1392, 12:07 عصر
من متوجه نشدم از کدهای شما چطور استفاده کنم.

من می خوام با دیوی که کلاس conainer داره همراه با هر المنتی (شامل عکس، لینک، متن) که توش هست مثل یه عنصر واحد رفتار بشه.

<html>
<head>
<style type="text/css">
#slider img {
position: absolute;
}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
(function($) {
$.fn.slideImg = function() {
var $el = $(this);
var slider = function() {
$el.prepend($el.children(":last-child").clone());
$el.children(":last-child").fadeOut(1000);
setTimeout(function() {
$el.children(":last-child").remove()
},1000);
setTimeout(slider,4000);
}
setTimeout(slider,4000);
}
}(jQuery));


$(document).ready(function() {
$("#slider").slideImg();
});
</script>
</head>
<body>

<div id="slider">

<div class="container"><img src="Images/s1.jpg"/><a href="#">لینک<a></div>
<div class="container"><img src="Images/s2.jpg"/></div>
<div class="container"><img src="Images/s4.jpg"/></div>
</div>

</body>
</html>
Omid Jackson
یک شنبه 28 مهر 1392, 12:28 عصر
شما اون نمونه کد که گذاشتم رو ببینین
اینجا باید یه دیو با کلاس container بذارین بعد چندین فرزند دیو بذارین که هر فرزند عکس و لینک داشته باشن
بعد slideImg که میذارین برای container میاد دونه دونه فرزندها رو میگیره و افکت رو روشون اعمال میکنه
حالا این کاری که کردین، شما اون استایلی که دادین باید تغییر بدین

#slider div
از این استفاده کنین تا همه ی دیو های فرزند slider برروی هم بیفتن و background-color بهش بدین که محتویات دیو زیری معلوم نشه
bftarane
یک شنبه 28 مهر 1392, 12:48 عصر
این اسلادشو (http://jsfiddle.net/OmidJackson/MM5ZE/) رو آماده کردم که ببینین کار مشکلی نیست
ممنون این دقیقاً همون چیزی بود که می خواستم.
bftarane
یک شنبه 28 مهر 1392, 15:33 عصر
چرا وقتی margin-top رو زیاد می کنم برای span به شکل زیر


#slider div a, #slider div span {
width: 100px;
text-align: center;
float: right;
clear: right;
margin-right: 50px;
margin-top: 120px;
text-decoration: none;
}
به صورت زیر میشه؟ نوشته های داخل Span می افتن روی هم؟
112065
متوجه شدم باید height رو در slider div# زیاد می کردم.
Omid Jackson
یک شنبه 28 مهر 1392, 16:44 عصر
چرا وقتی margin-top رو زیاد می کنم برای span به شکل زیر


#slider div a, #slider div span {
width: 100px;
text-align: center;
float: right;
clear: right;
margin-right: 50px;
margin-top: 120px;
text-decoration: none;
}
به صورت زیر میشه؟ نوشته های داخل Span می افتن روی هم؟
112065
متوجه شدم باید height رو در slider div# زیاد می کردم.
دلیلش اینه که از دیو ها میزنن بیرون
اگر یادتون باشه گفتم background-color بذارین که وقتی روی هم میفتن دیو های زیری معلوم نشن
دلیل رو گفتم که بقیه که نگاه میکنن بدونن علتش چی هست