最佳Html和图片WordPress幻灯片插件

时间：2011-09-07 作者：BillPull

我想要一个简单易用的网站主页滑块，我已经玩了一堆插件，没有什么是真正适合我的需要或容易处理。我宁愿不花时间来建造自己的。

以下是我需要的要求

允许使用多个不同图像大小的滑块（大小与背景图像相同）

必须能够处理html和图像，以便可以链接到帖子

任何建议。我可以通过查询功能获得我需要的信息。

如果我必须构建自己的代码，这就是我希望代码采用的格式

<div id="feat-slider">
 <ul >
   <li id="feat-slide-id">
     <a href="permalink"><span class="feat-title">Title</span></a>
     <span class="feat-image">Featured Image</span>
   </li>
   ......
   ......
 </ul>
 <ul class="feat-nav">
   <li id="feat-slide-id">1</li>
   .......
 </ul>
 </div>

非常感谢。

1 个回复

最合适的回答,由SO网友:BillPull 整理而成

以下是我所做的，以防有人想复制它，注意到很多人在看

设置一个你选择的类别，特色图片将成为幻灯片，标题将显示出来，整个内容将永久对齐

下面是生成它的HTML/PHP

  <div id="slider">
          <ul id="featslider">
            <?php 
                $portquery = new WP_Query();
                $portquery->query(array(\'cat\'=> 3, \'posts_per_page\' => 4));

                while ($portquery->have_posts()) : $portquery->the_post(); 
                    echo "<li class=\'featslide\' id=\'feat-".$slidecount."\'>";
                    echo " <a href=\'".get_permalink($post->ID)."\'>";

                    echo \'<span class="slide-title sosmed">&nbsp;&nbsp;\'.the_title(\'\',\'\',false).\'&nbsp;&nbsp;&nbsp;&nbsp;</span>\';
            ?>
                    <?php if (has_post_thumbnail( $post->ID ) ): ?>
                        <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), \'single-post-thumbnail\' ); ?>
                        <?php 
                            echo "<img src=\'".$image[0]."\' />"; 
                        ?>
                    <?php endif; 

                    echo "</a></li>";
                    ?>

            <?php endwhile; ?>
          </ul>
        </div>
        <div id="featslide-nav" class="slidenav">

        </div>
    </div>

CSS您可能需要根据您的大小对此进行修改

  #slider{
    height:348px;
    width:800px;
    overflow:scroll;
    overflow-x:hidden;
    position:relative;z-index:5
  }
  #featslider{
list-style-type:none;
margin:0;
z-index:0;
  }
  .featslide{margin-top:-22px;}
  #featslide-nav{
z-index:100;
position:absolute;
margin-top:-24px;margin-left:700px;
 }
  .slide-title{
z-index:10;
color:#000;
padding:6px;
min-width:250px;
text-align:center;
background:#fff;
position:relative;top:30px;
font-size:22px;
 }
 .slidenav a{
text-decoration:none;
color:#fff;
background:#000;
padding:5px;
margin:2px;
cursor:pointer;
   }

然后jQuery

   //SLIDER CONTROLS
     $("#slider").css("overflow", "hidden");
     $("ul#featslider").cycle({
       fx: \'fade\',
       speed:    3000, 
       timeout:  6000,
       pager:"#featslide-nav"
   });

基于这篇关于在jquery循环中制作html幻灯片的博文http://line25.com/tutorials/build-a-simple-image-slideshow-with-jquery-cycle

结束

标签： plugin-recommendation jquery slideshow 小码农

从Flash中调用简单的JQuery

希望这对某些人来说真的很简单，但我是一个新手，正在尝试学习如何从嵌入式Flash swf连接到我网站上的JQuery。我试图先做一个简单的例子来测试Flash和JQuery之间的连接。。。我已经在我的页面上嵌入了一个swf。当我在Flash中单击我的按钮时，我希望它连接到一个JQuery函数，该函数会生成一个弹出警报，上面写着“hello world！”下面是我的JQuery函数（我需要命名该函数）：function helloWorld() { alert(\'Hello Worl

最佳Html和图片WordPress幻灯片插件

时间：2011-09-07 作者：BillPull

我想要一个简单易用的网站主页滑块，我已经玩了一堆插件，没有什么是真正适合我的需要或容易处理。我宁愿不花时间来建造自己的。

以下是我需要的要求

允许使用多个不同图像大小的滑块（大小与背景图像相同）

必须能够处理html和图像，以便可以链接到帖子

任何建议。我可以通过查询功能获得我需要的信息。

如果我必须构建自己的代码，这就是我希望代码采用的格式

<div id="feat-slider">
 <ul >
   <li id="feat-slide-id">
     <a href="permalink"><span class="feat-title">Title</span></a>
     <span class="feat-image">Featured Image</span>
   </li>
   ......
   ......
 </ul>
 <ul class="feat-nav">
   <li id="feat-slide-id">1</li>
   .......
 </ul>
 </div>

非常感谢。

1 个回复

最合适的回答,由SO网友:BillPull 整理而成

以下是我所做的，以防有人想复制它，注意到很多人在看

设置一个你选择的类别，特色图片将成为幻灯片，标题将显示出来，整个内容将永久对齐

下面是生成它的HTML/PHP

  <div id="slider">
          <ul id="featslider">
            <?php 
                $portquery = new WP_Query();
                $portquery->query(array(\'cat\'=> 3, \'posts_per_page\' => 4));

                while ($portquery->have_posts()) : $portquery->the_post(); 
                    echo "<li class=\'featslide\' id=\'feat-".$slidecount."\'>";
                    echo " <a href=\'".get_permalink($post->ID)."\'>";

                    echo \'<span class="slide-title sosmed">&nbsp;&nbsp;\'.the_title(\'\',\'\',false).\'&nbsp;&nbsp;&nbsp;&nbsp;</span>\';
            ?>
                    <?php if (has_post_thumbnail( $post->ID ) ): ?>
                        <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), \'single-post-thumbnail\' ); ?>
                        <?php 
                            echo "<img src=\'".$image[0]."\' />"; 
                        ?>
                    <?php endif; 

                    echo "</a></li>";
                    ?>

            <?php endwhile; ?>
          </ul>
        </div>
        <div id="featslide-nav" class="slidenav">

        </div>
    </div>

CSS您可能需要根据您的大小对此进行修改

  #slider{
    height:348px;
    width:800px;
    overflow:scroll;
    overflow-x:hidden;
    position:relative;z-index:5
  }
  #featslider{
list-style-type:none;
margin:0;
z-index:0;
  }
  .featslide{margin-top:-22px;}
  #featslide-nav{
z-index:100;
position:absolute;
margin-top:-24px;margin-left:700px;
 }
  .slide-title{
z-index:10;
color:#000;
padding:6px;
min-width:250px;
text-align:center;
background:#fff;
position:relative;top:30px;
font-size:22px;
 }
 .slidenav a{
text-decoration:none;
color:#fff;
background:#000;
padding:5px;
margin:2px;
cursor:pointer;
   }

然后jQuery

   //SLIDER CONTROLS
     $("#slider").css("overflow", "hidden");
     $("ul#featslider").cycle({
       fx: \'fade\',
       speed:    3000, 
       timeout:  6000,
       pager:"#featslide-nav"
   });

基于这篇关于在jquery循环中制作html幻灯片的博文http://line25.com/tutorials/build-a-simple-image-slideshow-with-jquery-cycle

标签： plugin-recommendation jquery slideshow 小码农

删除jQuery后在页脚加载jQuery迁移吗？

我正在以以下方式删除WordPress中的jQuery迁移：add_filter( \'wp_default_scripts\', \'remove_jquery_migrate\' ); function remove_jquery_migrate( &$scripts ){ if(!is_admin()){ $scripts->remove( \'jquery\'); $scripts->add( \

最佳Html和图片WordPress幻灯片插件

时间：2011-09-07 作者：BillPull

我想要一个简单易用的网站主页滑块，我已经玩了一堆插件，没有什么是真正适合我的需要或容易处理。我宁愿不花时间来建造自己的。

以下是我需要的要求

允许使用多个不同图像大小的滑块（大小与背景图像相同）

必须能够处理html和图像，以便可以链接到帖子

任何建议。我可以通过查询功能获得我需要的信息。

如果我必须构建自己的代码，这就是我希望代码采用的格式

<div id="feat-slider">
 <ul >
   <li id="feat-slide-id">
     <a href="permalink"><span class="feat-title">Title</span></a>
     <span class="feat-image">Featured Image</span>
   </li>
   ......
   ......
 </ul>
 <ul class="feat-nav">
   <li id="feat-slide-id">1</li>
   .......
 </ul>
 </div>

非常感谢。

1 个回复

最合适的回答,由SO网友:BillPull 整理而成

以下是我所做的，以防有人想复制它，注意到很多人在看

设置一个你选择的类别，特色图片将成为幻灯片，标题将显示出来，整个内容将永久对齐

下面是生成它的HTML/PHP

  <div id="slider">
          <ul id="featslider">
            <?php 
                $portquery = new WP_Query();
                $portquery->query(array(\'cat\'=> 3, \'posts_per_page\' => 4));

                while ($portquery->have_posts()) : $portquery->the_post(); 
                    echo "<li class=\'featslide\' id=\'feat-".$slidecount."\'>";
                    echo " <a href=\'".get_permalink($post->ID)."\'>";

                    echo \'<span class="slide-title sosmed">&nbsp;&nbsp;\'.the_title(\'\',\'\',false).\'&nbsp;&nbsp;&nbsp;&nbsp;</span>\';
            ?>
                    <?php if (has_post_thumbnail( $post->ID ) ): ?>
                        <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), \'single-post-thumbnail\' ); ?>
                        <?php 
                            echo "<img src=\'".$image[0]."\' />"; 
                        ?>
                    <?php endif; 

                    echo "</a></li>";
                    ?>

            <?php endwhile; ?>
          </ul>
        </div>
        <div id="featslide-nav" class="slidenav">

        </div>
    </div>

CSS您可能需要根据您的大小对此进行修改

  #slider{
    height:348px;
    width:800px;
    overflow:scroll;
    overflow-x:hidden;
    position:relative;z-index:5
  }
  #featslider{
list-style-type:none;
margin:0;
z-index:0;
  }
  .featslide{margin-top:-22px;}
  #featslide-nav{
z-index:100;
position:absolute;
margin-top:-24px;margin-left:700px;
 }
  .slide-title{
z-index:10;
color:#000;
padding:6px;
min-width:250px;
text-align:center;
background:#fff;
position:relative;top:30px;
font-size:22px;
 }
 .slidenav a{
text-decoration:none;
color:#fff;
background:#000;
padding:5px;
margin:2px;
cursor:pointer;
   }

然后jQuery

   //SLIDER CONTROLS
     $("#slider").css("overflow", "hidden");
     $("ul#featslider").cycle({
       fx: \'fade\',
       speed:    3000, 
       timeout:  6000,
       pager:"#featslide-nav"
   });

基于这篇关于在jquery循环中制作html幻灯片的博文http://line25.com/tutorials/build-a-simple-image-slideshow-with-jquery-cycle

标签： plugin-recommendation jquery slideshow 小码农

JQuery php请求返回一个奇怪的结果

我有一个奇怪的小故障发生在我身上，我不知道我是如何产生它的，或者它是否是正常的。我正在开发自己的插件，当一个足球队/足球队被输入到一个框中时，它会检查它是否已经在数据库中。以下是我的代码行add_action( \'admin_footer\', \'fws_teamcheck_javascript\' ); function fws_teamcheck_javascript() { ?> <script type="text/javascript">

小码农CODE

最佳Html和图片WordPress幻灯片插件

相关推荐

从Flash中调用简单的JQuery

小码农CODE

最佳Html和图片WordPress幻灯片插件

相关推荐

删除jQuery后在页脚加载jQuery迁移吗？

小码农CODE

最佳Html和图片WordPress幻灯片插件

相关推荐

JQuery php请求返回一个奇怪的结果