javascript - jQuery Reel 插件动态加载卷轴图像

Question

我希望任何熟悉 jQuery Reel 插件的人都可以帮助我。

我有一个动态加载图像的表格，这些图像上有一个 onclick 函数，该函数应该将卷轴图像更改为相应的单元格项目。 Sprite 并没有改变硬编码的默认 Sprite 。

我模糊地理解，我必须使用 "reel" 类初始化动态图像，但添加属性 class="reel" 不会执行任何操作。

还有一个问题请教 the same thing

--但我不了解 jQuery，也不知道如何将答案应用到我自己的项目中。

function previewIt(item) {
    var reel = document.getElementById("previewReel");
    reel.dataset.image = item.id + "sprite.png";
}

function headCatalogLoader() {
    var table = document.getElementById("headCatalog");
    var img = 2;
    var uID = 8;

    for (var i = 0; i <= 2; i++) {
        var row = table.insertRow(i);

        for (var k = 0; k <= 2; k++) {		// 2 is because 3 columns
            var skinTone = "none";
            var cell = row.insertCell(k);

            if (k == 0) {
                skinTone = "lgt";
            }
            else if (k == 1) {
                skinTone = "med";
            }
            else if (k == 2) {
                skinTone = "drk";
            }

            cell.innerHTML = "<img src=\"headimgs/head" + skinTone + img + ".png\" id=\"head" + uID + skinTone + "\" onclick=\"previewIt(this)\" class=\"reel\">";

            uID--;
        }
        img--;
    }
}

<script src="http://test.vostrel.net/jquery.reel/jquery.reel.js" type="text/javascript"></script>
<div id="headPreview">
    <img src="head1med.png" height="800"
            id="previewReel"
            class="reel"
            data-image="head1medsprite.png"
            data-frames="8"
            data-footage="4">
</div>

如果代码让您感到畏缩，我深表歉意。如果可能的话，我想纯粹用 JavaScript 来完成，如果不可能，那么简短的解释确实会对我有所帮助。谢谢 friend 们。

Answer 1

要求:

• 您有一个表格，动态显示图像
• 当用户点击动态加载图像中的图像时，您只想在图像id="previewReel"上应用卷轴

Solution :

• You need to change main image #previewReel reel image runtime.
• $("#previewReel").reel("image", $(item).attr('src'));

检查以下内容:

headCatalogLoader();

function headCatalogLoader() {
    var table = document.getElementById("headCatalog");
    var img = 2;
    var uID = 8;

    for (var i = 0; i <= 2; i++) {
        var row = table.insertRow(i);

        for (var k = 0; k <= 2; k++) {		// 2 is because 3 columns
            var skinTone = "none";
            var cell = row.insertCell(k);

            if (k == 0) {
                skinTone = "lgt";
            }
            else if (k == 1) {
                skinTone = "med";
            }
            else if (k == 2) {
                skinTone = "drk";
            }

            cell.innerHTML = "<img src=\"https://picsum.photos/200/200/?image=65" + uID + "\" id=\"head" + uID + skinTone + "\" onclick=\"previewIt(this)\"  \>";

            uID--;
        }
        img--;
    }
}

function previewIt(item) {
    $("#previewReel").reel("image", $(item).attr('src')); ///this line will apply new reel 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.vostrel.cz/jquery.reel.js" type="text/javascript"></script>

<div id="headPreview">
    <img src="https://picsum.photos/200/200"  width="210" height="186"
            id="previewReel"
            class="reel"
            data-image="https://picsum.photos/200/200"
            data-frames="8"
            data-footage="4"
            data-revolution="800"
            />

</div>

<br><br>
<ul>
<li>Runtime table image loaded:</li>
<li>Click on any image, to load its reel effect above</li>
</ul>
<table id="headCatalog"></table>