رفتن به مطلب

پست های پیشنهاد شده

درود

من در یک وب سایت به یک اسلایدر خیلی عجیب برخورد کردم. کدهاش بصورت زیر هستن. چطور میشه این مدل اسلایدر رو داینامیک کرد؟: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

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


لینک به ارسال
در 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(); ?>

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

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


لینک به ارسال

درود

من کد بالا را جایگزین کدهای 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

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


لینک به ارسال

سلام و درود

 

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

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

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

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


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

سلام و درود

 

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

درود

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

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


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

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

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

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


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

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

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

web.zip

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


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

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

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

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

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


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

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

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

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

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


لینک به ارسال
در 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>

 

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


لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.


  • مطالب مشابه

    • توسط RZFURY
      سلام دوستان.
      سایت من به آدرس : funroid.ir
      مشکلش حرکت اسلایدر ها توی گوشی هست. با ویندوز مشکلی در حرکت دادنش وجود نداره و با ماوس راحت چپ و راست میره ولی وقتی سایتم رو توی گوشی باز میکنم و میخوام اسلایدر ها رو چپ و راست ببرم متاسفانه درجا میزنه و به درستی حرکت نمیکنه. کسی میدونه چجوری میشه درستش کرد. ممنون.
    • توسط ramy1908
      درود، وقت دوستان بخیر
      یه سوال خیلی خیلی تخصصی داشتم، من برای سایتم اسلایدر jQuery استفاده می کنم.
      چطور میتونم بخشی ایجاد کنم ادمین فقط بعضی از مطالب رو وارد اسلایدر کنه، نمیخوام که یه دسته جداگانه واسه اسلایدر ایجاد کنم.
      راهی وجود داره برای این کار؟
    • توسط aref_05
      با سلام
      آیا با حذف اسلایدر  سرعت سایت بالا میره ؟ این کارو پیشنهاد می کنید؟
    • توسط mohammdkhalilii
      با سلام و عرض خسته نباشید به تمامی دوستانم ، سوالی که از خدمتتون داشتم 
      من یه افزونه میخوام که مثل این قسمت وبسایت http://irselfmade.com/ 
      هم توی موبایل و تبلت هم توی دسکتاپ اسلایدر (به قول معروف چرخ فلکی ) افقی باشه 
      ممنونم 

    • توسط samira127
      من یک اسلایدر زدم با jsولی نمیشه وقتی اسلاید میشه ب صورت scrollو ul  نه اسلایدی اینم کد html

      <div class="col-12 col-md-6 pb-0 pb-md-3 pt-2 pr-md-1">
                          <div id="featured" class="carousel slide carousel" data-ride="carousel">
                              ّ <div id="dots" class="carousel-indicators">
                                  <span class="dot active" data-target="#carousel-example-generic"></span>
                              </div>
                              <div id="slider">
                                  <!--Item slider-->
                                  <?php
                                  $args = array(
                                      'posts_per_page' => 5,
                                      'cat' => 10,
                                  );
                                  $query = new WP_Query($args);
                                  ?>
                                  <?php if ($query->have_posts()) : ?>
                                  <?php $i = 0; ?>
                                  <?php while ($query->have_posts()) : $query->the_post() ?>
                                  <div class="slide active">
                                      <div class="card border-0 rounded-0 text-light overflow zoom">
                                          <div class="position-relative">
                                              <!--thumbnail img-->
                                              <div class="ratio_left-cover-1 image-wrapper overflow">
                                                  <a href="<?php the_permalink(); ?>">
                                                      <?php
                                                              $src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full', false);
                                                              ?>
                                                      <?php the_post_thumbnail("w-100 img-thumbnail mx-auto d-block overflow"); ?>
                                                  </a>
                                              </div>
                                              <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
                                                  <!--title-->
                                                  <a href="<?php the_permalink(); ?>">
                                                      <h2 class="h3 post-title text-white my-1"><?php the_title(); ?></h2>
                                                  </a>
                                                  <!— meta title —>
                                                  <div class="news-meta">
                                                      <span class="news-author">by <a class="text-white font-weight-bold" href="<?php the_permalink(); ?>"><?php the_author(); ?></a></span>
                                                      <span class="news-date"><?php the_time('d‌ F‌ Y'); ?></span>
                                                  </div>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                                  <?php endwhile ?>
                                  <?php endif ?>
                                  <?php wp_reset_postdata(); ?>
                                  <!--end item slider-->
                              </div>
                          </div>
                          <!--end carousel inner-->
                          <!--navigation-->
                          <a class="carousel-control-prev prev" href="#featured" role="button" data-slide="prev">
                              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                              <span class="sr-only">Previous</span>
                          </a>
                          <a class="carousel-control-next next" href="#featured" role="button" data-slide="next">
                              <span class="carousel-control-next-icon" aria-hidden="true"></span>
                              <span class="sr-only">Next</span>
                          </a>
                          <script type="text/javascript">
                          </script>
                      </div>

      اینم کد js

      var slide = document.getElementsByClassName('slide');
      var dot = document.getElementsByClassName('dot');
      var prev = document.querySelector('.prev');
      var next = document.querySelector('.next');
      var n = 0;
      var i;
      function disno(){
          for( i = 0 ; i<slide.length ; i++){
              slide.style.display = 'none';
          }
      }
      function no_active(){
          for( i = 0 ; i<dot.length ; i++){
              dot.classList.remove('active');
          }
      }
      next.addEventListener('click',function(e){
          e.preventDefault();
          n++;
          if( n > slide.length - 1){ // length starts From 1
              n = 0; // Arrays Starts From zero
          }
          disno();
          no_active()
          slide[n].style.display = 'block';
          dot[n].classList.add('active');
      })
      prev.addEventListener('click',function(e){
          e.preventDefault();
          n--;
          if( n < 0){ // length starts From 1
              n = slide.length - 1; // Arrays Starts From zero
          }
          disno();
          no_active()
          slide[n].style.display = 'block';
          dot[n].classList.add('active');
      })
      setInterval(function(){
          n++;
          if( n > slide.length - 1){ // length starts From 1
              n = 0; // Arrays Starts From zero
          }
          disno();
          no_active()
          slide[n].style.display = 'block';
          dot[n].classList.add('active');
      },3000)



×
×
  • اضافه کردن...