在页面加载时显示目录中的图像

Question

just wondering if it's possible to adapt my code to display the first directory's images on the page at load time so as to have them showing before the user clicks a menu option, as the page looks a bit bear until the menu options are selected, here is my code, thanks.

 < script > $(document).ready(function() { $("a").click(function() { var dir_path = $(this).data("albumid"); //var txt=$(this).text(); //$(this).text(txt); 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> 

Answer 1

Add LoadGallery($('a[data-albumid]:first').data('albumid')); in your $(document).ready() function like following. $('a[data-albumid]:first') will select the first a having data-albumid attribute. Hope this will help you.

$(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;
    });
});