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

سلام

کدی میخوام بنویسم که بصورت اسلایدر ولی با تیتر و قسمتی از مطلب، گردشی کار کنه

طرحی که زدم به پیوست تقدیم شده

با تشکر از راهنمایی شما

slider.jpg

0

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


لینک به پست

تشکر از کمکتون

ولی من افزونه نمیخواهم.

امکان راهنمایی هست؟

 

 

0

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


لینک به پست

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

در در 7/22/2016 at 09:35، aliali گفته است :

سلام

کدی میخوام بنویسم که بصورت اسلایدر ولی با تیتر و قسمتی از مطلب، گردشی کار کنه

طرحی که زدم به پیوست تقدیم شده

با تشکر از راهنمایی شما

slider.jpg

 

شما ابتدا Html این کار رو بزنید سپس یک دستور WP_QUERY با مقدار 5 پست براش ایجاد کنید سپس برای post اول که $loop برابر با 1 هست مقدار سمت راست رو بالا بیارید و در شرط loop >1 اون 4 عکس که برای پست های بعدی هست رو بالا بیارید

به همین سادگی

ویرایش شده در توسط Mehrshad.Darzi
1

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


لینک به پست

مهرداد عزیز تشکر

من این کار را کرده ام ولی میخواستم با جی کوئری هر چند لحظه یکبار مطلب اصلی که سمت راست هست به همراه متن عوض بشه.

0

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


لینک به پست

سلام دوست عزیز

یعنی میخواید مطالب سمت چپ ثابت باشند ( مثلاً این قسمت بخش ویزه هستش )

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

اگر کد و قالب بندی این قسمت آماده هستش ضمیمه کنید تا براتون درست بکنم قسمت سمت راست رو .

1

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


لینک به پست

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

تشکر از محبت شما.

index.php

style.css

0

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


لینک به پست

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

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

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

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


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

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

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


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

  • مطالب مشابه

    • توسط unid_user
      سلام و درود
      دوستان گرامی من با تابع addclass در جی کوئری به مشکل خوردم. می خوام کلاس buy-butt رو به یک تگ a خاص اضافه کنم اما جواب نمیده!؟
      $( ".package-info .textwidget p a" ).addClass( "buy-butt" );  
    • توسط unid_user
      سلام و درود
      دوستان من یه سری کد نوشتم که توی یه گالری تصاویر استفاده میشه. متاسفانه برای هر تصویر باید این کدها تکرار بشه و خوب توی داینامیک کردن با وردپرس قطعا به مشکل میخورم. می خواستم بدونم راهی وجود داره که من این کدهای جی کوئری رو طوری بنویسم که با اضافه کردن هر توصویر کدهای جی کوئری رو اتوماتیک اضافه کنه؟
      ممنون.
      کدهای html:
      <table id="gallery"> <tr> <td> <div class="image"> <img src="images/img1.jpg" alt="" id="img1"> </div> </td> <td> <div class="image"> <img src="images/img2.jpg" alt="" id="img2"> </div> </td> <td> <div class="image"> <img src="images/img3.jpg" alt="" id="img3"> </div> </td> </tr> <tr> <td> <div class="image"> <img src="images/img4.jpg" alt="" id="img4"> </div> </td> <td> <div class="image"> <img src="images/img5.jpg" alt="" id="img5"> </div> </td> <td> <div class="image"> <img src="images/img6.jpg" alt="" id="img6"> </div> </td> </tr> </table> <div id="bigimage"> <div id="close"></div> <img src="" alt=""> <div id="next"></div> <div id="prev"></div> </div> کدهای css:
      .image:hover { cursor: pointer; } .image img { border: 2px solid #333; border-radius: 5px; } .image:hover img { transform: scale(0.98); } #bigimage { height: 100vh; width: 100%; background-color: rgba(0,0,0,.8); position: fixed; top: 0; left: 0; display: none; } #bigimage img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 5px; } #bigimage #close { height: 40px; width: 45px; position: sticky; top: 30px; right: 40px; background: transparent url('../images/cancel.png') no-repeat center center /contain; background-size: 24px; } #bigimage #close:hover { cursor: pointer; } #next { height: 100px; width: 30px; background: transparent url('../images/arrow_right.png') no-repeat center center /contain; background-size: 32px; line-height: 100px; position: absolute; top: 50%; right: 5px; transform: translateY(-50%); } #next:hover { cursor: pointer; } #prev { height: 100px; width: 30px; background: transparent url('../images/arrow_left.png') no-repeat center center /contain; background-size: 32px; line-height: 100px; position: absolute; top: 50%; left: 5px; transform: translateY(-50%); } #prev:hover { cursor: pointer; کدهای جی کوئری:
      $(document).ready(function() { flag=0; $("#img1").click(function() { $("#bigimage").fadeIn(); $("#bigimage img").attr('src', 'images/img1.jpg'); flag=1; }); $("#img2").click(function() { $("#bigimage").fadeIn(); $("#bigimage img").attr('src', 'images/img2.jpg'); flag=2; }); $("#img3").click(function() { $("#bigimage").fadeIn(); $("#bigimage img").attr('src', 'images/img3.jpg'); flag=3; }); $("#img4").click(function() { $("#bigimage").fadeIn(); $("#bigimage img").attr('src', 'images/img4.jpg'); flag=4; }); $("#img5").click(function() { $("#bigimage").fadeIn(); $("#bigimage img").attr('src', 'images/img5.jpg'); flag=5; }); $("#img6").click(function() { $("#bigimage").fadeIn(); $("#bigimage img").attr('src', 'images/img6.jpg'); flag=6; }); $("#close").click(function() { $("#bigimage").fadeOut(); }); $("#next").click(function() { if (flag==1) { $("#bigimage img").attr('src', 'images/img1.jpg'); flag=2; } else if (flag==2) { $("#bigimage img").attr('src', 'images/img2.jpg'); flag=3; } else if (flag==3) { $("#bigimage img").attr('src', 'images/img3.jpg'); flag=4; } else if (flag==4) { $("#bigimage img").attr('src', 'images/img4.jpg'); flag=5; } else if (flag==5) { $("#bigimage img").attr('src', 'images/img5.jpg'); flag=6; } else if (flag==6) { $("#bigimage img").attr('src', 'images/img6.jpg'); flag=1; } }); $("#prev").click(function() { if (flag==1) { $("#bigimage img").attr('src', 'images/img6.jpg'); flag=6; } else if (flag==2) { $("#bigimage img").attr('src', 'images/img1.jpg'); flag=1; } else if (flag==3) { $("#bigimage img").attr('src', 'images/img2.jpg'); flag=2; } else if (flag==4) { $("#bigimage img").attr('src', 'images/img3.jpg'); flag=3; } else if (flag==5) { $("#bigimage img").attr('src', 'images/img4.jpg'); flag=4; } else if (flag==6) { $("#bigimage img").attr('src', 'images/img5.jpg'); flag=5; } }); });  

    • توسط unid_user
      سلام و دورود
      دوستان من یه اسلایدر ساختم که متاسفانه بخش جی کوئری و کدهای جاوا اسکریپت کار نمیکنه!؟
      ممنون
      کد جاوا اسکریپت:
      $(document).ready(function(){ $("a:nth-child(1)").css("background-color","white"); $("#circle1").click(function(){ $("#slider").animate({'left':'5%'},500); $("#data").fadeIn(700); $("#data2,#data3,#data4").fadeOut(500); $(".line").animate({'left':'60%'}); $("a:nth-child(1)").css("background-color","white"); $("a:nth-child(2),a:nth-child(3),a:nth-child(4)").css("background-color","black"); }); $("#circle2").click(function(){ $("#slider").animate({'left':'-30%'},500); $("#data2").fadeIn(700); $("#data,#data3,#data4").fadeOut(500); $(".line").animate({'left':'25%'}); $("a:nth-child(2)").css("background-color","white"); $("a:nth-child(1),a:nth-child(3),a:nth-child(4)").css("background-color","black"); }); $("#circle3").click(function(){ $("#slider").animate({'left':'-190%'},500); $("#data3").fadeIn(700); $("#data,#data2,#data4").fadeOut(500); $(".line").animate({'left':'55%'}); $("a:nth-child(3)").css("background-color","white"); $("a:nth-child(1),a:nth-child(2),a:nth-child(4)").css("background-color","black"); }); $("#circle4").click(function(){ $("#slider").animate({'left':'-240%'},500); $("#data4").fadeIn(700); $("#data,#data2,#data3").fadeOut(500); $(".line").animate({'left':'25%'}); $("a:nth-child(4)").css("background-color","white"); $("a:nth-child(1),a:nth-child(2),a:nth-child(3)").css("background-color","black"); }); });  
      site_4.zip
    • توسط unid_user
      سلام و درود
      دوستان گرامی، من می خوام کدی رو معرفی بفرمایید که وقتی روی تصویر شاخص در یک پست کلیک میکنم تصویر در سایز بزرگ به صورته آنچه که در سایت زیر مشاهده می فرمایید به نمایش در بیاد.
      سپاس و تشکر.
      نمونه سایتی که گفتم.
    • توسط kias
      با عرض سلام 
      من سایتم رو طبق اموزش هایی که گزاشته بودن و مطالبی که خوندم تو انجکن چون با کلمه کلیدی من تو صفحه گوگل نمیومد بهینه کردم طبق فرمایش یکی از دوستان با gtmrtix
      بعد از اینکه بهینه کردم و کار تموم شد دیگه قالب درست کار نمیکنه مثلا اسلایدر هدر کار نمیکنه اسلایدر وبلاگ از کار افتاده ایکون هام حذف شدن
      و تو موبایل هم علاوه بر اینا بعضی دکمه ها کثل فهرست ها دیگه باز نمیشه و کار نمیکنه 
      سرچ کردم فهمیدم از جی کوئری هست ولی چون هیچی از کد نویسی نمیدونم کسی هست بتونه کمکم کنه که مشکلم حل بشه لطفا
      با سپاس
       [visabook . [ir