• اطلاعیه ها

    • Saeed Fard

      پوشش زنده وردکمپ ۲۰۱۸ اروپا توسط وردپرس پارسی   23/03/97

      اگر کاربر وردپرس هستید حتما تا به حال اسم وردکمپ رو شنیدید، کمپ و دورهمی بزرگ توسعه‌دهنده‌ها و کاربران وردپرس که سالانه در کشورهای مختلف برگزار میشه تحت عنوان وردکمپ هستش که از سمت مراجع اصلی وردپرس حمایت و برگزار می‌شه.   این‌ بار در سال 2018 وردکمپ اروپا در شهر بلگراد کشور صربستان در حال برگزاری هستش، این رویداد طی سه روز 24 تا 26 تیر ماه (June 14-16) برگزار میشه، در این رویداد مصطفی صوفی از وردپرس پارسی و به نمایندگی تمامی کاربران وردپرس فارسی حضور داره. وردپرس پارسی رویداد وردکمپ 2018 اروپا رو به صورت زنده توسط مصطفی پوشش می‌ده و در صورت علاقه‌مندی به این مراسم می‌تونید از طریق وردپرس پارسی دنبالش کنید.در حال حاضر یک روز از این مراسم گذشته که گزارش اون در قسمت پوشش زنده قرار گرفته. برای دنبال کردن مراسم وردکمپ اروپا به صورت لحظه‌ای به صفحه پوشش زنده در قسمت زیر مراجعه کنید. همینطور در آینده منتظر خبر برگزاری اولین وردکمپ در ایران توسط وردپرس‌پارسی باشید. https://wp-parsi.com/wceu-2018

      لینک خبر در وردپرس پارسی : https://wp-parsi.com/wceu-2018-live  
goldenfont

اضافه کردین یک DIV به اسلایدر

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

سلام

یه اسلایدر ساختم :


<div class="slides center">
<a href="/"><img class="slideItem" src=".jpg" style="display: none;">
</a>
<a href="/"><img class="slideItem" src=".jpg" style="display: inline;">
</a>
</div>

حالا میخوام یه DIV به اسم تایمر بهش اضافه کنم تا وقتی یه مقداری برای تایمر میذارم روی هر عکس از اسلایدر تایمر مربوط به اون رو نمایش بده

ینی اینطوری :


<div class="slides center">
<a href="/"><img class="slideItem" src=".jpg" style="display: none;">
<div class="timer">24 ساعت</div>
</a>
<a href="/"><img class="slideItem" src=".jpg" style="display: inline;">
<div class="timer">10 ساعت</div>
</a>
</div>

ولی وقتی این DIV رو اضافه میکنم همشون روی هم قرار میگیرن و تو تمام عکسها همشون هستن ، برای اینکه روی هر عکس تایمر مخصوص خودش باشه باید خروجی HTML اش چطوری باشه ؟

ممنون

0

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


لینک به پست

خوب برای اینکه کد اسلایدر شما برای تصویر نوشته شده باید جاوا اسکریپت بدونید و بتونید کدی برای خواستتون بنویسید یا بگردید و نمونه های آماده رایگان را مطابق خواستتون پیدا کنید

http://www.htmldrive.net

1

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


لینک به پست

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

حالا میخوام

<div class="timer">24 ساعت</div>

روی هر عکس اضافه بشه

0

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


لینک به پست

div را داخل a نباید لود کرد اول باید کد هر اسلاید اینجوری تغییر کنه


<div class="slide">
<a><img></a>
<div>
</div>
</div>

وبعد هم باید کد js برای div نوشته بشه

2

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


لینک به پست

ارسال شده در (ویرایش شده)

آخرین توانم رو به کار انداختم و به این رسیدم :


<div class="slides center">
<div class="slideItem">
<a href="/"><img src="LINK PIC"></a><div id="timer">5 ساعت</div></div>
<div class="slideItem">
<a href="/"><img src="LINK PIC"></a><div id="timer">10ساعت</div></div>

و JS :


/*!
* jQuery Slider Plugin - v1.0
*/
(function(a){a.fn.extend({dkSlider:function({var c={autoplay:false,speed:"slow",interval:5000,onTabClick:function(){}};var b=a.extend(c,;return this.each(function(){var l,q,o,p=true,f=b,k=a(this),g=a(".tabItem",k),n=a(".slideItem",k),s=a(".backward",k),m=a(".forward",k),r=a(".sep",k);a(".tabItem:eq(0)",k).addClass("current");a(".tabItem:eq(0)",k).parent().next(".sep").hide();a(".slideItem",k).hide();a(".slideItem:eq(0)",k).show();if(f.autoplay){l=a(".current",k).index()+1;o=a(".tabItem:eq("+l+")",k);q=setTimeout(e,f.interval)}g.click(function(i){if(!a(this).hasClass("current")){o=a(this);j();if(f.autoplay){clearTimeout(q);q=setTimeout(e,f.interval)}i.preventDefault()}});m.click(function(i){if(l==undefined){l=1}o=a(".tabItem:eq("+l+")",k);j();if(f.autoplay){clearTimeout(q);q=setTimeout(e,f.interval)}i.preventDefault()});s.click(function(i){if(l==1||l==undefined){l=g.length-1}else{if(l==0){l=g.length-2}else{l-=2}}o=a(".tabItem:eq("+l+")",k);j();if(f.autoplay){clearTimeout(q);q=setTimeout(e,f.interval)}i.preventDefault()});if(f.autoplay){n.mouseenter(function(){h()}).mouseleave(function(){d()})}function e(){j();clearTimeout(q);q=setTimeout(e,f.interval)}function j(){if(g.length>1){a(".current",k).removeClass("current");o.addClass("current");r.show();o.parent().prev(".sep").hide();o.parent().next(".sep").hide();l=a(".tabItem",k).index(o);a(".slideItem:visible",k).fadeOut(f.speed);a(".slideItem:eq("+a(".tabItem",k).index(o)+")",k).fadeIn(f.speed);l!=(g.length-1)?l+=1:l=0;o=a(".tabItem:eq("+l+")",k);f.onTabClick()}}function h(){clearTimeout(q);p=false}function d(){if(!p){p=false;q=setTimeout(e,f.interval)}}})}})})(jQuery);

همچیش درست شد مشکل فقط اینه که تو استایل دوم نمیدونم چرا عکس رو نمایش نمیده !

ویرایش شده در توسط goldenfont
0

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


لینک به پست

این کد خلاصه شده است نمی شه ویرایشش کرد

کد اصلیش را باید ویرایش کنید

1

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


لینک به پست

کد اصلیش ؟

منظورتون اینه ؟


<article id="sliderr">
<header>
<ul class="tabs">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('offer-title') ) ; ?>
</ul>
</header>
<div class="slides center">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('offer') ) ; ?>
</div>
</article>

0

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


لینک به پست

منظورم این قبل از min شدن


* jQuery Slider Plugin - v1.0
*/
(function(a){a.fn.extend({dkSlider:function({var c={autoplay:false,speed:"slow",interval:5000,onTabClick:function(){}};var b=a.extend(c,;return this.each(function(){var l,q,o,p=true,f=b,k=a(this),g=a(".tabItem",k),n=a(".slideItem",k),s=a(".backward",k),m=a(".forward",k),r=a(".sep",k);a(".tabItem:eq(0)",k).addClass("current");a(".tabItem:eq(0)",k).parent().next(".sep").hide();a(".slideItem",k).hide();a(".slideItem:eq(0)",k).show();if(f.autoplay){l=a(".current",k).index()+1;o=a(".tabItem:eq("+l+")",k);q=setTimeout(e,f.interval)}g.click(function(i){if(!a(this).hasClass("current")){o=a(this);j();if(f.autoplay){clearTimeout(q);q=setTimeout(e,f.interval)}i.preventDefault()}});m.click(function(i){if(l==undefined){l=1}o=a(".tabItem:eq("+l+")",k);j();if(f.autoplay){clearTimeout(q);q=setTimeout(e,f.interval)}i.preventDefault()});s.click(function(i){if(l==1||l==undefined){l=g.length-1}else{if(l==0){l=g.length-2}else{l-=2}}o=a(".tabItem:eq("+l+")",k);j();if(f.autoplay){clearTimeout(q);q=setTimeout(e,f.interval)}i.preventDefault()});if(f.autoplay){n.mouseenter(function(){h()}).mouseleave(function(){d()})}function e(){j();clearTimeout(q);q=setTimeout(e,f.interval)}function j(){if(g.length>1){a(".current",k).removeClass("current");o.addClass("current");r.show();o.parent().prev(".sep").hide();o.parent().next(".sep").hide();l=a(".tabItem",k).index(o);a(".slideItem:visible",k).fadeOut(f.speed);a(".slideItem:eq("+a(".tabItem",k).index(o)+")",k).fadeIn(f.speed);l!=(g.length-1)?l+=1:l=0;o=a(".tabItem:eq("+l+")",k);f.onTabClick()}}function h(){clearTimeout(q);p=false}function d(){if(!p){p=false;q=setTimeout(e,f.interval)}}})}})})(jQuery);

2

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


لینک به پست

خب اون بدون min رو که اصلا تو سورسها نذاشتم !

0

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


لینک به پست

من به سورس های شما کاری ندارم که شما یک اسلایدر ساختی حالا نمی تونی توش تغییر بدی کد min رو که نمی شه تغییر داد کد اصلی باید باشه تا تغییر اعمال بشه بعدش min بشه و جایگزین کد اول کنید

0

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


لینک به پست

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

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

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

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


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

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

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


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