代码之家 › 专栏 › 技术社区 › Anesca

单击水平滚动库中的图像,使功能无法工作

center gallery css jquery javascript

Anesca · 技术社区 · 11 年前

我已经尝试让这个功能运行了一段时间了,我已经搜索了Stacksoverflow以及其他网站来寻找答案,但绝对没有运气。

我使用的是托马斯·卡恩(Thomas Kahn)的水平滚动画廊(www.smoothdivscroll.com),它工作得很好,但它没有内置的点击中心图像功能。我一直在尝试编写我自己的函数,但它对我来说并不奏效——我不确定这是因为我使用的水平滚动库还是其他原因。

这是我在index.php中调用库的地方:

<div class="container-fluid gallery-container">
    <div id="makeMeScrollable">
        <?php 
        $args = array( 'post_type' => 'homegallery', 'posts_per_page' => 1000, 'orderby'=>'date', 'order'=>'desc' );
        $loop = new WP_Query( $args );

        $count=0;

        while ( $loop->have_posts() ) : $loop->the_post();  

        $count++;

        $imgID = 'img-home-' . $count;
        ?>
            <img class="img-responsive horizontalscroll-img" id="portfolio-img <?php echo $imgID; ?>" src="<?php echo get_field('gallery-img'); ?>" alt="<?php the_title(); ?>" onClick="centerFunction('<?php echo $imgID; ?>');" />

        <?php
        endwhile; 
        wp_reset_query(); ?>  

    </div>
</div>

这是我的库css:

.gallery-container {
    padding:0px !important;
    height:auto;
}

.horizontalscroll-img {
    padding:0px 15px 0px 0px !important;
    width: auto !important;
}

#makeMeScrollable
    {
        width:100%;

        position: relative;
    }

    /* Replace the last selector for the type of element you have in
       your scroller. If you have div's use #makeMeScrollable div.scrollableArea div,
       if you have links use #makeMeScrollable div.scrollableArea a and so on. */
    #makeMeScrollable div.scrollableArea img
    {
        position: relative;
        float: left;
        margin: 0;
        padding: 0;
        /* If you don't want the images in the scroller to be selectable, try the following
           block of code. It's just a nice feature that prevent the images from
           accidentally becoming selected/inverted when the user interacts with the scroller. */
        -webkit-user-select: #makeMeScrollable div.scrollableArea div;
        -khtml-user-select: #makeMeScrollable div.scrollableArea div;
        -moz-user-select: #makeMeScrollable div.scrollableArea div;
        -o-user-select: #makeMeScrollable div.scrollableArea div;
        user-select: #makeMeScrollable div.scrollableArea div;
     }

这是我的footer.php脚本标记中的javascript/jquery函数: 我确实尝试了许多不同的方法,但没有一种有效,我将在下面列出2种

        function centerFunction(i) {

        //First set of code I tried
        var w = document.getElementById(i).clientWidth;
        $(i).style.left = "50%"; //I tried both '$(i)' and 'this'
        $(i).style.marginLeft = Math.round(w/2) + 'px'; 
        $(i).style.margin = "0 auto";

    }

这给了我一个错误 “TypeError:document.getElementByID(…)为空 var w=文档.getElementById(i).clientWidth;"

我跳过了函数,由于某种原因,它没有保存图像的唯一id,但是我可以看到它已正确传递给函数。

我尝试的第二个功能是:

        function centerFunction(i) {

        //Second set of code I tried            
        var w = $(i).width();
        var margin = w/2;

        $(i).css("margin-left","-"+margin);

        $(i).css("margin","0 auto");
        $(i).css("left","50%");

    }

这并没有给我一个错误,但当我点击图像时什么都没有发生。

我尝试过其他我在网上找到的方法,或者尝试过自己写作,但似乎没有任何效果。如果有人能帮忙,我会非常感激的。

2 回复 | 直到 7 年前

Reinder Wit 11 年前

看起来图像的ID与传递给JS函数的ID不匹配。

您可以这样设置ID:

 id="portfolio-img <?php echo $imgID; ?>"

但是像这样调用函数:

 onClick="centerFunction('<?php echo $imgID; ?>');"

尝试删除 portfolio-img 部分

此外,请注意,如果使用jQuery,则需要添加哈希:

function centerFunction(i) {
    i = '#' + i;
    var w = $(i).width();
    ...

Anesca 11 年前

仅供参考,任何人使用与我相同的水平滚动条时,我将代码更改为以下内容以使其正常工作:

function centerFunction(i) {

        var newis = '#'.concat(i);

        var w = $(newis).width();

        if (w<600) { //for smaller images
            var margin = w*(-1);
        } else { //for larger images
            var margin = w/6*(-1);
        }

        $("#makeMeScrollable").smoothDivScroll("scrollToElement", "id", i); //this scrolls to the element you want
        $("#makeMeScrollable").smoothDivScroll("move", margin); //this was to get it in the middle
    }