单击水平滚动图库中的图像以居中功能不起作用

Question

一段时间以来，我一直在努力让这个功能发挥作用，我已经在 Whosebug 和其他网站上搜索了答案，但完全没有运气。

我正在使用 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 函数： 我确实尝试了很多不同的方法，但是 none 有效，我将在下面列出 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";

    }

这给了我错误 “类型错误：document.getElementByID(...) 为空 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
    }

单击水平滚动图库中的图像以居中功能不起作用

Click image in horizontal scroll gallery to center function not working

javascript

css

jquery

center

gallery