simple photo viewer_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-31 18:38 出处：网络

I am fairly new to all this. 开发者_运维知识库I am trying to make a simple photo viewer with javascript or anything easy to alter.

I am fairly new to all this.

开发者_运维知识库I am trying to make a simple photo viewer with javascript or anything easy to alter.

I just want a next and prev. button to take you between photos. Click next and next photo shows. Just that simple. I have a flash version but I would like to avoid using flash. I've been doing it the long way by making multiple pages, one for each photo and a button that repeats. I know there must be a better way but I just can't seem to figure it out. Please help

I think you can combine Bryan and Paul's solutions.

First off, using JQuery will make life a lot easier (after you get over the short learning curve).

jQuery Cycle will let you make a slideshow that rotates between different images.

A JQuery Lightbox (and there are sooo many options out there) will let a user click on an image and have it fill the screen.

I respectfully disagree with wag2639 opinion about the jquery.

Here's my opinion. I think that when we mean (at least for me.) simple. We do not mean add +100K of Javascript code.

Beside, anything JQuery does you can do better in javascript. So why waste your time on something that will prevent you from learning the real Javascript. Since you are going to have a learning curve anyway.

Here is my version of a simple photo viewer.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
    <style>
    .PhotoFrame {
      width: 100%;
      height: 100vh;
      object-fit: contain;
    }
    </style>

    <div id="PhotoHolder">

      <img id="PhotoSlide" class="PhotoFrame" src="84154413.png" onclick="OnClickPhoto(event)">
    </div>

    <script>
    var ThePhotoTable = [
    "84154413.png",
    "84154414.png",
    "84154415.png",
    "84154416.png",
    "84154417.png"
    // ...
    ];
    var CurrentPhoto = 0;

    function OnClickPhoto (ThisEvent){
      let X,Y,W,H, Q;
      
      X= ThisEvent.clientX;
      Y= ThisEvent.clientY;
      W= ThisEvent.target.offsetWidth;
      H= ThisEvent.target.offsetHeight;
      Q= W/2;

      if(X < Q){
        if(CurrentPhoto > 0){
          DisplayPhotoIndx(--CurrentPhoto);
        }
      } else 
      if(X > (W - Q)){
        if(CurrentPhoto < ThePhotoTable.length - 1){
          DisplayPhotoIndx(++CurrentPhoto);
        }
      }
    }  
    function DisplayPhotoIndx(ThisIndx){
      let ThisImg = document.getElementById("PhotoSlide");

      ThisImg.src = ThePhotoTable[ThisIndx];
    }
    function SelfInit(){
      DisplayPhotoIndx(0);
    } SelfInit();
      
    </script>
    </body>
    </html>

Is this simple enough for you?