Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Unsubscribed User
Unsubscribed User
17,284 Points

JQuery Problem

I'm pretty new to JQuery and I'm working on a "simple" project on making a Lightbox affect from an image directory. I've watched Chalky's video in JQuery Basics "Creating a simple Lightbox" but it doesn't really help me with the problem I'm having. I don't have my images in my HTML. I need to access them from my images directory somehow using JQuery. This is part of the challenge, I cannot alter my HTML in any way other than linking script files to it. I need to access the ID gallery from the HTML and populate the page with the images using JQuery and add a Lightbox affect to the images onClick. The images are located in javapic/images. Any help would be appreciated...Thanks.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javapic</title>
    <link rel="stylesheet" href="css/style.css" />

</head>
<body>
<main class="gallery_page">
    <header>javapic <span class="tagline">develop something beautiful</span></header>
    <section id="gallery" class="gallery">
    <!--<li><img src="images/pdxcg_01.jpg"/></li>-->       

    <div id="image_show" class="display_none "><img src="images/pdxcg_40.jpg" /></di>

</main>
<script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>

</body>
</html>

5 Answers

Erwin Meesters
Erwin Meesters
15,088 Points

You can actually do it, but you have to make the image folder browsable in order to prevent 403 errors. You can put for example a .htaccess file in the directory you want to make browsable. (create a txt file, put this in it: Options +Indexes, rename it to .htaccess, upload it in your javapic directory)

I altered your html a bit for this example:

<html>
  <head>
  ...   
  </head>
  <body>    
    <section id="gallery"></section>  
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

Below the javascript. With an ajax call the images are retrieved from the images folder. The retrieved data object contains the images as anchor links (a href) and a bunch of other data. The code below strips these anchor links down to the filename of each image and appends these to the #gallery element.

script.js

var dir = "images/";  //folder with the images
var fileextension=".jpg"; // the extension of the images
$.ajax({         
    url: dir,
    success: function (data) {
        $(data).find("a:contains(" + fileextension + ")").each(function () {                    
            var filename = this.href.replace(window.location.href, "");               
            $("#gallery").append($("<img src=" + dir + filename + ">"));
        });
    }
});

I hope you can build further on this.

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

jQuery is client-side, and cannot read the contents of a directory in the way you're talking about. Normally you would use a server-side language like PHP. Basically, you need a way to serve the images to your jQuery script to be processed. If you're not able to do that dynamically, you'll need to include that information in your script.

Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

Can you append the images to the body then append the light box to the appended images div?

Unsubscribed User
Unsubscribed User
17,284 Points
Unsubscribed User
Unsubscribed User
17,284 Points

Jacob, can you give me an example of this.

Jacob Mishkin
Jacob Mishkin
23,118 Points

This is what I was talking about but after you append the imgs then append the lightbox

you will need to use AJAX

here are some examples:

http://stackoverflow.com/questions/6994212/is-there-a-way-to-return-a-list-of-all-the-image-file-names-from-a-folder-using

http://stackoverflow.com/questions/18480550/how-to-load-all-the-images-from-one-of-my-folder-into-my-web-page-using-jquery

these examples do not discuss a light box but the rather the bigger issue is getting the imgages on the page.

Unsubscribed User
Unsubscribed User
17,284 Points
Unsubscribed User
Unsubscribed User
17,284 Points

Thanks for taking the time to help me out guys, I will try your suggestions and let you know...