一个简单的图片画廊。

时间：2021-07-10 16:50:05

I wanna make a next-prev type webcomic image gallery like that of xkcd or smbc but I'm having a bit of a rough start. I've been asking the wrong people and searching for the wrong things. Obviously, this has even been asked here before but I want to make it from scratch! Just using pure JavaScript, HTML5 and CSS3. I feel this project will help me learn the ropes.

我想做一个类似xkcd或smbc的下一个prev类型的webcomic image gallery，但是我有一个粗略的开始。我一直在问错误的人，寻找错误的东西。很明显，这个问题之前已经有人问过了，但是我想从头开始。使用纯JavaScript、HTML5和CSS3。我觉得这个项目会帮助我学会诀窍。

The following is the first idea to pop into my head.

下面是我想到的第一个想法。

HTML::

HTML::

 <h1>Oscars 2015</h1>
 <button id="prev" onclick="prev(); return false;" disabled>PREVIOUS</button>
 <button id="next" onclick="next(); return false;">NEXT</button>
 <h3>(<span id="num">#</span>) <span id='title'>title</span></h3>
 <img id="comic"/>

Javascript::

Javascript::

var img = [
 ["http://i.imgur.com/B1YclC5.jpg", "Birdman or (The Unexpected Virtue of Ignorance) won Best Picture."],
 ["http://i.imgur.com/XjAdinX.jpg", "Eddie Redmayne won Best Actor in a Leading Role for his role in The Theory of Everything."],
 ["http://i.imgur.com/kCj3uvC.jpg", "Julianne Moore won Best Actress in a Leading Role for her role in Still Alice."],
 ["http://i.imgur.com/OJq9hq1.jpg", "J K Simmons won Best Actor in a Supporting Role for his role in Whiplash."],
 ["http://i.imgur.com/qZ4XnIJ.jpg", "Patricia Arguette won Best Actress in a Supporting Role for her role in Boyhood."],
 ["http://i.imgur.com/QTGeTJ6.jpg?1","Big Hero 6 won Best Animated Feature Film."]
];

var i = 0;

function setComic() {
    console.log(img[i]);
    document.getElementById("comic").src = img[i][0];
    document.getElementById("num").textContent = i+1;
    document.getElementById("title").textContent = img[i][1];
}

setComic();

function prev() {
    i--;
    if (i <= 0) document.getElementById("prev").setAttribute('disabled', true);
    else document.getElementById("next").disabled = false;
    setComic();
    console.log(i);
}

function next() {
    i++;
    if (i >= img.length - 1) document.getElementById("next").disabled = true;
    else document.getElementById("prev").disabled = false;
    setComic();
    console.log(i);
}

See it in action here!

在这里看到它的作用!

I wanted to put the buttons both above & below the picture. So, I did and I replaced the next/prev id with classes and used the document.getElementsByClass() thing but it isn't working as I imagined. (code here) And that's just the tip of the iceberg.

我想把上面和下面的按钮都放进去。所以，我做了，我用类替换了next/prev id，并使用document.getElementsByClass()东西，但它并没有像我想象的那样工作。(这里的代码)这只是冰山一角。

My image storage method is whack. Pageloading is whack, I'm whack and my duck goes quack.

我的图像存储方法是whack。Pageloading是whack，我是whack，我的鸭子嘎嘎叫。

MY QUESTIONS ARE AS FOLLOWS:

我的问题如下:

1) How can I make my code more efficient and effective?

1)如何使我的代码更高效、更有效?

2) How can I make loading of images better for slow connections?

2)我怎样才能更好地加载图像来进行慢速连接?

3) Any good advice for making the thing I want to make; resources, tips, etc. etc.

3)提出我想做的事情的任何好建议;资源、技巧等等。

*Sigh* ... Could I bother you for a cup of help, good neighbour.

*叹息*……我能麻烦你帮个忙吗，好邻居。

3 个解决方案

#1

1  

Here's an approach. I've added it, rather than simply let the question fall-through to code-review, since it failed to enable/disable the buttons correctly - you may see my comment above for more info.

这里有一个方法。我已经添加了它，而不是简单地让问题通过代码复查，因为它不能正确地启用/禁用按钮——您可能会看到我的评论以获得更多的信息。

<!doctype html>
<html>
<head>
<script>
"use strict";
var img = [
    ["http://i.imgur.com/B1YclC5.jpg", "Birdman or (The Unexpected Virtue of Ignorance) won Best Picture."],
    ["http://i.imgur.com/XjAdinX.jpg", "Eddie Redmayne won Best Actor in a Leading Role for his role in The Theory of Everything."],
    ["http://i.imgur.com/kCj3uvC.jpg", "Julianne Moore won Best Actress in a Leading Role for her role in Still Alice."],
    ["http://i.imgur.com/OJq9hq1.jpg", "J K Simmons won Best Actor in a Supporting Role for his role in Whiplash."],
    ["http://i.imgur.com/qZ4XnIJ.jpg", "Patricia Arguette won Best Actress in a Supporting Role for her role in Boyhood."],
    ["http://i.imgur.com/QTGeTJ6.jpg?1", "Big Hero 6 won Best Animated Feature Film."],
    ["http://i.imgur.com/sYXnpMC.jpg", "Birdman or (The Unexpected Virtue of Ignorance) won Best Cinematography."],
    ["http://i.imgur.com/I0necik.jpg", "The Grand Budapest Hotel won Best Costume Design."],
    ["http://i.imgur.com/WKoIcqp.jpg", "Birdman or (The Unexpected Virtue of Ignorance) won Best Directing."],
    ["http://i.imgur.com/FAOxXO4.jpg", "CitizenFour won Best Documentary Feature."],
    ["http://i.imgur.com/7jWMv2d.jpg", "Crisis Hotline: Veterans Press 1 won Best Documentary Short Subject."],
    ["http://i.imgur.com/WMxECgv.jpg", "Whiplash won Best Film Editing"],
    ["http://i.imgur.com/igS4Vmh.jpg", "Ida won Best Foreign Language Film."],
    ["http://i.imgur.com/6PxTKRo.jpg", "The Grand Budapest Hotel won Best Makeup and Hairstyling."],
    ["http://i.imgur.com/H83ss3z.jpg", "The Grand Budapest Hotel won Best Original Score."],
    ["http://i.imgur.com/pD5LG2o.jpg", "Glory from the film Selma won Best Original Song."],
    ["http://i.imgur.com/7vJYuKI.jpg", "The Grand Budapest Hotel won Best Production Design."],
    ["http://i.imgur.com/Xpe3tVC.jpg", "Feast won Best Animated Short Film."],
    ["http://i.imgur.com/OIe1PGe.png", "American Sniper won Best Sound Editing."],
    ["http://i.imgur.com/PvqfxQe.jpg", "Whiplash won Best Sound Mixing."],
    ["http://i.imgur.com/2Z4jjz7.jpg", "Interstellar won Best Visual Effects."],
    ["http://i.imgur.com/AOciJZ2.jpg", "The Imitation Game won Best Adapted Screenplay."],
    ["http://i.imgur.com/jAWd8MK.jpg", "Birdman or (The Unexpected Virtue of Ignorance) won Best Original Screenplay."],
    ["http://i.imgur.com/sJM5sw2.jpg", "Cat tax."]
];

window.addEventListener('load', onDocLoaded, false);

function byId(elemId){return document.getElementById(elemId);}
function allByClass(className){return document.getElementsByClassName(className);}
function forEachNode(nodeList, func){for (var i=0, n=nodeList.length; i<n; i++) func(nodeList[i], i, nodeList); }

function onDocLoaded(evt)
{
    var prevBtns = allByClass('prevBtn');
    var nextBtns = allByClass('nextBtn');
    forEachNode(prevBtns, function(elem, index, list) { elem.addEventListener('click', onPrevBtnClick, false); } );
    forEachNode(nextBtns, function(elem, index, list) { elem.addEventListener('click', onNextBtnClick, false); } );
    setComic();
}


var curImgIndex = 0;

function setComic()
{
    console.log(img[curImgIndex]);
    document.getElementById("comic").src = img[curImgIndex][0];
    document.getElementById("num").textContent = curImgIndex + 1;
    document.getElementById("title").textContent = img[curImgIndex][1];
}

function enableButtons(className, isEnabled)
{
    var btnList = allByClass(className);
    forEachNode(btnList, nodeFunc);

    function nodeFunc(elem, index, list)
    {
        elem.disabled = !isEnabled;
    }
}

function onPrevBtnClick()
{
    --curImgIndex;
    if (curImgIndex < 1)
        enableButtons('prevBtn', false);
    else 
        enableButtons('prevBtn', true);

    enableButtons('nextBtn', true);
    setComic();
    console.log(curImgIndex);
}

function onNextBtnClick() 
{
    ++curImgIndex;
    if (curImgIndex > img.length - 2)
        enableButtons('nextBtn', false);
    else 
        enableButtons('nextBtn', true);

    enableButtons('prevBtn', true);
    setComic();
    console.log(curImgIndex);
}
</script>
<style>
img {
    height:250px;
}
</style>
</head>
<body>
    <h1>Oscars 2015</h1>

    <!--Top Controls-->
    <button class="prevBtn" disabled>PREVIOUS</button>
    <button class="nextBtn">NEXT</button>

    <h3>(<span id="num">#</span>) <span id='title'>title</span></h3>

    <img id="comic" />
    <br/>
    <br/>
    <!--Bottom Controls-->
    <button class="prevBtn" disabled>PREVIOUS</button>
    <button class="nextBtn">NEXT</button>
</body>
</html>

#2

1  

You could make use of css for this, and keep your html/jquery to a minimum.

您可以使用css来实现这一点，并将您的html/jquery最小化。

Notice how I've kept the jquery simple, and extracted the src attribute from the img tag down the left hand side, and then used this as my background for my .big image? That way, I'm keeping requests to a minimum by using the image already there

注意我如何保持jquery简单，并从左侧的img标记中提取src属性，然后将其作为my .big图像的背景。这样，我就可以使用已经存在的图像来保存请求。

$('.sidepanel img').click(function() {
  var val = $(this).attr("src");
  $('.gallery .big').css("background", "url(" + val + ")").css("background-size", "100% 100%");
});
.sidepanel {
  width: 100px;
  height: 400px;
  display: inline-block;
}
.sidepanel img {
  height: 100px;
  width: 100px;
}
.gallery .big {
  height: 400px;
  width: 400px;
  background: lightgray;
  background-size: 100% 100%;
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
  <div class="sidepanel">
    <img src="http://placekitten.com/g/300/300" />
    <img src="http://placekitten.com/g/200/300" />
    <img src="http://placekitten.com/g/300/200" />
    <img src="http://placekitten.com/g/300/150" />
  </div>
  <div class="big"></div>
</div>

#3

1  

There's no reason for each image to have its own array, for example, you can just use the split(', ') feature.

每个图像都没有理由有它自己的数组，例如，您可以使用split('， ')特性。

Also, I added a 'change image' function that receives parameters so you end up using less code.

此外，我还添加了一个“更改图像”函数，该函数接收参数，从而使用更少的代码。

Enjoy!

享受吧!

var images = [
    'http://i.imgur.com/B1YclC5.jpg, description0, alt0',
    'http://i.imgur.com/XjAdinX.jpg, description1, alt1',
    'http://i.imgur.com/kCj3uvC.jpg, description2, alt2',
    'http://i.imgur.com/OJq9hq1.jpg, description3, alt3'],
    max = parseInt(images.length - 1),
    curr = 0;

function display(a, b, c) {
    img = document.getElementById('myImage');
    img.src = a;
    img.setAttribute('alt', b);
    document.getElementById('desc').innerHTML = c;
}

function next() {
    if (curr < max) {
        curr += 1;
        arr = images[curr].split(', ');
        path = arr[0];
        desc = arr[2];
        alt = arr[1];
        display(path, desc, alt);
    }
}

function prev() {
    if (curr > 0) {
        curr -= 1;
        arr = images[curr].split(', ');
        path = arr[0];
        desc = arr[2];
        alt = arr[1];
        display(path, desc, alt);
    }
}

http://jsfiddle.net/scott88/p4utrd7v/

http://jsfiddle.net/scott88/p4utrd7v/

#1

1  

Here's an approach. I've added it, rather than simply let the question fall-through to code-review, since it failed to enable/disable the buttons correctly - you may see my comment above for more info.

这里有一个方法。我已经添加了它，而不是简单地让问题通过代码复查，因为它不能正确地启用/禁用按钮——您可能会看到我的评论以获得更多的信息。

<!doctype html>
<html>
<head>
<script>
"use strict";
var img = [
    ["http://i.imgur.com/B1YclC5.jpg", "Birdman or (The Unexpected Virtue of Ignorance) won Best Picture."],
    ["http://i.imgur.com/XjAdinX.jpg", "Eddie Redmayne won Best Actor in a Leading Role for his role in The Theory of Everything."],
    ["http://i.imgur.com/kCj3uvC.jpg", "Julianne Moore won Best Actress in a Leading Role for her role in Still Alice."],
    ["http://i.imgur.com/OJq9hq1.jpg", "J K Simmons won Best Actor in a Supporting Role for his role in Whiplash."],
    ["http://i.imgur.com/qZ4XnIJ.jpg", "Patricia Arguette won Best Actress in a Supporting Role for her role in Boyhood."],
    ["http://i.imgur.com/QTGeTJ6.jpg?1", "Big Hero 6 won Best Animated Feature Film."],
    ["http://i.imgur.com/sYXnpMC.jpg", "Birdman or (The Unexpected Virtue of Ignorance) won Best Cinematography."],
    ["http://i.imgur.com/I0necik.jpg", "The Grand Budapest Hotel won Best Costume Design."],
    ["http://i.imgur.com/WKoIcqp.jpg", "Birdman or (The Unexpected Virtue of Ignorance) won Best Directing."],
    ["http://i.imgur.com/FAOxXO4.jpg", "CitizenFour won Best Documentary Feature."],
    ["http://i.imgur.com/7jWMv2d.jpg", "Crisis Hotline: Veterans Press 1 won Best Documentary Short Subject."],
    ["http://i.imgur.com/WMxECgv.jpg", "Whiplash won Best Film Editing"],
    ["http://i.imgur.com/igS4Vmh.jpg", "Ida won Best Foreign Language Film."],
    ["http://i.imgur.com/6PxTKRo.jpg", "The Grand Budapest Hotel won Best Makeup and Hairstyling."],
    ["http://i.imgur.com/H83ss3z.jpg", "The Grand Budapest Hotel won Best Original Score."],
    ["http://i.imgur.com/pD5LG2o.jpg", "Glory from the film Selma won Best Original Song."],
    ["http://i.imgur.com/7vJYuKI.jpg", "The Grand Budapest Hotel won Best Production Design."],
    ["http://i.imgur.com/Xpe3tVC.jpg", "Feast won Best Animated Short Film."],
    ["http://i.imgur.com/OIe1PGe.png", "American Sniper won Best Sound Editing."],
    ["http://i.imgur.com/PvqfxQe.jpg", "Whiplash won Best Sound Mixing."],
    ["http://i.imgur.com/2Z4jjz7.jpg", "Interstellar won Best Visual Effects."],
    ["http://i.imgur.com/AOciJZ2.jpg", "The Imitation Game won Best Adapted Screenplay."],
    ["http://i.imgur.com/jAWd8MK.jpg", "Birdman or (The Unexpected Virtue of Ignorance) won Best Original Screenplay."],
    ["http://i.imgur.com/sJM5sw2.jpg", "Cat tax."]
];

window.addEventListener('load', onDocLoaded, false);

function byId(elemId){return document.getElementById(elemId);}
function allByClass(className){return document.getElementsByClassName(className);}
function forEachNode(nodeList, func){for (var i=0, n=nodeList.length; i<n; i++) func(nodeList[i], i, nodeList); }

function onDocLoaded(evt)
{
    var prevBtns = allByClass('prevBtn');
    var nextBtns = allByClass('nextBtn');
    forEachNode(prevBtns, function(elem, index, list) { elem.addEventListener('click', onPrevBtnClick, false); } );
    forEachNode(nextBtns, function(elem, index, list) { elem.addEventListener('click', onNextBtnClick, false); } );
    setComic();
}


var curImgIndex = 0;

function setComic()
{
    console.log(img[curImgIndex]);
    document.getElementById("comic").src = img[curImgIndex][0];
    document.getElementById("num").textContent = curImgIndex + 1;
    document.getElementById("title").textContent = img[curImgIndex][1];
}

function enableButtons(className, isEnabled)
{
    var btnList = allByClass(className);
    forEachNode(btnList, nodeFunc);

    function nodeFunc(elem, index, list)
    {
        elem.disabled = !isEnabled;
    }
}

function onPrevBtnClick()
{
    --curImgIndex;
    if (curImgIndex < 1)
        enableButtons('prevBtn', false);
    else 
        enableButtons('prevBtn', true);

    enableButtons('nextBtn', true);
    setComic();
    console.log(curImgIndex);
}

function onNextBtnClick() 
{
    ++curImgIndex;
    if (curImgIndex > img.length - 2)
        enableButtons('nextBtn', false);
    else 
        enableButtons('nextBtn', true);

    enableButtons('prevBtn', true);
    setComic();
    console.log(curImgIndex);
}
</script>
<style>
img {
    height:250px;
}
</style>
</head>
<body>
    <h1>Oscars 2015</h1>

    <!--Top Controls-->
    <button class="prevBtn" disabled>PREVIOUS</button>
    <button class="nextBtn">NEXT</button>

    <h3>(<span id="num">#</span>) <span id='title'>title</span></h3>

    <img id="comic" />
    <br/>
    <br/>
    <!--Bottom Controls-->
    <button class="prevBtn" disabled>PREVIOUS</button>
    <button class="nextBtn">NEXT</button>
</body>
</html>

#2

1  

You could make use of css for this, and keep your html/jquery to a minimum.

您可以使用css来实现这一点，并将您的html/jquery最小化。

Notice how I've kept the jquery simple, and extracted the src attribute from the img tag down the left hand side, and then used this as my background for my .big image? That way, I'm keeping requests to a minimum by using the image already there

注意我如何保持jquery简单，并从左侧的img标记中提取src属性，然后将其作为my .big图像的背景。这样，我就可以使用已经存在的图像来保存请求。

$('.sidepanel img').click(function() {
  var val = $(this).attr("src");
  $('.gallery .big').css("background", "url(" + val + ")").css("background-size", "100% 100%");
});
.sidepanel {
  width: 100px;
  height: 400px;
  display: inline-block;
}
.sidepanel img {
  height: 100px;
  width: 100px;
}
.gallery .big {
  height: 400px;
  width: 400px;
  background: lightgray;
  background-size: 100% 100%;
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
  <div class="sidepanel">
    <img src="http://placekitten.com/g/300/300" />
    <img src="http://placekitten.com/g/200/300" />
    <img src="http://placekitten.com/g/300/200" />
    <img src="http://placekitten.com/g/300/150" />
  </div>
  <div class="big"></div>
</div>

#3

1  

There's no reason for each image to have its own array, for example, you can just use the split(', ') feature.

每个图像都没有理由有它自己的数组，例如，您可以使用split('， ')特性。

Also, I added a 'change image' function that receives parameters so you end up using less code.

此外，我还添加了一个“更改图像”函数，该函数接收参数，从而使用更少的代码。

Enjoy!

享受吧!

var images = [
    'http://i.imgur.com/B1YclC5.jpg, description0, alt0',
    'http://i.imgur.com/XjAdinX.jpg, description1, alt1',
    'http://i.imgur.com/kCj3uvC.jpg, description2, alt2',
    'http://i.imgur.com/OJq9hq1.jpg, description3, alt3'],
    max = parseInt(images.length - 1),
    curr = 0;

function display(a, b, c) {
    img = document.getElementById('myImage');
    img.src = a;
    img.setAttribute('alt', b);
    document.getElementById('desc').innerHTML = c;
}

function next() {
    if (curr < max) {
        curr += 1;
        arr = images[curr].split(', ');
        path = arr[0];
        desc = arr[2];
        alt = arr[1];
        display(path, desc, alt);
    }
}

function prev() {
    if (curr > 0) {
        curr -= 1;
        arr = images[curr].split(', ');
        path = arr[0];
        desc = arr[2];
        alt = arr[1];
        display(path, desc, alt);
    }
}

http://jsfiddle.net/scott88/p4utrd7v/

http://jsfiddle.net/scott88/p4utrd7v/

标签：

相关文章