• اطلاعیه ها

    • Saeed Fard

      برگزاری چهارمین همایش Coder Conf و کد تخفیف برای کاربران وردپرس پارسی   20/04/97

      کدرکانف هر سال در آخرین پنجشنبه مرداد با بورد‌های مختلفی برگزار می‌گردد،امسال نیز کدرکانف در همین تاریخ با حضور برنامه نویسان مطرح کشور در بورد تخصصی جاوااسکریپت برگزار خواهد شد، یک گردهمایی متفاوت با طعم Javascript. Coderconf هر سال نسبت به سال‌های گذشته با حضور برنامه‌نویسان پر رنگتر می‌شود. ما سعی کردیم هر ساله به این کنفرانس مفهوم عمیق تری ببخشیم تا از آنچه در سال‌های گذشته عرضه شده به روزتر و مفیدتر واقع شویم. امسال فرصتی خواهد بود تا با نگرشی جدید و بهبود مطالب ارائه شده، عمیقتر به این موضوع نگاه کنیم تا بجای تکرار مباحث پیشین گامی هر چند کوچک در مسیر ارتقای دانش فنی برنامه‌نویسان ایرانی برداریم. ما در Coderconf ۴ با تمرکز بر روی Javascript نیت کرده‌ایم این فرصت را در اختیار برنامه نویسان قرار دهیم تا با ظرافت و استانداردهای روز دنیا کار خود را پیش ببرند. به نظر ما امسال زمان آن فرا رسیده‌است تا این زبان را به صورت تخصصی و از ابعاد مختلف به چالش بکشیم.   دبیر علمی همایش میلاد حیدری، کدرکانف ۴ را اینگونه توصیف کرده است :اشتراک گذاری دانش بهترین راه رسیدن به جاودانگی اطلاعات است. هر ساله همایش‌های زیادی برگزار میشه که افراد شرکت‌کننده می‌توانند با افراد مجرب شبکه سازی کنند. امسال در کدرکانف سعی کردیم علاوه بر بخش شبکه سازی بین افراد بیشتر روی انتقال دانش و کیفیت ارائه ها تمرکز داشته باشیم . به قصد یک گردهمایی بلند مدت بین برنامه‌نویسان جاوااسکریپت که با هم تبادل دانش و اطلاعات کنند گردهم آییم.
      بنده به عنوان عضو کوچکی از جامعه برنامه‌نویسان جاوااسکریپت ایران امیدوارم در کدرکانف امسال علاوه بر شبکه سازی، از اطلاعاتی که دوستان در این همایش در اختیارتان قرار می‌دهند استفاده کنید. در سایت همایش میتوانید سخنرانان و موضوع پنل همایش کدرکانف رو مشاهده کنید . علاقه‌مندان به حضور در این همایش می‌توانند با کد تخفیف wpparsi اقدام به ثبت نام در این گردهمایی کنند. سایت همایش :‌http://coderconf.org
      بلیط فروشی همایش :‌https://evand.com/events/coderconf4  

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

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

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

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

لینک سایت

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

0

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


لینک به پست

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

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

0

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


لینک به پست

سایت ..یلتره

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

3

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


لینک به پست

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

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

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

0

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


لینک به پست

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

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

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

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

موفق باشید

3

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


لینک به پست

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

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

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

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

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


لینک به پست

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

2

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


لینک به پست

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

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

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

0

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


لینک به پست

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

2

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


لینک به پست

متحرک شه ...

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

ممنون

0

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


لینک به پست

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

0

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


لینک به پست

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

1

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


لینک به پست

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

ممنون

0

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


لینک به پست

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

1

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


لینک به پست

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

0

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


لینک به پست

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

0

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


لینک به پست

توضیح اولیه:

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

مثال:

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

1

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


لینک به پست

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

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

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


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

0

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


لینک به پست

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

1

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


لینک به پست

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

بله

0

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


لینک به پست

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

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

2

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


لینک به پست

سلام

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

0

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


لینک به پست

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

http://bxslider.com/options

2

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


لینک به پست

سلام

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

0

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


لینک به پست

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

0

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


لینک به پست

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

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

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

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


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

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

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


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