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

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";

    }

这给了我错误“类型错误: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();
    ...