Member Avatar for charisma

I'm trying to get my thumbnails all on one line. can someone help me please?

<!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: #00546b;
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: 250px;
}
</style>


</head>
<body>

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


<div class="thumbnails">
<img onmouseover="preview.src=img1.src" id="img1"img src="patio/patio1.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img2.src" id="img2"img src="patio/patio2.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img3.src" id="img3"img src="patio/patio3.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img4.src" id="img4"img src="patio/patio4.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img5.src" id="img5"img src="patio/patio5.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img6.src" id="img6"img src="patio/patio6.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img7.src" id="img7"img src="patio/patio7.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img8.src" id="img8"img src="patio/patio8.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img9.src" id="img9"img src="patio/patio9.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img10.src" id="img10"img src="patio/patio10.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img11.src" id="img11"img src="patio/patio11.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img12.src" id="img12"img src="patio/patio12.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img13.src" id="img13"img src="patio/patio13.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img14.src" id="img14"img src="patio/patio14.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img15.src" id="img15"img src="patio/patio15.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img16.src" id="img16"img src="patio/patio16.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img17.src" id="img17"img src="patio/patio17.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img18.src" id="img18"img src="patio/patio18.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img19.src" id="img19"img src="patio/patio19.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img20.src" id="img20"img src="patio/patio20.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img21.src" id="img21"img src="patio/patio21.jpg" 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
  • 2 Replies
  • 180 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by charisma
Member Avatar for veedeoo

Hi,

I think your code will only take up to 6 thumbnails. To put more thumbnails, thumbnails needs to scroll ..There is a jquery that can do this. If my memory still serves me well, I think it was called jmycarousel it is free , and there is this jquery plugin written by makers of the flowplayer, it is called scrollable. Let me know if you need help in setting it up, so that I can help you writing the layout.

Member Avatar for charisma

Help would be very apreciated. I'm not familer with jquery.

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.