CODEWITHSUNDEEP
javascripthtmlcssimagegallery
Bad Habit
Bad Habit

Reputation: 83

Issues with a Photo Gallery

So I'm trying to add a photogallery to my website. There was a .zip file that could be downloaded, with everything needed. I copied those files, replaced & checked so that the filepaths would be correct within the .html file and so on, but this is what happens: http://i49.tinypic.com/2m4ep0y.png

What I am trying to make: http://net.tutsplus.com/tutorials/javascript-ajax/create-a-spectacular-photo-gallery-with-mootools/

The CSS code can be found inside link above, my .css file looks exactly the same, just copy-pasted. The parts from the HTML file were also copied, so not sure where the problem is. Seems like it's not linking to either the javascript/css files? I've tripple-checked the paths and so on.

HTML Code, added inside BODY

<div id="container">

<h1>Photo Gallery</h1>

<div id="picture_section">
<div id="inside">

</div>
</div>

<div id="controls_vert">
<div id="up" class="deactivated">Scroll Up</div>
<div id="down">Scroll Down</div>
</div>

<div id="controls_horz">
<div id="left">Left</div>
<div id="right">Right</div>
</div>

</div>

<div id="display_picture_container">
<div id="display_picture">Click on the image to go back to the gallery.</div>
<div id="display_picture_img"></div>
</div>

Upvotes: 0

Views: 136

Answers (1)

user1910012
user1910012

Reputation: 46

I also downloaded the source file and this is how the code from 'index.html' looks like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Photo Gallery</title>

<link rel="stylesheet" type="text/css" href="main.css" />

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>

<body>

<div id="container">

<h1>Photo Gallery</h1>

<div id="picture_section">
<div id="inside">

</div>
</div>

<div id="controls_vert">
<div id="up" class="deactivated">Scroll Up</div>
<div id="down">Scroll Down</div>
</div>

<div id="controls_horz">
<div id="left">Left</div>
<div id="right">Right</div>
</div>

</div>

<div id="display_picture_container">
<div id="display_picture">Click on the image to go back to the gallery.</div>
<div id="display_picture_img"></div>
</div>

</body>
</html>

From what i can see in your screenshot it clearely displays nothing. You can change the filepaths of your images and thumbs from main.js file by replacing thumbs/ and picture/ with your desired folder name. Try to preserve the numerotation name of the files, otherwise it won't show up. Additionaly, you can replace the motools script line with the one specified in the tutorial: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>

Upvotes: 1

Related Questions