اسلایدر

[mahdi.a 432]

سلام دوستان ...

چه جوری میشه به متنهای یک اسلایدر به محض وارد شدنشون به روی عکس افکت داد .

مثل سایت زیر اگه ببینید متنهای هر عکس موقع نمایش یه افکت دارن ...

لینک سایت

ممنون میشم راهنمایی کنید ...

[mahdi.a 432]

دوستان اگه میشه بگید چه جوری میتونم روی هر عکس متن بزارم + افکت به متن

اسلایدر هم روی سایت هستش که ادرسش هم تو امضا هست

[Parsa 23463]

سایت ..یلتره

افزونه های اسلایدر زیاد هستند که افکتها مختلفی دارند

[mahdi.a 432]

سایت ..یلتر نیست !!! ...

اگه شما راهنمایی کنید که من خودم یه متن روی هر عکس بیارم و به هر کدوم یه افکت ساده بدم ، خیلی عالی میشه ...

لطفا راهنمایی کنید

[Morteza 34190]

شما در کنار هر عکس یک المان مثلا span قرار بدید

بعد بهش خاصیت position:absolute بدید. بعد به عکس position:related بدید.

حالا به المان مقدار z-index بیشتر بدید و ارتفاع و پهنای برابر عکس رو بدید.

با اینکار بصورت لایه میاد روی عکس

موفق باشید

[mahdi.a 432]

سلام اقا مرتضی

من چیزی رو که گفتید تست کردم ولی نشد ...!!!

اگه میشه بیشتر راهنمایی کنید ...

الان این کدهای اسلایدر تو فایل header.php هستش

<div class="sl">

<div class="slider">

<section>

<div id="viewport-shadow">

<div id="viewport">

<div id="box">

<figure class="slide"><a target="_blank" href="<?php bloginfo('url'); ?>/دانلود-سریال-پایتخت-2-قسمت-4/">

<img src="<?php bloginfo('template_url'); ?>/pic/22.jpg" alt="22" /></a></figure>

<figure class="slide"><a target="_blank" href="<?php bloginfo('url'); ?>/دانلود-سریال-پایتخت-2-قسمت-4/">

<img src="<?php bloginfo('template_url'); ?>/pic/21.jpg" alt="21" /></a></figure>

<figure class="slide"><a target="_blank" href="<?php bloginfo('url'); ?>/دانلود-سریال-همه-خانواده-من-قسمت-4/">

<img src="<?php bloginfo('template_url'); ?>/pic/20.jpg" alt="20" /></a></figure>

<figure class="slide"><a target="_blank" href="<?php bloginfo('url'); ?>/دانلود-فیلم-روزهای-زندگی/">

<img src="<?php bloginfo('template_url'); ?>/pic/18.jpg" alt="18" /></a></figure>

<figure class="slide"><a target="_blank" href="<?php bloginfo('url'); ?>/دانلود-فیلم-راه-ابی-ابریشم/">

<img src="<?php bloginfo('template_url'); ?>/pic/17.jpg" alt="Villaye Man" /></a></figure>

</div>

</div>

<div id="time-indicator"></div>

</div>

<footer>

<nav class="slider-controls">

<ul id="controls">

<li><a class="goto-slide current" href="#" data-slideindex="0"></a></li>

<li><a class="goto-slide" href="#" data-slideindex="1"></a></li>

<li><a class="goto-slide" href="#" data-slideindex="2"></a></li>

<li><a class="goto-slide" href="#" data-slideindex="3"></a></li>

<li><a class="goto-slide" href="#" data-slideindex="4"></a></li>

</ul>

</nav>

</footer>

</section>

</div>

<script src="<?php bloginfo('template_url'); ?>/js/box-slider-all.jquery.min.js"></script>

<script src="<?php bloginfo('template_url'); ?>/js/box-slider-fx-tile-3d.js"></script>

<script>

$(function () {

var $box = $('#box')

, $indicators = $('.goto-slide')

, $effects = $('.effect')

, $timeIndicator = $('#time-indicator')

, slideInterval = 5000;

var switchIndicator = function ($c, $n, currIndex, nextIndex) {

$timeIndicator.stop().css('width', 0);

$indicators.removeClass('current').eq(nextIndex).addClass('current');

};

var startTimeIndicator = function () {

$timeIndicator.animate({width: '968px'}, slideInterval);

};

// initialize the plugin with the desired settings

$box.boxSlider({

speed: 500

, autoScroll: true

, timeout: slideInterval

, next: '#next'

, prev: '#prev'

, pause: '#pause'

, effect: 'scrollHorz'

, blindCount: 15

, onbefore: switchIndicator

, onafter: startTimeIndicator

});

startTimeIndicator();

// pagination isn't built in simply because it's easy to

// roll your own with the plugin API methods

$('#controls').on('click', '.goto-slide', function (ev) {

$box.boxSlider('showSlide', $(this).data('slideindex'));

ev.preventDefault();

});

$('#effect-list').on('click', '.effect', function (ev) {

var $effect = $(this);

$box.boxSlider('option', 'effect', $effect.data('fx'));

$effects.removeClass('current');

$effect.addClass('current');

switchIndicator(null, null, 0, 0);

ev.preventDefault();

});

});

</script>

</div>

و این هم فایل cssش هستش

/* line 22, sass/screen.scss */

#viewport-shadow {

position: relative;

width: 968px;

padding: 0px 0px 0px 0px;

}

/* line 29, sass/screen.scss */

#viewport, #box, .slide {

width: 968px;

height: 350px;

position: relative;

}

/* line 34, sass/screen.scss */

#viewport {

overflow: hidden;

}

/* line 35, sass/screen.scss */

footer {

margin: 0 0px;

}

/* line 37, sass/screen.scss */

#controls {

border-radius: 5px;

padding: 3px 3px 3px 1px;

position: relative;

top: -20px;

right: 5px;

float: right;

overflow: hidden;

-webkit-transition : all 0.2s ease-in-out;

-moz-transition : all 0.2s ease-in-out;

-o-transition : all 0.2s ease-in-out;

}

#controls:hover { background-color: #fff; }

/* line 44, sass/screen.scss */

#controls li {

display: inline;

}

/* line 48, sass/screen.scss */

.goto-slide {

margin-left: 2px;

width: 10px;

height: 10px;

display: block;

float: left;

background-color: #878787;

border-radius: 0px;

-webkit-transition : all 0.5s ease-in-out;

-moz-transition : all 0.5s ease-in-out;

-o-transition : all 0.5s ease-in-out;

}

/* line 62, sass/screen.scss */

.goto-slide.current {

background-color: #0d609b;

}

/* line 123, sass/screen.scss */

#time-indicator {

width: 0px;

height: 3px;

background-color: #0f4c7b;

position: absolute;

left: 0px;

}

حالا چه کار باید بکنم من که روی هر عکس یه متن بیاد و بشه به اون متن موقع نمایش یه افکت بسیار ساده داشته باشه ؟

ویرایش شده اردیبهشت 92 توسط NESTED
long box

[Morteza 34190]

چیزی که نوشتید رو قرار بدید تا مشکل رو بهتون بگیم

[mahdi.a 432]

سلام اقا مرتضی

طبق دستور شما رفتم و خلاصه اسلایدر رو با متن درست کردم .

الان میخوام به متنها وقتی میخوان روی هر عکس بیان یه افکت ساده بدم ؟

[Morteza 34190]

چه افکتی ؟ متحرک یا کمرنگ شدن یا...؟

[mahdi.a 432]

متحرک شه ...

فقط موقع ورود به عکس یه افکت داشته باشه ...

ممنون

[mahdi.a 432]

دوستان ; راهنمایی لطفاَ

[Mohammad 1620]

بیشتر توضیح بدید؟ چه نوع متحرکی؟

[mahdi.a 432]

الان اگه رو اسلایدر سایت نگاه کنید متن همراه عکس میاد ، من میخوام وقتی افکت عکس تموم شد بعدش متنها با یک افکتی ظاهر شه ...

ممنون

[Morteza 34190]

باید بهش افکتی مثلا fadeIn جی کوئری بدید.

[mahdi.a 432]

اگه میشه بیشتر توضیح بدید .. ممنون

[mahdi.a 432]

دوستان من تو گوگل زیاد سرچ کردم منتهی نتونستم کاری بکنم . اگه میشه بیشتر راهنمایی کنید .

[Morteza 34190]

توضیح اولیه:

http://www.w3schools.com/jquery/eff_fadein.asp

مثال:

http://www.mkyong.com/jquery/jquery-fadein-fadeout-and-fadeto-example/

[mahdi.a 432]

ممنون اقا مرتضی ، فقط یه سوال ؟

الات توی این کدهای که شما دادی همه رو باید رو دکمه کلیک کنیم تا حرکت انجام شه ولی من میخوام خودش اتومات حرکت رو انجام بده ، باید چه کار کنم ..

توی کد زیر چه چیزی باید جای click بزنم ؟

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
  });
});
</script>

[Morteza 34190]

یعنی با حرکت اسلایدر این افکت هم اجرا بشه؟

[mahdi.a 432]

یعنی با حرکت اسلایدر این افکت هم اجرا بشه؟

بله

[Morteza 34190]

باید کد جاوااسکریپت مربوط به اسلایدر رو پیدا کنید

ببینید چی هست و داخل بخش حلقه اون قرار بدید

[mahdi.a 432]

سلام

یک کدی که توی فایل header.php کنار کدهای اسلایدر هستش اینه ، منظورتون همین کد هستش یا نه ؟

<script>
    $(function () {
	    var $box = $('#box')
		  , $indicators = $('.goto-slide')
		  , $effects = $('.effect')
		  , $timeIndicator = $('#time-indicator')
		  , slideInterval = 5000;
	    var switchIndicator = function ($c, $n, currIndex, nextIndex) {
		  $timeIndicator.stop().css('width', 0);
		  $indicators.removeClass('current').eq(nextIndex).addClass('current');
	    };
	    var startTimeIndicator = function () {
		  $timeIndicator.animate({width: '968px'}, slideInterval);
	    };
	    // initialize the plugin with the desired settings
	    $box.boxSlider({
		    speed: 500
		  , autoScroll: true
		  , timeout: slideInterval
		  , next: '#next'
		  , prev: '#prev'
		  , pause: '#pause'
		  , effect: 'scrollHorz'
		  , blindCount: 15
		  , onbefore: switchIndicator
		  , onafter: startTimeIndicator
	    });
	    startTimeIndicator();
	    // pagination isn't built in simply because it's easy to
	    // roll your own with the plugin API methods
	    $('#controls').on('click', '.goto-slide', function (ev) {
		  $box.boxSlider('showSlide', $(this).data('slideindex'));
		  ev.preventDefault();
	    });
	    $('#effect-list').on('click', '.effect', function (ev) {
		  var $effect = $(this);
		  $box.boxSlider('option', 'effect', $effect.data('fx'));
		  $effects.removeClass('current');
		  $effect.addClass('current');
		  switchIndicator(null, null, 0, 0);
		  ev.preventDefault();
	    });
    });
  </script>

[Morteza 34190]

باید از callback استفاده کنید:

http://bxslider.com/options

[mahdi.a 432]

سلام

اگه میشه بگید که این نمونه کدهای که راهنمایی کردید یعنی چی و کجا باید به کار ببرم ؟

[mahdi.a 432]

دوستان اگه میشه درباره نمونه کدهای که اقا مرتضی معرفی کرده یه راهنمایی کنید که چه جوری باید جاشون داد ...