• اطلاعیه ها

    • Morteza

      باهم بسازیم: اطلس ووکامرس و وردپرس   14/07/96

      تاپیک ایجاد شده برای بحث در جهت ایجاد یک منبع، ویکی، صفحات توضیحی و یا بخش آموزشی جامع برای وردپرس و متعلقات مختلف آن است. لطفا جهت مشارکت در این بحث، ارائه پیشنهاد و یا انتقاد به تاپیک فوق مراجعه کنید. باهم بسازیم: اطلس ووکامرس و وردپرس
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

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


لینک به پست

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

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

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

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


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

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

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


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