Question

我一直试图让这个功能工作一段时间，我已经搜索了Stackoverflow以及其他网站的答案，但绝对没有运气。

我正在使用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（...）为null var w = document.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%");

    }

这并没有给我一个错误，但是当我点击图片时没有任何反应。

我尝试过我在网上找到的其他方法，或者试图自己编写，但似乎没有任何工作。如果有人可以提供帮助，我会非常感激。

Answer 1

看起来图像的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();
    ...

Answer 2

对于任何使用与我相同的水平滚动条的人来说，我将其代码更改为此以使其正常工作：

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
    }

单击水平滚动图库中的图像以使中心功能无效

2 个答案: