使用横向和纵向的滑动滑块

我已经创建了一个需要根据图像是横向还是纵向来返回可变图像计数的Wordpress滑块。所以我所做的就是让Wordpress检索图片尺寸，然后根据图片的方向分配一个类到帖子。使用横向和纵向的滑动滑块

然后，我使用该类将所有纵向的div与风景图像具有的相同列名称配对。

我现在的问题是我剩下空白的div。我一直在使用其他人的jQuery代码，我不确定这是否与滑动滑块的数量相冲突，或者如果幻灯片可能是在脚本运行之前创建的，这会分割图像。无论如何，真的会赞赏一些洞察。我的代码如下：

\t <div class="slider"> 
 
\t \t \t <span> 
 
\t \t \t \t <span class="element half"><?php get_template_part('template-parts/content', 'single'); ?></span> 
 
\t \t \t </span> 
 
<?php /* 
 
    * This is just a simple loop to display 7 attachments attached to a post or page in WordPress 
 
    * You can change 'medium' and 'thumbnail' to add sizes you have definied in your theme by the add_image_size function 
 
    * in WordPress 
 
    */ 
 
?> 
 
    <?php 
 
\t $thumb_ID = get_post_thumbnail_id($post->ID); 
 
    $args = array('post_type' => 'attachment', 'numberposts' => -1, 'post_status' => null, 'post_parent' => $post->ID, 'exclude' => $thumb_ID); 
 
    $attachments = get_posts($args); 
 
    if ($attachments) { 
 
     foreach ($attachments as $attachment) { 
 
      $image_attributes = wp_get_attachment_image_src($attachment->ID, 'medium'); 
 
\t \t \t $wi = $image_attributes[1]; 
 
\t \t \t $he = $image_attributes[2]; 
 
\t \t \t if ($wi > $he) \t \t : \t $orient = 'full'; 
 
\t \t \t elseif ($wi < $he) \t : \t $orient = 'half'; 
 
\t \t \t endif;?> 
 
\t \t \t \t <span> 
 
\t \t \t \t \t <span class="element <?php echo $orient; ?>"><?php echo wp_get_attachment_image( $attachment->ID, 'large'); ?></span> \t \t 
 
\t \t \t \t </span> 
 
     <?php } 
 
\t \t } ?> 
 
\t </div> 
 
<script> 
 
    jQuery(window).load(function() { 
 
// Convert the NodeList to an Array 
 
\t var pairs = []; 
 
\t jQuery('span.half').each(function(i, div) { 
 
\t var i_over_2 = Math.floor(i/2); 
 
\t if (!pairs[i_over_2]) pairs[i_over_2] = jQuery(); 
 
\t pairs[i_over_2] = pairs[i_over_2].add(div); 
 
\t }); 
 
\t jQuery.each(pairs, function(i, p) { 
 
\t p.wrapAll("<span class='full'></span>"); 
 
\t }); 
 

 
\t \t 
 
}); 
 
jQuery(document).ready(function(){ 
 
\t jQuery('.slider').slick({ 
 
\t arrows: true, 
 
\t infinite: false, 
 
\t speed: 500, 
 
\t fade: true, 
 
\t cssEase: 'linear' 
 
\t }); 
 
}); 
 
    </script>

dev的网站可以在这里看到：dev site

来源

2016-08-02 Martin Hugo

好了，所以看来，当我的JavaScript包装了两个项目，它输出的包裹后与滑块发起前一个额外股利。有任何想法吗？ –

好了，所以我想通了，当阵列中移动周围的图像被服用从一个div中移出并放置在另一个div中 - 所以不是直接添加Slick Slider所需的div，而是通过HTML生成。对于只有横向图像的网页也存在问题。因此，对于任何想要添加滑块的解决方案，第一项是内容，第二项是背景图像，其余为横向或纵向。

<div class="slider"> 
 
\t \t \t <div> \t 
 
\t \t \t \t <div class="full"> 
 
\t \t \t \t \t <div class="element half"><?php get_template_part('template-parts/content', 'single'); ?></div> 
 
\t \t \t \t \t <div class="element half" style="background:url('<?php the_post_thumbnail_url();?>') no-repeat center center;background-size:cover;position:absolute;top:0;right:0;bottom:0;"></div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
<?php /* 
 
    * This is just a simple loop to display 7 attachments attached to a post or page in WordPress 
 
    * You can change 'medium' and 'thumbnail' to add sizes you have definied in your theme by the add_image_size function 
 
    * in WordPress 
 
    */ 
 
?> 
 
    <?php 
 
\t $thumb_ID = get_post_thumbnail_id($post->ID); 
 
    $args = array('post_type' => 'attachment', 'numberposts' => -1, 'post_status' => null, 'post_parent' => $post->ID, 'exclude' => $thumb_ID); 
 
    $attachments = get_posts($args); 
 
    if ($attachments) { 
 
     foreach ($attachments as $attachment) { 
 
      $image_attributes = wp_get_attachment_image_src($attachment->ID, 'medium'); 
 
\t \t \t $wi = $image_attributes[1]; 
 
\t \t \t $he = $image_attributes[2]; 
 
\t \t \t if ($wi > $he) \t \t : \t $orient = 'landscape'; 
 
\t \t \t elseif ($wi < $he) \t : \t $orient = 'portrait'; 
 
\t \t \t endif;?> 
 
\t \t \t \t \t <img src="<?php echo wp_get_attachment_image_url($attachment->ID, 'large'); ?>" class="element <?php echo $orient; ?>"/> \t \t 
 
     <?php } 
 
\t \t } ?> 
 
\t </div> 
 

 
<script> 
 
    jQuery(document).ready(function() { 
 
// Convert the NodeList to an Array 
 
\t var pairs = []; 
 
\t jQuery('.portrait').each(function(i, div) { 
 
\t var i_over_2 = Math.floor(i/2); 
 
\t if (!pairs[i_over_2]) pairs[i_over_2] = jQuery(); 
 
\t pairs[i_over_2] = pairs[i_over_2].add(div); 
 
    
 
\t }); 
 
\t jQuery.each(pairs, function(i, p) { 
 
\t p.wrapAll("<div><div class='full'></div></div>"); 
 
\t 
 
\t }); 
 
\t jQuery('.landscape').wrap("<div><div class='full'></div></div>"); 
 
}); 
 

 
\t jQuery(document).ready(function(){ 
 
\t jQuery('.slider').slick({ 
 
\t arrows: true, 
 
\t infinite: false, 
 
\t speed: 500, 
 
\t fade: true, 
 
\t cssEase: 'linear' 
 
\t }); 
 
}); 
 
    
 
    </script>

来源

2016-09-20 14:33:48

使用横向和纵向的滑动滑块

回答

相关问题