Member Avatar for charisma

I found this code that looks like i will be able to add and delete pictures on the fly. What I would like to know is. How can I get the code to take pictures from my folder instead of the way they have it.

Thanks in advance.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Simple and Effective Photo Gallery with HTML and JavaScript</title>

<style type="text/css">
body {
background: #222;
margin-top: 20px;
}

h3 {
color: #eee;
font-family: Verdana;
}

.thumbnails img {
height: 80px;
border: 4px solid #555;
padding: 1px;
margin: 0 10px 10px 0;
}

.thumbnails img:hover {
border: 4px solid #00ccff;
cursor:pointer;
}

.preview img {
border: 4px solid #444;
padding: 1px;
height: 500px;
}
</style>


</head>
<body>

<div class="gallery" align="center">
<h3>Simple and Effective Photo Gallery with HTML and JavaScript</h3><br/>

<div class="thumbnails">
<img onmouseover="preview.src=img1.src" id="img1" src="http://bit.ly/2rz3hy" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img2.src" id="img2" src="http://bit.ly/1ug1e6" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img3.src" id="img3" src="http://bit.ly/1yIAYc" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img4.src" id="img4" src="http://bit.ly/2LHyDW" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img5.src" id="img5" src="http://bit.ly/2wyHSR" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img6.src" id="img6" src="http://bit.ly/yRo1i" alt="Image Not Loaded"/>
</div><br/>

<div class="preview" align="center">
 <img id="preview" src="http://bit.ly/2rz3hy" alt="No Image Loaded"/>
</div>

</div> <!-- Close the gallery div -->


</body>
</html>
  • 2 Contributors
  • 4 Replies
  • 131 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by charisma
Member Avatar for Philippe.Lahaie

in the <img> tags you will want to change the src parameter, simply change that link to the path of your image in your website's folder architecture.

I usualy make a single folder called Images directly in my website's root, and you can get that using :

<img src="Images/yourpic.jpg" alt="..." />

edit: worth noting that if you are using asp.net and master pages, the path to get your image from within your master page might change depending on the location of the opened page in subfolders, therefor you would need to use absolute paths, like so :

<img src="<%= Page.ResolveUrl("~/Images/yourpic.jpg")%>" alt="..." />

even though i doubt that gallery would be in your master page, it will still save you a lot of time figuring it out if you have to add images to your master page! ;)

Edited by Philippe.Lahaie because: typo
Member Avatar for charisma

Convert this line to look like the second line?

<img onmouseover="preview.src=img1.src" id="img1" src="http://bit.ly/2rz3hy" alt="Image Not Loaded"/>

<img src="Images/yourpic.jpg" alt="..." />

Member Avatar for Philippe.Lahaie

just the src part, if you want your gallery to keep working you need to keep the "onmouseover~" part and the id.

Member Avatar for charisma

This worked ver well, How ever. I'm geting some code to the left of my first pic, when I view it in Dreamweaver. Should I be concerned? I don't see it when I look at it in browser. But If I add more pic's, will that code push my pic's to the next line?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Simple and Effective Photo Gallery with HTML and JavaScript</title>

<style type="text/css">
body {
background: #222;
margin-top: 20px;
}

h3 {
color: #eee;
font-family: Verdana;
}

.thumbnails img {
height: 80px;
border: 4px solid #555;
padding: 1px;
margin: 0 10px 10px 0;
}

.thumbnails img:hover {
border: 4px solid #00ccff;
cursor:pointer;
}

.preview img {
border: 4px solid #444;
padding: 1px;
height: 500px;
}
</style>


</head>
<body>

<div class="gallery" align="center">


<div class="thumbnails"><img onmouseover="preview.src=img2.src" id="img2" <img src="Images/head.jpg" alt="..." />
<img onmouseover="preview.src=img3.src" id="img3" src="http://bit.ly/1yIAYc" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img4.src" id="img4" src="http://bit.ly/2LHyDW" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img5.src" id="img5" src="http://bit.ly/2wyHSR" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img6.src" id="img6" src="http://bit.ly/yRo1i" alt="Image Not Loaded"/>
</div><br/>

<div class="preview" align="center">
 <img id="preview" src="http://bit.ly/2rz3hy" alt="No Image Loaded"/>
</div>

</div> <!-- Close the gallery div -->


</body>
</html>
Edited by charisma
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.