Automatically showcase images from a directory upon webpage loading

Is there a way to modify my code so that the images from the first directory are displayed on the page when it loads, instead of waiting for a menu option to be clicked? The page looks empty until a menu option is selected, and I would like the images to show up beforehand. Here is the current code, any suggestions are appreciated. Thank you.

< script >
  $(document).ready(function() {
    $("a").click(function() {
      var dir_path = $(this).data("albumid");
      
      LoadGallery(dir_path);
      return false;
    });
  });

function LoadGallery(dir_path) {
  $.ajax({
    url: dir_path,
    success: function(data) {
      $(".image-container").empty();

      $(data).find("a:contains(.jpg), a:contains(.png), a:contains(.jpeg)").each(function() {
        this.href.replace(window.location.host, "").replace("http:///", "");
        var file = dir_path + $(this).text();
        $(".image-container").append($("<a href='javascript:;' class='thumb' data-src='" + file + "'><img src='" + file + "' title='Click to enlarge' alt='#'/></a>"));

        if ($(".image-container").children("a").length === 30) {
          return false;
        }
      });

      $(".image-container").append("<strong><p>Click on a thumb nail to show a larger image.</p></strong>");

      $(".thumb").bind('click', function() {
        var Popup = "<div class='bg'></div>" + "<div class='wrapper'><img src='<img src=''/>" + "<label href='javascript:;' class='prev-image'>«</label><label href='javascript:;' class='next-image'>»</label><a href='javascript:;' class='close' title='Close'>Close</a>";
        var Img = $(this).attr("data-src");
        $("body").prepend(Popup);
        $(".bg").height($(window).height() * 4);
        $(".wrapper img").attr("src", Img);

        $(".prev-image").bind('click', function() {
          var prev = $(".image-container").find("img[src='" + Img + "']").parent().prev('a').find("img").attr('src');
          if (!prev || prev.length === 0)
            return false;
          else {
            $(".wrapper img").attr("src", prev);
            Img = prev;
          }
        });

        $(".next-image").bind('click', function() {
          var next = $(".image-container").find("img[src='" + Img + "']").parent().next('a').find("img").attr('src');
          if (!next || next.length === 0)
            return false;
          else {
            $(".wrapper img").attr("src", next);
            Img = next;
          }
        });

        $(".close").bind('click', function() {
          $(this).siblings("img").attr("src", "")
            .closest(".wrapper").remove();
          $(".bg").remove();
        });
      });
    }
  });
}; < /script>
@import url(http://fonts.googleapis.com/css?family=Varela+Round);
 #nav {
  float: left;
  width: 20px;
  margin: 10px 10px 20px 0px;
}
#nav,
#nav ul {
  list-style: none;
  padding: 0;
}
#nav a {
  position: relative;
  display: block;
  width: 105px;
  padding-left: 10px;
  margin: 3px 0;
  text-decoration: none;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-variant: small-caps;
  font-weight: bold;
  color: #fff;
}
#nav a:link,
#nav a:visited {
  border-left: #00425E solid 10px;
  color: #fff;
}
#nav a:hover,
#nav a:active {
  border-left-color: #fff;
  background-color: #770709;
  color: #fff;
}
#nav a#here {
  border-left-color: #fff;
  background-color: transparent;
  color: #fff;
}
#nav ul {
  margin-left: 20px;
}
#nav ul a {
  width: 50px;
  color: #fff;
}
.image-container {
  padding-top: 50px;
}
.image-container img {
  background-color: white;
  border: 4px solid #444;
  box-shadow: 0 0 5px #222;
  padding: 3px;
  margin-top: 10px;
  height: auto;
  width: auto;
  max-width: 100px;
  max-height: 100px;
  transition: all .7s ease-in-out;
}
.image-container img:hover {
  border: 4px solid #888;
  cursor: zoom-in;
}
.bg {
  background-color: #333;
  filter: alpha(opacity=70);
  left: 0;
  opacity: 0.7;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}
.wrapper {
  background-color: white;
  border: 3px solid #444;
  box-shadow: 0 0 5px #222;
  padding: 3px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
}
.wrapper .next-image {
  position: absolute;
  font-size: 2.8em;
  top: 50%;
  color: #999;
  width: 45px;
  line-height: 30px;
  text-align: center;
  height: 45px;
  border-radius: 100%;
  opacity: 0.7;
  filter: alpha(opacity=40);
  /* For IE8 and earlier */
  right: 10px;
  left: auto;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.wrapper .prev-image {
  position: absolute;
  font-size: 2.8em;
  top: 50%;
  color: #999;
  width: 45px;
  line-height: 30px;
  text-align: center;
  height: 45px;
  border-radius: 100%;
  opacity: 0.7;
  filter: alpha(opacity=40);
  /* For IE8 and earlier */
  left: 10px;
  right: auto;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.wrapper .prev-image:hover {
  border: 2px solid #ccc;
  cursor: pointer;
  opacity: 1;
}
.wrapper .next-image:hover {
  border: 2px solid #ccc;
  cursor: pointer;
  opacity: 1;
}
.close {
  background: transparent url(../gallery/close.png) no-repeat;
  height: 32px;
  position: absolute;
  right: -16px;
  text-indent: -9999px;
  top: -16px;
  width: 32px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content-container" style="height: 600px;">
  <div id="content" style="height: 600px;">
    <div style="float: left; width: 200px;">
      <h1> <span>The Gallery</span> </h1>
      <ul id="nav">
        <li><a href="" id="here">Gallery</a>
          <ul>
            <li><a href="#" data-albumid="images/gallery/fld01/">2014</a>
            </li>
            <li><a href="#" data-albumid="images/gallery/fld02/">2014</a>
            </li>
            <li><a href="#" data-albumid="images/gallery/fld03/">2014</a>
            </li>
            <li><a href="#" data-albumid="images/gallery/fld04/">2015</a>
            </li>
            <li><a href="#" data-albumid="images/gallery/fld05/">2015</a>
            </li>
          </ul>
        </li>
        <li><a href="../index.html">Back to home</a>
        </li>
      </ul>
    </div>
    <div class="image-container">
      <strong><p>Select a menu option to display a list of thumb nails.</p></strong>
    </div>

    <div class="clear"></div>
  </div>
</div>

javascriptjqueryhtmlcss

Answer №1

To implement this functionality, you need to insert the code 

LoadGallery($('a[data-albumid]:first').data('albumid'));
inside your $(document).ready() function as shown below. This code will target the first a element with the data-albumid attribute and load the gallery accordingly.

$(document).ready(function () {
    LoadGallery($('a[data-albumid]:first').data('albumid'));

    $("a").click(function () {
        var dir_path = $(this).data("albumid");
        //var txt=$(this).text();
        //$(this).text(txt);
        LoadGallery(dir_path);
        return false;
    });
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for adding submitted data to an already-existing local JSON file?

I have a new Angular assignment that requires me to push form data into an existing JSON file locally. The task is to develop an Angular application where users can create new tasks and view them on a separate page. Initially, I attempted using http.post ...

javascriptangular

Pattern Update Method: Iteratively updating each individual node

I'm struggling to grasp the concept of updating only those d3 nodes where the data has changed. Despite my efforts, I still can't seem to get it right. In the test example provided below, I am noticing that everything is being updated instead of ...

javascriptd3.js

Having difficulty automatically populating a textarea with the chosen option from a datalist

Is there a way to automatically populate the Address field of a client in a textarea based on the input of the client's name in an input field? I have created a 'for loop' to retrieve a datalist of client names. For the address, I retrieved ...

javascriptphphtml

How to create a full-page background image using Bootstrap?

Take a look at this example: In the provided example, there is a background landing page that expands to fit the width of the viewport, remains responsive, and does not take up the full width of the page. How can you utilize bootstrap to manually code an ...

htmlcsstwitter-bootstrap-3

Every time I attempt to build a React application, I encounter the same error message. I even checked the log file, but it keeps showing the proxy error

An error occurred in the command prompt while installing packages. This process may take a few minutes. Installing react, react-dom, and react-scripts with cra-template... Error: ERR_SOCKET_TIMEOUT The network encountered a socket timeout while trying to ...

javascriptnode.jsreactjsnpmproxy

Gridsome server-side rendering encounters issues with Auth0 authentication when the window object is not defined

After successfully following the Auth0 Vuejs tutorial with Gridsome during development, I encountered a problem when trying to build using gridsome build. The build failed because window was undefined in a server context. I discovered some issues in the A ...

javascriptvue.jsauth0server-side-renderinggridsome

PHP - Is there a way to transfer data between two PHP files using variables?

I have two unique files named index.php and get.php. The purpose of index.php is to serve as a web page. However, get.php is not designed to be accessed by the user as it is not intended to function as a web page; its sole purpose is to echo some HTML cod ...

phpjqueryajax

Encountering a problem with configuring webpack's CommonsChunkPlugin for multiple entry points

entry: { page1: '~/page1', page2: '~/page2', page3: '~/page3', lib: ['date-fns', 'lodash'], vendor: ['vue', 'vuex', 'vue-router'] }, new webpack.optimize.C ...

javascriptwebpackvue.jscommonschunkplugin

The issue of `window.setTimeout` not functioning properly with Google Maps Marker/XML integration has been a persistent

I'm having difficulty displaying markers individually from my database by making them "fly in." Here's the Ajax call: $.ajax({ type: "GET", async: true, url: '<?php echo PATH;?>ajax/map_process.php ...

jqueryajaxxmlgoogle-maps-api-3maps

Whenever I try to launch my React app using the `npm start` command in my command

After successfully creating a Simple React App and getting the happy hacking message on cmd, I encountered numerous errors when trying to run "npm start" on cmd. Despite multiple attempts at uninstalling and reinstalling node and npm, the issue persists. H ...

javascriptnode.jsreactjsreact-nativenpm

How can we identify all the foreign_key1 ids from a MySQL join table that have a specific foreign_key2 assigned to them that is within a specified list?

I have a scenario where I have two tables, Table A and Table B, connected by a many-to-many relationship. Table A: ID --- 1 2 3 Table B: ID --- 4 5 6 7 Table AB: ID | A_ID | B_ID ---------------- 8 | 1 | 4 9 | 1 | 5 10 | 1 | 6 11 | 1 | 7 ...

javascriptmysqlnode.jstypescriptsequelize.js

Incorrect rendering on mobile screen width

I am facing an issue where my div does not display as 100% width in the mobile version. Below is the JSX code I am using: <div> <div expand="lg" className="login-header"> <h1>logo</h1> <h1&g ...

htmlcssmobileviewportmeta

Having Difficulty Configuring Async Request Outcome

I'm struggling to access the outcome of an asynchronous request made to an rss feed. After reading a post on How do I return the response from an asynchronous call?, which recommended using Promises, I tried implementing one. However, even though the ...

javascriptasynchronousrequest

Unravel intricate JSON data and display it in a Material-UI table

How to convert the complex JSON data provided below into a material-ui table similar to the example shown. Each row may contain either a single value or multiple rows in a single box. I have attempted to display the data in 2 columns only, but need help wi ...

javascriptreactjshtml-tablematerial-ui

Is there a way to eliminate the blue border from a Material React Modal?

I am currently using the React Material Modal and noticed that in the demo examples, there is a blue border when the modal is opened. Is there a way to remove this blue border? I have tried setting the disableAutoFocus property to "true" in the Modal Api ...

javascriptreactjsmaterial-ui

Encountering issues with running the 'npm run serve' command locally in a Vue project

Trying to develop an app with Vue, I used the npm command. However, when I executed "npm run serve," the messages showed me that I should be running the app at "http://localhost:8080/" and not on "x86_64-apple-darwin13.4.0:". Is there a way to fix this by ...

javascriptnode.jsvue.jsnpm

How to disable scrolling for React components with CSS styling

When incorporating a React component into my HTML, I follow this pattern: <html> <body> <div id=app>${appHtml}</div> <script src="/bundle.js"></script> </body> </html> Within my application, th ...

javascripthtmlcssreactjs

How can Angular2 detect when an entity is clicked within a window?

There are multiple items generated using *ngFor: <my-item *ngFor="let item of myArray" [p]="item"></my-item> I am able to handle a click event like this: <my-item ... (click)="doWork(item)"></my-item> However, I want to avoid a ...

javascriptangulartypescript

Issues with Bootstrap form functionality

I found inspiration on http://getbootstrap.com and decided to enhance it by including a hidden input. The file result.php contains $_REQUEST. Only the hidden value is visible to me. <form class="form-horizontal" role="form" action="/requests/result.p ...

phphtmltwitter-bootstrap

PHP's 'include' function is now being ported into modern Javascript as a new method

As the library of JS frameworks continues to expand, I'm wondering if there is a simple JS replacement or alternative for PHP's 'include' function. Is PHP include still a relevant method for including chunks of code, or are there better ...

javascriptphphtmlframeworksinclude