jquery滑块在wordpress中的可视化作曲家自定义简码中不起作用

Question

我正在尝试在可视化作曲家中制作自定义短代码，当我应用文本、标题、单个图像时一切都很好，但现在我需要使用滑块创建自定义短代码，我的 jQuery 无法工作带滑块。包含 jQuery 我已经检查过了，但是图像没有显示为滑块，它显示为单个图像。我在每个循环中都写了我的“div”是否正确？

我的图片代码是

foreach($image_ids as $image_id)
{
    $images = wp_get_attachment_image_src($image_id, 'company_logo');

    $html.= '<div id="slideshow"><a href="#" class="slideshow-prev">&laquo;</a><ul><li>';
    $html.='<img src="'.$images[0].'" alt="'.$atts['title'].'">';
    $html.= '</li></ul><a href="#" class="slideshow-next">&raquo;</a></div>';

    $images++;
}

jQuery 代码是：

//an image width in pixels 
var imageWidth = 600;

//DOM and all content is loaded 
$(window).ready(function () {

    var currentImage = 0;

    //set image count 
    var allImages = $('#slideshow li img').length;

    //setup slideshow frame width
    $('#slideshow ul').width(allImages * imageWidth);

    //attach click event to slideshow buttons
    $('.slideshow-next').click(function () {

        //increase image counter
        currentImage++;
        //if we are at the end let set it to 0
        if (currentImage >= allImages) currentImage = 0;
        //calcualte and set position
        setFramePosition(currentImage);

    });

    $('.slideshow-prev').click(function () {

        //decrease image counter
        currentImage--;
        //if we are at the end let set it to 0
        if (currentImage < 0) currentImage = allImages - 1;
        //calcualte and set position
        setFramePosition(currentImage);

    });

});

//calculate the slideshow frame position and animate it to the new position
function setFramePosition(pos) {

    //calculate position
    var px = imageWidth * pos * -1;
    //set ul left position
    $('#slideshow ul').animate({
        left: px
    }, 300);
}

Answer 1

你的 for 循环是错误的。试试这个。

    $Inc = 0;

    foreach($image_ids as $image_id)
    {
        $images = wp_get_attachment_image_src($image_id, 'company_logo');

        $html.= '<div id="slideshow"><a href="#" class="slideshow-prev">&laquo;</a><ul><li>';
        $html.='<img src="'.$images[$Inc].'" alt="'.$atts['title'].'">';
        $html.= '</li></ul><a href="#" class="slideshow-next">&raquo;</a></div>';

        $images++;
        $Inc++;
    }

还有你的 js

    //an image width in pixels 
    var imageWidth = 600;


    //DOM and all content is loaded 
    jQuery(document).ready(function($){

        var currentImage = 0;

        //set image count 
        var allImages = $('#slideshow li img').length;

        //setup slideshow frame width
        $('#slideshow ul').width(allImages * imageWidth);

        //attach click event to slideshow buttons
        $('.slideshow-next').click(function () {

            //increase image counter
            currentImage++;
            //if we are at the end let set it to 0
            if (currentImage >= allImages) currentImage = 0;
            //calcualte and set position
            setFramePosition(currentImage);

        });

        $('.slideshow-prev').click(function () {

            //decrease image counter
            currentImage--;
            //if we are at the end let set it to 0
            if (currentImage < 0) currentImage = allImages - 1;
            //calcualte and set position
            setFramePosition(currentImage);

        });

    });

    //calculate the slideshow frame position and animate it to the new position
    //calculate the slideshow frame position and animate it to the new position
    function setFramePosition(pos) {

        //calculate position
        var px = imageWidth * pos * -1;
        //set ul left position
        jQuery('#slideshow ul').animate({
            left: px
        }, 300);
    }