unid_user

اسلایدر
داینامیک کردن یک اسلایدر عجیب!؟

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

درود

من در یک وب سایت به یک اسلایدر خیلی عجیب برخورد کردم. کدهاش بصورت زیر هستن. چطور میشه این مدل اسلایدر رو داینامیک کرد؟:huh:

<div class="slider">						    								     
  <div class="fluid_container">
    <div class="camera_wrap camera_azure_skin" id="camera_wrap_1" style="margin-bottom:15px">
      <div data-thumb="<?php echo get_template_directory_uri(); ?>/images/thumbnails/slider-1.jpg" data-src="<?php echo 		get_template_directory_uri(); ?>/images/slider-4.jpg">   </div>
      <div data-thumb="<?php echo get_template_directory_uri(); ?>/images/thumbnails/slider-2.jpg" data-src="<?php echo get_template_directory_uri(); ?>/images/slider-3.jpg">  </div>
      <div data-thumb="<?php echo get_template_directory_uri(); ?>/images/thumbnails/slider-1.jpg" data-src="<?php echo get_template_directory_uri(); ?>/images/slider-1.jpg">   </div>
      <div data-thumb="<?php echo get_template_directory_uri(); ?>/images/thumbnails/slider-2.jpg" data-src="<?php echo get_template_directory_uri(); ?>/images/slider-2.jpg">  </div>
    </div>
  </div>
  <div class="clear"></div>					       
</div>

 

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

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


لینک به پست
در 4 ساعت قبل، masoudch گفته است :

درود

من در یک وب سایت به یک اسلایدر خیلی عجیب برخورد کردم. کدهاش بصورت زیر هستن. چطور میشه این مدل اسلایدر رو داینامیک کرد؟:huh:


<div class="slider">						    								     
  <div class="fluid_container">
    <div class="camera_wrap camera_azure_skin" id="camera_wrap_1" style="margin-bottom:15px">
      <div data-thumb="<?php echo get_template_directory_uri(); ?>/images/thumbnails/slider-1.jpg" data-src="<?php echo 		get_template_directory_uri(); ?>/images/slider-4.jpg">   </div>
      <div data-thumb="<?php echo get_template_directory_uri(); ?>/images/thumbnails/slider-2.jpg" data-src="<?php echo get_template_directory_uri(); ?>/images/slider-3.jpg">  </div>
      <div data-thumb="<?php echo get_template_directory_uri(); ?>/images/thumbnails/slider-1.jpg" data-src="<?php echo get_template_directory_uri(); ?>/images/slider-1.jpg">   </div>
      <div data-thumb="<?php echo get_template_directory_uri(); ?>/images/thumbnails/slider-2.jpg" data-src="<?php echo get_template_directory_uri(); ?>/images/slider-2.jpg">  </div>
    </div>
  </div>
  <div class="clear"></div>					       
</div>

 

با عرض سلام و خسته نباشید

به اینصورت :

<div data-thumb="<?php the_post_thumbnail('thumbnail'); ?>" data-src="<?php the_post_thumbnail('full'); ?>"></div>

البته باید این کد رو داخل حلقه کوئری قرار بدین  مثلا به این شکل :

<?php 
	$arg = array(
    	'post_type'=>'post',
      	'posts_per_page' => 5,
      	'cat' => '2' //دسته بندی مربوط به اسلایدر
    );
	$slider_query = new WP_Query($arg);
	if($slider_query->have_posts()): while($slider_query->have_posts()): $slider_query->the_post();
?>
		<div data-thumb="<?php the_post_thumbnail('thumbnail'); ?>" data-src="<?php the_post_thumbnail('full'); ?>"></div>
<?php endwhile; endif; wp_reset_query(); ?>

موفق و پیروز باشید.

1

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


لینک به پست

درود

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

در inspect element کدهای زیر رو ایجاد میکنه ولی نشون نمیده:

<div data-thumb="<img width=" 150"="" height="150" src="http://localhost/html_to_wp/wp-content/uploads/2018/03/slider-1-150x150.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="">" data-src="<img width="3264" height="1836" src="http://localhost/html_to_wp/wp-content/uploads/2018/03/slider-1.jpg" class="attachment-full size-full wp-post-image" alt="" srcset="http://localhost/html_to_wp/wp-content/uploads/2018/03/slider-1.jpg 3264w, http://localhost/html_to_wp/wp-content/uploads/2018/03/slider-1-300x169.jpg 300w, http://localhost/html_to_wp/wp-content/uploads/2018/03/slider-1-768x432.jpg 768w, http://localhost/html_to_wp/wp-content/uploads/2018/03/slider-1-1024x576.jpg 1024w" sizes="(max-width: 3264px) 100vw, 3264px">"&gt;</div>

 

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

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


لینک به پست

سلام و درود

 

در 4 ساعت قبل، masoudch گفته است :

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

این کد هیچی نشون نمیده احتمالا اون جایی که این اسلایدر رو توش دیدید یه کد جاوا اسکریپت نوشته شده بوده که مقدار data-thumb هر div رو میگرفته و مثلا به عنوان بک گراند div اش میذاشته.

0

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


لینک به پست
در 16 ساعت قبل، mehran-b گفته است :

سلام و درود

 

این کد هیچی نشون نمیده احتمالا اون جایی که این اسلایدر رو توش دیدید یه کد جاوا اسکریپت نوشته شده بوده که مقدار data-thumb هر div رو میگرفته و مثلا به عنوان بک گراند div اش میذاشته.

درود

راستش من زیاد اطلاعات ندارم و مبتدی هستم. میخواهید قالب رو براتون ارسال کنم بررسی کنید؟

0

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


لینک به پست
در 11 دقیقه قبل، masoudch گفته است :

راستش من زیاد اطلاعات ندارم و مبتدی هستم. میخواهید قالب رو براتون ارسال کنم بررسی کنید؟

شما خودتون رو درگیر این کدها نکنید این کدهای HTML ای که دادید یه سری کد جاوا اسکریپت هم داره این اسلایدر نمیتونه بدون جاوا اسکریپت کار کنه.

0

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


لینک به پست
در 2 دقیقه قبل، mehran-b گفته است :

شما خودتون رو درگیر این کدها نکنید این کدهای HTML ای که دادید یه سری کد جاوا اسکریپت هم داره این اسلایدر نمیتونه بدون جاوا اسکریپت کار کنه.

قالب رو براتون در تاپیک مربوط به پست تایپ قرار دادم اما اینجا هم آپلود میکنم. از روی قالب بهتر میتونید کمک کنید. ممنون و سپاس گذار.

web.zip

0

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


لینک به پست
در 11 دقیقه قبل، masoudch گفته است :

قالب رو براتون در تاپیک مربوط به پست تایپ قرار دادم اما اینجا هم آپلود میکنم. از روی قالب بهتر میتونید کمک کنید. ممنون و سپاس گذار.

اسلایدر با این کتابخونه jQuery پیاده شده باید مطالعه کنید شیوه کارش رو بفهمید.

http://www.pixedelic.com/plugins/camera/

1

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


لینک به پست
در 3 دقیقه قبل، mehran-b گفته است :

اسلایدر با این کتابخونه jQuery پیاده شده باید مطالعه کنید شیوه کارش رو بفهمید.

http://www.pixedelic.com/plugins/camera/

ممنون. اما هیچ توضیحی درباره اینکه چطور میشه به وردپرس تبدیلش کرد نداده و فقط درباره نحوه استفاده در حالت استاتیک رو توضیح داده.

0

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


لینک به پست
در 31 دقیقه قبل، masoudch گفته است :

ممنون. اما هیچ توضیحی درباره اینکه چطور میشه به وردپرس تبدیلش کرد نداده و فقط درباره نحوه استفاده در حالت استاتیک رو توضیح داده.

مبنای داینامیک رو حلقه میچرخه.

اگر استاتیک این باشه:

<div class="camera_wrap">
    <div data-src="images/image_1.jpg"></div>
    <div data-src="images/image_1.jpg"></div>
    <div data-src="images/image_2.jpg"></div>
</div>

داینامیک وردپرسی میشه این:

<div class="camera_wrap">
	<?php
	$query = new WP_Query();
	if(have_posts()) :
		while(have_posts()) :
			the_post();
	?>
			<div data-src="<?php echo get_the_post_thumbnail_url($query->post->ID, 'full'); ?>"></div>
	<?php
		endwhile;
		wp_reset_postdata();
	endif;
	?>
</div>

 

1

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


لینک به پست

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

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

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

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


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

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

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


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

  • مطالب مشابه

    • توسط ahmad25532
      سلام. این سایت با جوملاست ظاهرا
      http://hamagroup.ir/fa/
      داخل اسلایدرش یه سری خطوط هستند که در حال چرخش هستند. چجوری میتونم همچین چیزی تو سایت وردپرسیم بسازم. قالبم اسلاید رولوشن و لایر اسلایدر رو داره.
       
      ممنون
    • توسط hamedgh1373
      با سلام خدمت دوستان عزیز
      من با پوسته enfold سایتی طراحی کردم 
      برای اسلاید صفحه اول یک ویدئو قراردادم ولی اندازه ویدئو بزرگتر از اسلایدر میباشد
      آیا راحی هست که بتونم  اندازه ویدئو را با اندازه اسلایدر مچ کنم؟
      منظورم با تغییر در کدهای قالب هست
      آدرس سایت هم /https://www.stubook.cf
      با تشکر
    • توسط unid_user
      سلام و دورود
      دوستان گرامی من یه اسلایدر با جی کوئری نوشتم ولی نمی تونم برای وردپرس داینامکش کنم. از پست تایپ استفاده کردم ولی اونطور که باید جواب نمیده. لطفا اگه ممکنه راهنمایی کنید.
      سپاس
       
      کد html
      <section id="section-5"> <h3 class="text-center">محصولات</h3> <div id="gallery"> <div class="row"> <div class="col-3"> <div class="image"> <img src="images/img1.jpg" alt=""> </div> </div> <div class="col-3"> <div class="image"> <img src="images/img2.jpg" alt=""> </div> </div> <div class="col-3"> <div class="image"> <img src="images/img3.jpg" alt=""> </div> </div> <div class="col-3"> <div class="image"> <img src="images/img4.jpg" alt=""> </div> </div> </div> <div class="row"> <div class="col-3"> <div class="image"> <img src="images/img5.jpg" alt=""> </div> </div> <div class="col-3"> <div class="image"> <img src="images/img6.jpg" alt=""> </div> </div> <div class="col-3"> <div class="image"> <img src="images/img7.jpg" alt=""> </div> </div> <div class="col-3"> <div class="image"> <img src="images/img8.jpg" alt=""> </div> </div> </div> </div> <a class="text-center buy-butt" href="#">مشاهده تمام محصولات</a> <div id="bigimage"> <div id="close"></div> <a href="#"><img src="" alt=""></a> <div id="next"></div> <div id="prev"></div> </div> </section>  
    • توسط 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