46 پست در این موضوع قرار دارد

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

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

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

لینک سایت

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

به اشتراک گذاری این پست


لینک به پست

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

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

به اشتراک گذاری این پست


لینک به پست

سایت ..یلتره

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

به اشتراک گذاری این پست


لینک به پست

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

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

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

به اشتراک گذاری این پست


لینک به پست

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

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

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

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

موفق باشید

به اشتراک گذاری این پست


لینک به پست

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

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

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

الان این کدهای اسلایدر تو فایل 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;

}

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

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

به اشتراک گذاری این پست


لینک به پست

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

به اشتراک گذاری این پست


لینک به پست

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

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

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

به اشتراک گذاری این پست


لینک به پست

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

به اشتراک گذاری این پست


لینک به پست

متحرک شه ...

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

ممنون

به اشتراک گذاری این پست


لینک به پست

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

ممنون

به اشتراک گذاری این پست


لینک به پست

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

به اشتراک گذاری این پست


لینک به پست

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

به اشتراک گذاری این پست


لینک به پست

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

به اشتراک گذاری این پست


لینک به پست

توضیح اولیه:

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

مثال:

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

به اشتراک گذاری این پست


لینک به پست

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

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

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


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

به اشتراک گذاری این پست


لینک به پست

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

به اشتراک گذاری این پست


لینک به پست

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

بله

به اشتراک گذاری این پست


لینک به پست

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

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

به اشتراک گذاری این پست


لینک به پست

سلام

یک کدی که توی فایل 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>

به اشتراک گذاری این پست


لینک به پست

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

http://bxslider.com/options

به اشتراک گذاری این پست


لینک به پست

سلام

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

به اشتراک گذاری این پست


لینک به پست

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

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری