I asked this question a few days ago got some responses but then I went away for the weekend and I'm here now trying to understand and solve the same problem. Started a new post so more people can see. I have and image gallery where a large image goes into a div called "large-image" when some thumbnails are clicked. I then attempted to add a lightbox that would display an even larger image. So my html looks like this: html ` My first step in making the lightbox was capturing the src of the image click so I used this code: javascript $(".large-image img").click(function() { var imageLocation = $(this).attr("src"); }); So if I clicked on the image above I expected to see img/dotted.jpg stored in imageLocation. However instead I got this: http://127.0.0.1:55944/img/dotted.jpg I then tried a similar sort of thing on my friends laptoo and it return his picture with out the ip or port infront. Why is my computer doing this because it's causing me problems with my future code. Some people ave said I'm using absolute paths, but my images are all in a img folder and have relative paths.

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

Posted May 4, 2015 3:58pm by

img src problem..

I asked this question a few days ago got some responses but then I went away for the weekend and I'm here now trying to understand and solve the same problem. Started a new post so more people can see.

I have and image gallery where a large image goes into a div called "large-image" when some thumbnails are clicked. I then attempted to add a lightbox that would display an even larger image.

So my html looks like this:

<div class="large-image">
  <img src="img/dotted.jpg">
</div>

My first step in making the lightbox was capturing the src of the image click so I used this code:

$(".large-image img").click(function() {
  var imageLocation = $(this).attr("src");
});

So if I clicked on the image above I expected to see img/dotted.jpg stored in imageLocation. However instead I got this:

http://127.0.0.1:55944/img/dotted.jpg

I then tried a similar sort of thing on my friends laptoo and it return his picture with out the ip or port infront. Why is my computer doing this because it's causing me problems with my future code. Some people ave said I'm using absolute paths, but my images are all in a img folder and have relative paths.

May 4, 2015 5:32pm

http://port-80-tgjmwnpi1f.treehouse-app.com/

here it is in workspaces, sorry but what do you mean by snapshot??

2 Answers

May 4, 2015 8:13pm

I figured it out for you, Troy. The problem came from this pushing of images and specifically the line that is now commented out which pushed the "src" of the thumbnail into "source". It seems that "src" property returns the entire current path of the image instead of the relative path. So, to get around this problem, I put $thumbnails[i] into a jQuery object and then called it's src attribute which does return the relative path:

for(var i = 0; i < imageCount; i += 1) {
  images.push({
//The commented out line is the old line that returns full, current path
//    source: $thumbnails[i].src, 
//The line below returns the relative path, as we want
    source: $($thumbnails[i]).attr('src'),
    caption: $thumbnails[i].alt,
    artistName: $thumbnails[i].name
  });
}

And then, the only other thing I had to change was getting rid of the lines in the click where you using regular expressions to get rid of the first part of the path. All of that is no longer necessary. :) I kept the commented out lines as part of the program so you can see what I changed.

$(".thumb-large img").click(function(){
  var imageLocation = $(this).attr('src');
//  var imgExt = /(\.w{3,4}$)/;
//  var lightImage = imageLocation.replace(imgExt,'_l$1');

  //Update overlay with the image linked in the link
//  $image.attr("src", lightImage);
  $image.attr("src", imageLocation);
  //Show the overlay.
  $overlay.show();

  var artistLightName = $(this).attr("name");

  $artistName.text(artistLightName);

  //Get child's alt attribute and set caption
  var captionText = $(".thumb-large-descrip p").text();
  $caption.text(captionText);

});

May 4, 2015 8:22pm

All I can say is thanks I'm gonna read up on what you wrote here tomorrow properly to understand but it immediately makes a bit of sense because that is the line I've been looking at for hours thinking something isn't right there.

Can I ask how you work out that something was wrong there? Plus once just thanks a lot you have gone out your way to solve my problem and I really appreciate it. You seem like you know a bit about javascript and jquery. I'm desperate to keep imrpoving are you just using treehouse or other ways to learn just interested???

May 4, 2015 8:36pm

Well, I analyzed the entire code, looking for any places that the source of the image might be retrieved or manipulated because that was our problem here. And then what I did ties in with what I am gonna tell you about truly learning JavaScript. I used Chrome's console to pick apart what was going with the source. I used console.log in several places to map out data that was occurring. I'll randomly use console.log to log out everything. And knowing what I know about jQuery (because of my hours spent playing with the console), I realized that $thumbnails[i] weren't jQuery objects themselves and that is why I couldn't call the attr() method on them. So, I wrapped it in a jQuery object and called its attr() method and logged the value out to the console: console.log($(thumbnails[i]).attr('src')); And then as soon as I loaded up the page, I could tell that it was showing the relative path.

You may really benefit from the courses at Codeacademy.com as well. They are totally free and deal with many languages including JavaScript and jQuery. I used them in compliment with Treehouse, and it worked out very well.

But, these are still only basic steps, because I believe that one of the most powerful tools for learning is the web console. You have access to an incredibly powerful web console in Chrome. Become friends with it! Use it to play around with everything. You can do so much cool stuff with the console that it's ridiculous. You could use it to test code before you even put it on the page. In fact, I'll often hand out code that you can plug into the console to manipulate a page right before your eyes. Like let's say you wanted to give every single element on any page a nice border so that you can see where the content is actually positioned:

var el = document.body.getElementsByTagName('*');
for (var i = 0; i < el.length; i++) {
el[i].style.border = "1px solid black";
}

You can run that on any web page and it will put a 1px solid black border on every single element on the page. Of course, it's not permanent in any way, but it's a really cool way to test code and expand your knowledge of everything front end related. It is a seriously underrated powerful tool.

May 4, 2015 4:25pm

I'm not sure if it's a typo or not, but since you are using a class on your div, you need to have a period in front of large-image inside of your jQuery selector, like this:

$(".large-image img").click(function() {
  var imageLocation = $(this).attr.("src");
});

May 4, 2015 4:26pm

yeah its a typo

May 4, 2015 4:28pm

There is also an extra period in front of "attr" that shouldn't be there.

May 4, 2015 4:48pm

Marcus is also right. (I think he meant to say after .attr, though.) :)

May 4, 2015 4:50pm

yeah I edited both your things, I haven't got these typos in my actual code and I don't think these would affect as it probably just wouldn't work instead its giving me the value I mentioned above, but thanks for reading my post guys

May 4, 2015 4:52pm

Well, the address 127.0.0.1 is the home address for any computer, which means you're developing the site locally, I suppose? If that's the case, then that is exactly where the image will be stored since it's not live on the internet yet.

May 4, 2015 4:52pm

I don't know what value you refer to, though. The URL you use for your screenshot uses "127.0.0.1" which is a localhost URL and can't be accessed by other people. It is your personal computer's URL. If you want to share the screenshot, you need to use a service such as Imgur, Photobucket, etc.

May 4, 2015 4:59pm

correct me if i'm wrong if you had an image stored in a folder img called dotted.jpg. When you tried to capture its src would you not expect it to come back img/dotted.jpg not http://127.0.0.1:55944/img/dotted.jpg. Correct me if I'm wrong.

May 4, 2015 5:06pm

Apologies. I thought that was a screenshot for whatever reason. When you are testing the code on your PC, are you running it through a server such as IIS or opening it as a file in the browser?

May 4, 2015 5:12pm

I using brackets as a text editor then opening my files straight into chrome.

May 4, 2015 5:19pm

I did some sample code using an image and got back the relative path, regardless of whether I used a server or opened it as a file, as you did. I have no idea what could be going on. I've never seen anything like this before. That kind of URL is something you get out of a web server. It shouldn't be addressing localhost at all if you're just opening the file up in Chrome.

May 4, 2015 5:23pm

ok thanks do you think if I posted my javascript/ jquery code it would help, its really bugging but no worries you've help me enough already

May 4, 2015 5:25pm

The best way for us to help you debug this is going to be to upload what you have into Workspaces and then post a snapshot of the workspace so that way we will have the same resources you have and possibly replicate the error.

May 4, 2015 5:41pm

http://port-80-tgjmwnpi1f.treehouse-app.com/

here it is in workspaces, sorry but what do you mean by snapshot??

May 4, 2015 6:03pm

http://www.teamtreehouse.com/forum/workspace-snapshots

May 4, 2015 6:58pm

heres a snapshot let me know if it worked

https://w.trhou.se/9sd8w5dmmf

May 4, 2015 7:00pm

There are no files in the snapshot.

May 4, 2015 7:01pm

Are you seeing files in the Workspace?

May 4, 2015 7:22pm

ok I've done it again I think this one has worked:

https://w.trhou.se/5aul5u46zv

I think its something to do with the way I'm loading my array if you go to line 24 on my js page it's below there where I start loading an array for the gallery. As I've been going going down my code I think its there where the problem could be but I dont know why???

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

troy beckett

troy beckett

img src problem..

troy beckett

troy beckett

2 Answers

Marcus Parsons

Marcus Parsons

troy beckett

troy beckett

Marcus Parsons

Marcus Parsons

Ryan Field

Ryan Field

troy beckett

troy beckett

Marcus Parsons

Marcus Parsons

Ryan Field

Ryan Field

troy beckett

troy beckett

Ryan Field

Ryan Field

Marcus Parsons

Marcus Parsons

troy beckett

troy beckett

Marcus Parsons

Marcus Parsons

troy beckett

troy beckett

Marcus Parsons

Marcus Parsons

troy beckett

troy beckett

Marcus Parsons

Marcus Parsons

troy beckett

troy beckett

Marcus Parsons

Marcus Parsons

troy beckett

troy beckett

Marcus Parsons

Marcus Parsons

Marcus Parsons

Marcus Parsons

troy beckett

troy beckett