Results 1 to 4 of 4

Thread: Trying to make a simple photo gallery?

  1. #1

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,003

    Trying to make a simple photo gallery?

    I am trying to make a simple photo gallery. I know it's probably easier to find a free one but I'm not learning anything by doing that. My setup is plain and pretty simple. I've attached a screenshot of my page which is loaded with images (they will eventually be resized smaller once everything is working). I simply wish to click on any image and then open that image to a larger size on a new page. THIS ELUDES ME!!! Below is the Javascript that creates the page of images.

    The below function runs at "onload" of the page.

    Code:
    <script>
        function getImages(dirLocation) {
            var dir = dirLocation;
    
            var fileextension = "jpg";
            
            $.ajax({
                //This will retrieve the contents of the folder if the folder is configured as 'browsable'
                url: dir,
    
                success: function(data) {
                    //This empty() statement clears the canvas so a new directory can be reloaded
                    $("#container1").empty();
    
                    //List all png file names in the page
                    $(data).find("a:contains(" + fileextension + ")").each(function() {
                        var pathName = this.href;
                        var strLen = pathName.lastIndexOf('/');
                        var fileName = pathName.substring(pathName.lastIndexOf('/') + 1);
                        var newFileName = pathName.slice(0, strLen, pathName) + "/" + dir + fileName;
    
                        var div = "<div id='images' class='images'>" +
                            "<a href=''><img src=" + newFileName + " width='450' height='auto' onclick='showImage()>" +
                            "<div class='caption'></div></a></div>"
                        $("#container1").append($(div));
                    });
                }
            });
        }
        //
        //
        //
        function showImage() {
            var largeImage = document.getElementById('images');
            largeImage.style.display = 'block';
            largeImage.style.width=1000+"px";
            largeImage.style.height="auto";
            var url=largeImage.getAttribute('src');
            window.open(url,'Image','width=largeImage.stylewidth,height=largeImage.style.height,resizable=1');
        }
    
    </script>
    Thanks for your help,
    Attached Images Attached Images  
    Blake

  2. #2
    Freelancer akhileshbc's Avatar
    Join Date
    Jun 2008
    Location
    Trivandrum, Kerala, India
    Posts
    7,652

    Re: Trying to make a simple photo gallery?

    Am confused!
    Are you asking a specific question or trying to share your code with others?

    If my post was helpful to you, then express your gratitude using Rate this Post.
    And if your problem is SOLVED, then please Mark the Thread as RESOLVED (see it in action - video)
    My system: AMD FX 6100, Gigabyte Motherboard, 8 GB Crossair Vengance, Cooler Master 450W Thunder PSU, 1.4 TB HDD, 18.5" TFT(Wide), Antec V1 Cabinet

    Social Group: VBForums - Developers from India


    Skills: PHP, MySQL, jQuery, VB.Net, Photoshop, CodeIgniter, Bootstrap,...

  3. #3

    Re: Trying to make a simple photo gallery?

    Hii Blakemckenna,

    Try this one...

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    * {
      box-sizing: border-box;
    }
    
    body {
      margin: 0;
      font-family: Arial;
    }
    
    /* The grid: Four equal columns that floats next to each other */
    .column {
      float: left;
      width: 25%;
      padding: 10px;
    }
    
    /* Style the images inside the grid */
    .column img {
      opacity: 0.8; 
      cursor: pointer; 
    }
    
    .column img:hover {
      opacity: 1;
    }
    
    /* Clear floats after the columns */
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    
    /* The expanding image container */
    .container {
      position: relative;
      display: none;
    }
    
    /* Expanding image text */
    #imgtext {
      position: absolute;
      bottom: 15px;
      left: 15px;
      color: white;
      font-size: 20px;
    }
    
    /* Closable button inside the expanded image */
    .closebtn {
      position: absolute;
      top: 10px;
      right: 15px;
      color: white;
      font-size: 35px;
      cursor: pointer;
    }
    </style>
    </head>
    <body>
    
    <div style="text-align:center">
      <h2>Tabbed Image Gallery</h2>
      <p>Click on the images below:</p>
    </div>
    
    <!-- The four columns -->
    <div class="row">
      <div class="column">
        <img src="img_nature.jpg" alt="Nature" style="width:100%" onclick="myFunction(this);">
      </div>
      <div class="column">
        <img src="img_snow.jpg" alt="Snow" style="width:100%" onclick="myFunction(this);">
      </div>
      <div class="column">
        <img src="img_mountains.jpg" alt="Mountains" style="width:100%" onclick="myFunction(this);">
      </div>
      <div class="column">
        <img src="img_lights.jpg" alt="Lights" style="width:100%" onclick="myFunction(this);">
      </div>
    </div>
    
    <div class="container">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <img id="expandedImg" style="width:100%">
      <div id="imgtext"></div>
    </div>
    
    <script>
    function myFunction(imgs) {
      var expandImg = document.getElementById("expandedImg");
      var imgText = document.getElementById("imgtext");
      expandImg.src = imgs.src;
      imgText.innerHTML = imgs.alt;
      expandImg.parentElement.style.display = "block";
    }
    </script>
    
    </body>
    </html>

  4. #4
    New Member
    Join Date
    Mar 2021
    Posts
    8

    Re: Trying to make a simple photo gallery?

    Yes You Can Try This one....

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    * {
    box-sizing: border-box;
    }

    body {
    margin: 0;
    font-family: Arial;
    }

    /* The grid: Four equal columns that floats next to each other */
    .column {
    float: left;
    width: 25%;
    padding: 10px;
    }

    /* Style the images inside the grid */
    .column img {
    opacity: 0.8;
    cursor: pointer;
    }

    .column img:hover {
    opacity: 1;
    }

    /* Clear floats after the columns */
    .row:after {
    content: "";
    display: table;
    clear: both;
    }

    /* The expanding image container */
    .container {
    position: relative;
    display: none;
    }

    /* Expanding image text */
    #imgtext {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: white;
    font-size: 20px;
    }

    /* Closable button inside the expanded image */
    .closebtn {
    position: absolute;
    top: 10px;
    right: 15px;
    color: white;
    font-size: 35px;
    cursor: pointer;
    }
    </style>
    </head>
    <body>

    <div style="text-align:center">
    <h2>Tabbed Image Gallery</h2>
    <p>Click on the images below:</p>
    </div>

    <!-- The four columns -->
    <div class="row">
    <div class="column">
    <img src="img_nature.jpg" alt="Nature" style="width:100%" onclick="myFunction(this);">
    </div>
    <div class="column">
    <img src="img_snow.jpg" alt="Snow" style="width:100%" onclick="myFunction(this);">
    </div>
    <div class="column">
    <img src="img_mountains.jpg" alt="Mountains" style="width:100%" onclick="myFunction(this);">
    </div>
    <div class="column">
    <img src="img_lights.jpg" alt="Lights" style="width:100%" onclick="myFunction(this);">
    </div>
    </div>

    <div class="container">
    <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
    <img id="expandedImg" style="width:100%">
    <div id="imgtext"></div>
    </div>

    <script>
    function myFunction(imgs) {
    var expandImg = document.getElementById("expandedImg");
    var imgText = document.getElementById("imgtext");
    expandImg.src = imgs.src;
    imgText.innerHTML = imgs.alt;
    expandImg.parentElement.style.display = "block";
    }
    </script>

    </body>
    </html>

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width