PDA

توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : اسلاید شو زیبا



arshaGraphic
07-12-2014, 01:25 AM
سلام به اقا هومن
لطفا اول برید به این سایت (Only the registered members can see the link)
خب می بینی یه اسلاید شو داره من همونو برای رزبلاگ می خوام
خب اول بی دقتی نکن این با بقیه اسلاید شو ها فرق داره دقت کن
می بینی که وقتی موس میره روی گزینه های اسلاید شو دکمه عقب جلو ظاهر می شه
البته دقت کنی اصلا وقتی موس میره روی اسلاید شو این اتفاق نمی یوفته پس دقت کن
بعد اینکه می خوام دقیقا شبیه همین باشه البته یک چیزشو حذف کن می خوام اون نوشته هایی که وقت نوب رسید اون اسلاید میاد ظاهر می شه نباشه
کلا پاکش کن
تمام شد فقط همین
اها موچتو گرفتم دیدی دقت نکردی وقتی می خواد بره اسلاید بعدی کمکم اسلاید قبلی ناپدید می شه تازه علامت داره جستجو می کنه هم میاد دقت کنی حتی موقع ای که
تمام اسلاید ها یه دور رفتن بازم علامت جستجو میاد
تازه حتی وقتی روی گزینه ها کلیک می کنی به همین روش میره اسلاید بعدی
بازم دقت نکردی قبل از انتخاب گزینه اسلاید فقط یه خطه ولی موس که میره اون قسمت کزینه مربوط به اسلاسد سیا می شه
تازه نشون می ده الان دقیقا اسلاید شو کدوم اسلایدو نشون می ده
و اینکه خودت روی گزینه اسلاید کلیک می کنی قرمز می شه
می خوام دقیقا شبیه هم باشن غیر از اینکه اون نوشته ها نباشن و 5 اسلاید و سایزش (( فقط سایز اسلاید شو این باشه سایز دکمه ها تکون نخوره البته طولشو باید تغییر بدی تا جا بشه )) 468 × 60 اندازه یه بنر
ممنون بای
راستی هر 4 ثانیه بره اسلاید بعدی

admin
07-12-2014, 04:30 PM
سلام اقا ارشیا. اینم از کدی که خواسته بودید. البته با ویرایشاتی که گفتید.

<style>
*{
margin:0px; padding:0px;
}
/* Slider */
.flexslider .slides > li , .full-width .content .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden; position:relative; height:498px;}
.flexslider .slides img {width: 100%; height:100%; display: block;}
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}
.no-js .slides > li:first-child {display: block;}
.flexslider , .full-width .content .flexslider {overflow:hidden; margin: 0 auto 20px;position:relative;zoom: 1;width: 995px;height:498px;background: #000 url('images/black-loader.gif') no-repeat 50% 48%; -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}
.carousel li {margin-right: 5px}

.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; color: #FFF; display: block; position: absolute; top: 55%; cursor: pointer; opacity: 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease;}
.flex-direction-nav .flex-next {right: -30px; text-decoration:none;}
.flex-direction-nav .flex-next:before {content: '>'; text-decoration:none;}
.flex-direction-nav .flex-prev {left: -30px; text-decoration:none;}
.flex-direction-nav .flex-prev:before {content: '<'; text-decoration:none;}
.flexslider:hover .flex-next {opacity: 0.8; right: 5px; text-decoration:none;}
.flexslider:hover .flex-prev {opacity: 0.8; left: 5px; text-decoration:none;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .disabled {opacity: .3!important; cursor: default;}

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .active {opacity: 1; cursor: default;}

.flex-control-nav {width: 100%; position: absolute; bottom: -1px; text-align: center; height:13px;}
.flex-control-nav li { margin: 0 ; *display: inline; display: inline-block; zoom: 1; }
.flex-control-paging li a {display: block; cursor: pointer; text-indent: -9999px; width:100%; background:#666; height:13px; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; transition: all .5s ease;}
.flex-control-paging li a:hover { background: #000; }
.flex-control-paging li a.flex-active { background: #F88C00; cursor: default; }
.slider-caption{position: absolute;width: 100%;padding: 15px 0;background: #000;right: 0;bottom: 13px;color:#FFF;opacity:0.8;}
.slider-caption h2 a, .slider-caption h2, .full-width .content .slider-caption h2 { color:#FFF; font-size: 35px;font-family: tahoma,arial,Georgia, serif;}
.slider-caption h2, .slider-caption p{padding: 0 15px;}

/*small*/
.content .flexslider { width:660px; height:330px;}
.content .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden; position:relative; height:330px;}
.content .flexslider .slides img {width: 100%; display: block;}
.content .slider-caption h2 a,.content .slider-caption h2{font-size: 22px;}
.content .ei-slider{ height:330px;}
.content .ei-slider-loading{line-height:375px;}
.content .ei-title h3{font-size: 12px;line-height: 14px;width:435px;}
.content .ei-title h2{font-size: 22px;}

/*sidebar slider*/
#sidebar .flexslider { width:310px; height:204px; clear: both;}
#sidebar .flexslider .slides > li {height:204px;}
#sidebar .slider-caption {width: 100%;padding: 0;bottom: 0;}
#sidebar .slider-caption h2 {padding:3px 10px; line-height: 20px;}
#sidebar .slider-caption h2 a{font-size: 18px;}

.ei-slider{position: relative;width: 100%;max-width: 995px;height: 498px;margin: 0 auto 35px;-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);}
.ei-slider-loading{ width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index:990; background: #000 url('images/black-loader.gif') no-repeat 50% 48%; color: #fff;text-align: center; line-height: 520px;}
.ei-slider-large{height: 100%;width: 100%;position:relative;overflow: hidden;}
.ei-slider-large li{position: absolute;top: 0;left: 0;overflow: hidden;height: 100%;width: 100%;}
.ei-slider-large li img{width: 100%;}
.ei-title{position: absolute;right: 10%;margin-right: 0;margin-left:2%;bottom: 25%;color:#fff;opacity:0.8;}
.ei-title h2, .ei-title h3{text-align: right;}
.ei-title h2{color: #b5b5b5;font-size: 35px;font-family: tahoma,arial,Georgia, serif;background:#000;float:right;padding:5px;marg in-bottom:5px;}
.ei-title h3{clear:both;font-size: 14px;line-height: 20px;width:835px;background:#000;padding:5px;}
.ei-slider-thumbs{height: 13px;margin: 0 auto;position: relative;max-width:100%!important;}
.ei-title a{color:#FFF;}
.ei-slider-thumbs li{position: relative;float: left;height: 100%;}
.ei-slider-thumbs li.ei-slider-element{top: 0;left: 0;position: absolute;height: 100%;z-index: 10;text-indent: -9000px;background: #F88C00;}
.ei-slider-thumbs li a{ display: block;text-indent: -9000px;background: #666 ;width: 100%;height: 100%;cursor: pointer;
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.3), 0 1px 0 1px rgba(255,255,255,0.5); -moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.3), 0 1px 0 1px rgba(255,255,255,0.5); box-shadow: 0 1px 1px 0 rgba(0,0,0,0.3), 0 1px 0 1px rgba(255,255,255,0.5);
-webkit-transition: background 0.2s ease;-moz-transition: background 0.2s ease; -o-transition: background 0.2s ease; -ms-transition: background 0.2s ease; transition: background 0.2s ease;}
.ei-slider-thumbs li a:hover{background-color: #f0f0f0;}
.ei-slider-thumbs li img{ position: absolute;bottom: 50px;opacity: 0;z-index: 999;width: 100%;max-height:100px;
-webkit-transition: all 0.4s ease;-moz-transition: all 0.4s ease;-o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; transition: all 0.4s ease;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-box-reflect:
below 0px -webkit-gradient(
linear,
left top,
left bottom,
from(transparent),
color-stop(50%, transparent),
to(rgba(255,255,255,0.3))
);
}
.content .ei-slider-thumbs li img{max-height:65px;}
.ei-slider-thumbs li:hover img{opacity: 1; bottom: 13px;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10 0)";}

</style>
<script type='text/javascript' src='Only the registered members can see the link'></script>
<script type='text/javascript' src='Only the registered members can see the link'></script>



<div id="flexslider" class="flexslider">
<ul class="slides">

<li>
<a href="Only the registered members can see the link">
<img width="576" height="330" src="Only the registered members can see the link" class="attachment-slider" alt="دانلود آخرین نسخه نرم افزار یاهو مسنجر برای ویندوز Yahoo Messenger v11.5.0.228 For Windows" title="دانلود آخرین نسخه نرم افزار یاهو مسنجر برای ویندوز Yahoo Messenger v11.5.0.228 For Windows" /> </a>
</li>

<li>
<a href="Only the registered members can see the link">
<img width="576" height="330" src="Only the registered members can see the link" class="attachment-slider" alt="دانلود آخرین نسخه مرورگر اپرا برای سیستم های ۳۲ و ۶۴ بیتی Opera 22.0.1471.70 Final For Winodws x86 And x64" title="دانلود آخرین نسخه مرورگر اپرا برای سیستم های ۳۲ و ۶۴ بیتی Opera 22.0.1471.70 Final For Winodws x86 And x64" /> </a>
</li>

<li>
<a href="Only the registered members can see the link">
<img width="576" height="330" src="Only the registered members can see the link" class="attachment-slider" alt="دانلود آخرین نسخه نرم افزار اجرای فایل های پی دی اف" title="دانلود آخرین نسخه نرم افزار اجرای فایل های پی دی اف" /> </a>
</li>

<li>
<a href="Only the registered members can see the link">
<img width="576" height="330" src="Only the registered members can see the link" class="attachment-slider" alt="دانلود بازی تک تیرانداز حرفه ای ۳ برای کامپیوتر" title="دانلود بازی تک تیرانداز حرفه ای ۳ برای کامپیوتر" /> </a>
</li>

<li>
<a href="Only the registered members can see the link">
<img width="425" height="283" src="Only the registered members can see the link" class="attachment-slider" alt="دانلود سیستم عامل لینوکس مدریوا" title="دانلود سیستم عامل لینوکس مدریوا" /> </a>
</li>

</ul>
</div>


<script>
jQuery(document).ready(function() {
jQuery('#flexslider').flexslider({
animation: "fade", slideshowSpeed: 5751,
animationSpeed: 6640,
randomize: false,
pauseOnHover: true,
prevText: "",
nextText: "",
after: function(slider) {
jQuery('#flexslider .slider-caption').animate({bottom:12,}, 400)
},
before: function(slider) {
jQuery('#flexslider .slider-caption').animate({ bottom:-105,}, 400)
},
start: function(slider) {
var slide_control_width = 100/5;
jQuery('#flexslider .flex-control-nav li').css('width', slide_control_width+'%');
jQuery('#flexslider .slider-caption').animate({ bottom:12,}, 400)
}
});
});
</script>

arshaGraphic
07-12-2014, 07:26 PM
دقت کنی گفتم دکمه که اسلاید اونجاست باید قرمز باشه تازه من سایز 468 ~ 60 گفتم تازه یه خط سفید اومده زیر گذینه ها اونو می تونیحذف کنی

admin
07-12-2014, 11:49 PM
ویرایشاتی که گفتید اعمال شد.

<style>
*{
margin:0px; padding:0px;
}
/* Slider */
.flexslider .slides > li , .full-width .content .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden; position:relative; height:60px;}
.flexslider .slides img {width: 468px; height:60px; display: block;}
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}
.no-js .slides > li:first-child {display: block;}
.flexslider , .full-width .content .flexslider {overflow:hidden; margin: 0 auto 20px;position:relative;zoom: 1;width: 468px;height:72px;background: #000 url('images/black-loader.gif') no-repeat 50% 48%; -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}
.carousel li {margin-right: 5px}

.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; color: #FFF; display: block; position: absolute; top: 55%; cursor: pointer; opacity: 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease;}
.flex-direction-nav .flex-next {right: -30px; text-decoration:none;}
.flex-direction-nav .flex-next:before {content: '>'; text-decoration:none;}
.flex-direction-nav .flex-prev {left: -30px; text-decoration:none;}
.flex-direction-nav .flex-prev:before {content: '<'; text-decoration:none;}
.flexslider:hover .flex-next {opacity: 0.8; right: 5px; text-decoration:none;}
.flexslider:hover .flex-prev {opacity: 0.8; left: 5px; text-decoration:none;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .disabled {opacity: .3!important; cursor: default;}

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .active {opacity: 1; cursor: default;}

.flex-control-nav {width: 100%; position: absolute; bottom: -1px; text-align: center; height:13px;}
.flex-control-nav li { margin: 0 ; *display: inline; display: inline-block; zoom: 1; }
.flex-control-paging li a {display: block; cursor: pointer; text-indent: -9999px; width:100%; background:#666; height:13px; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; transition: all .5s ease;}
.flex-control-paging li a:hover { background: #000; }
.flex-control-paging li a.flex-active { background: red; cursor: default; }
.slider-caption{position: absolute;width: 100%;padding: 15px 0;background: #000;right: 0;bottom: 13px;color:#FFF;opacity:0.8;}
.slider-caption h2 a, .slider-caption h2, .full-width .content .slider-caption h2 { color:#FFF; font-size: 35px;font-family: tahoma,arial,Georgia, serif;}
.slider-caption h2, .slider-caption p{padding: 0 15px;}

/*small*/
.content .flexslider { width:660px; height:330px;}
.content .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden; position:relative; height:330px;}
.content .flexslider .slides img {width: 100%; display: block;}
.content .slider-caption h2 a,.content .slider-caption h2{font-size: 22px;}
.content .ei-slider{ height:330px;}
.content .ei-slider-loading{line-height:375px;}
.content .ei-title h3{font-size: 12px;line-height: 14px;width:435px;}
.content .ei-title h2{font-size: 22px;}

/*sidebar slider*/
#sidebar .flexslider { width:310px; height:204px; clear: both;}
#sidebar .flexslider .slides > li {height:204px;}
#sidebar .slider-caption {width: 100%;padding: 0;bottom: 0;}
#sidebar .slider-caption h2 {padding:3px 10px; line-height: 20px;}
#sidebar .slider-caption h2 a{font-size: 18px;}

.ei-slider{position: relative;width: 100%;max-width: 995px;height: 498px;margin: 0 auto 35px;-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);}
.ei-slider-loading{ width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index:990; background: #000 url('images/black-loader.gif') no-repeat 50% 48%; color: #fff;text-align: center; line-height: 520px;}
.ei-slider-large{height: 100%;width: 100%;position:relative;overflow: hidden;}
.ei-slider-large li{position: absolute;top: 0;left: 0;overflow: hidden;height: 100%;width: 100%;}
.ei-slider-large li img{width: 100%;}
.ei-title{position: absolute;right: 10%;margin-right: 0;margin-left:2%;bottom: 25%;color:#fff;opacity:0.8;}
.ei-title h2, .ei-title h3{text-align: right;}
.ei-title h2{color: #b5b5b5;font-size: 35px;font-family: tahoma,arial,Georgia, serif;background:#000;float:right;padding:5px;marg in-bottom:5px;}
.ei-title h3{clear:both;font-size: 14px;line-height: 20px;width:835px;background:#000;padding:5px;}
.ei-slider-thumbs{height: 13px;margin: 0 auto;position: relative;max-width:100%!important;}
.ei-title a{color:#FFF;}
.ei-slider-thumbs li{position: relative;float: left;height: 100%;}
.ei-slider-thumbs li.ei-slider-element{top: 0;left: 0;position: absolute;height: 100%;z-index: 10;text-indent: -9000px;background: #F88C00;}
.ei-slider-thumbs li a{ display: block;text-indent: -9000px;background: #666 ;width: 100%;height: 100%;cursor: pointer;
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.3), 0 1px 0 1px rgba(255,255,255,0.5); -moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.3), 0 1px 0 1px rgba(255,255,255,0.5); box-shadow: 0 1px 1px 0 rgba(0,0,0,0.3), 0 1px 0 1px rgba(255,255,255,0.5);
-webkit-transition: background 0.2s ease;-moz-transition: background 0.2s ease; -o-transition: background 0.2s ease; -ms-transition: background 0.2s ease; transition: background 0.2s ease;}
.ei-slider-thumbs li a:hover{background-color: #f0f0f0;}
.ei-slider-thumbs li img{ position: absolute;bottom: 50px;opacity: 0;z-index: 999;width: 100%;max-height:100px;
-webkit-transition: all 0.4s ease;-moz-transition: all 0.4s ease;-o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; transition: all 0.4s ease;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-box-reflect:
below 0px -webkit-gradient(
linear,
left top,
left bottom,
from(transparent),
color-stop(50%, transparent),
to(rgba(255,255,255,0.3))
);
}
.content .ei-slider-thumbs li img{max-height:65px;}
.ei-slider-thumbs li:hover img{opacity: 1; bottom: 13px;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10 0)";}

</style>
<script type='text/javascript' src='Only the registered members can see the link'></script>
<script type='text/javascript' src='Only the registered members can see the link'></script>



<div id="flexslider" class="flexslider">
<ul class="slides">

<li>
<a href="Only the registered members can see the link">
<img width="468" height="60" src="Only the registered members can see the link" class="attachment-slider" alt="دانلود آخرین نسخه نرم افزار یاهو مسنجر برای ویندوز Yahoo Messenger v11.5.0.228 For Windows" title="دانلود آخرین نسخه نرم افزار یاهو مسنجر برای ویندوز Yahoo Messenger v11.5.0.228 For Windows" /> </a>
</li>

<li>
<a href="Only the registered members can see the link">
<img width="468" height="60" src="Only the registered members can see the link" class="attachment-slider" alt="دانلود آخرین نسخه مرورگر اپرا برای سیستم های ۳۲ و ۶۴ بیتی Opera 22.0.1471.70 Final For Winodws x86 And x64" title="دانلود آخرین نسخه مرورگر اپرا برای سیستم های ۳۲ و ۶۴ بیتی Opera 22.0.1471.70 Final For Winodws x86 And x64" /> </a>
</li>

<li>
<a href="Only the registered members can see the link">
<img width="468" height="60" src="Only the registered members can see the link" class="attachment-slider" alt="دانلود آخرین نسخه نرم افزار اجرای فایل های پی دی اف" title="دانلود آخرین نسخه نرم افزار اجرای فایل های پی دی اف" /> </a>
</li>

<li>
<a href="Only the registered members can see the link">
<img width="468" height="60" src="Only the registered members can see the link" class="attachment-slider" alt="دانلود بازی تک تیرانداز حرفه ای ۳ برای کامپیوتر" title="دانلود بازی تک تیرانداز حرفه ای ۳ برای کامپیوتر" /> </a>
</li>

<li>
<a href="Only the registered members can see the link">
<img width="468" height="60" src="Only the registered members can see the link" class="attachment-slider" alt="دانلود سیستم عامل لینوکس مدریوا" title="دانلود سیستم عامل لینوکس مدریوا" /> </a>
</li>

</ul>
</div>


<script>
jQuery(document).ready(function() {
jQuery('#flexslider').flexslider({
animation: "fade", slideshowSpeed: 5751,
animationSpeed: 6640,
randomize: false,
pauseOnHover: true,
prevText: "",
nextText: "",
after: function(slider) {
jQuery('#flexslider .slider-caption').animate({bottom:12,}, 400)
},
before: function(slider) {
jQuery('#flexslider .slider-caption').animate({ bottom:-105,}, 400)
},
start: function(slider) {
var slide_control_width = 100/5;
jQuery('#flexslider .flex-control-nav li').css('width', slide_control_width+'%');
jQuery('#flexslider .slider-caption').animate({ bottom:12,}, 400)
}
});
});
</script>

seyedian
07-13-2014, 10:24 AM
سلام من سید علیرضا سیدیان هستم و داشتم که آمار رو چک میکردم که وارد اینجا شدم که درباره ی اسلاید شو سایتم بحث کردین. درخدمت همگی هستم...

arshaGraphic
07-13-2014, 08:30 PM
ممنون اسلاید شو قشنگ شده