i added a thumb nail gallery to a page. but when you click on image it trys to load but unsuccessful. any thoughts?
Post your code, instead of website url.
how do i post code for people to see?
Copy and paste the lines of code into a reply in this thread.
When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
<!DOCTYPE html>
<!-- Website template by freewebsitetemplates.com -->
<html>
<head>
<meta charset="UTF-8">
<title>Solutions - Business Solution Website Template</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<!--[if IE]>
<link rel="stylesheet" href="css/ie.css" type="text/css" charset="utf-8">
<![endif]-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox-plus-jquery.min.js"></script>
</head>
<body>
<div id="page">
<div id="header">
<a href="index.html" id="logo"><img src="images/logo.png" alt="LOGO"></a>
<ul id="navigation">
<li>
</li>
<li class="selected">
<a href="index.html">About</a>
</li>
<li>
<a href="speaker.html">Speaker</a>
</li>
<li>
<a href="speeches.html">Speeches</a>
</li>
<li>
<a href="gallery.html">Gallery</a>
</li>
<!---<li>
<a href="news.html">News</a>
</li>
<li>
<a href="blog.html">Blog</a>
</li> --->
<li class="last-child">
<a href="contact.html">Contact us</a>
</ul>
</div>
<div id="contents">
<div class="gallery">
<div class="thumbnail">
<a href="images/img1_large.jpg" data-lightbox="gallery" data-title="Image 1">
<img src="images/img1_thumb.jpg" alt="Image 1">
</a>
</div>
<div class="thumbnail">
<a href="images/img2_large.jpg" data-lightbox="gallery" data-title="Image 2">
<img src="images/img2_thumb.jpg" alt="Image 2">
</a>
</div>
<!-- Add more thumbnails as needed -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox-plus-jquery.min.js"></script>
</body>
</html>
</div>
<div id="footer">
<div class="connect">
<a href="http://freewebsitetemplates.com/go/facebook/" target="_blank" class="facebook"></a> <a href="http://freewebsitetemplates.com/go/twitter/" target="_blank" class="twitter"></a> <a href="http://freewebsitetemplates.com/go/googleplus/" target="_blank" class="googleplus"></a>
</div>
<p>
Copyright © 2024. Charisma Communications All Rights Reserved.
</p>
</div>
</div>
</body>
</html>
/* Website template by freewebsitetemplates.com */
body {
background: #231404 url(../images/highlight.png) no-repeat left top;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
#page {
width: 960px;
margin: 0 auto;
position: relative;
}
img {
border: 0;
}
/*------------------------------ SPRITES ------------------------------*/
#navigation li:first-child a, #main ul li, #main ul li a, #headline div.body a.more {
background: url(../images/buttons.png) no-repeat;
}
#contents, #headline {
background: url(../images/bg-contents-bottom.png) no-repeat;
}
#contents > div, #adbox, #headline div.body {
background: url(../images/bg-contents.png) repeat-y;
}
#footer .connect a {
background: url(../images/icons.png) no-repeat;
}
/*------------------------------ HEADER ------------------------------*/
#header {
min-height: 224px;
position: relative;
}
/** Logo **/
#logo {
display: block;
width: 250px;
padding-bottom: 30px;
}
/** Navigation **/
#navigation {
background: url(../images/bg-menu.png) no-repeat;
display: inline-block;
height: 60px;
width: 960px;
list-style: none;
margin: 0;
padding: 1px 0 0;
position: absolute;
left: 0;
top: 180px;
}
#navigation li {
float: left;
height: 55px;
padding-left: 1px;
}
#navigation li a {
color: #ffffff;
display: block;
font-size: 14px;
height: 55px;
line-height: 55px;
padding: 0 32px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px #44290c;
text-transform: uppercase;
}
#navigation li a:hover, #navigation li.selected a {
background-color: #5c400a;
}
#navigation li:first-child a {
background-position: left top;
display: block;
height: 55px;
width: 60px;
padding: 0;
}
#navigation li:first-child a:hover, #navigation li:first-child.selected a {
background-color: transparent;
background-position: -66px top;
}
#navigation li.last-child a {
padding-right: 36px;
}
#navigation li.last-child a:hover, #navigation li.last-child.selected a {
background: #5c400a url(../images/bg-menu-selected-last.png) no-repeat right center;
}
/** Adbox **/
#adbox {
background-position: left top;
height: 496px;
padding: 36px 1px 0;
}
#adbox div.details {
background: url(../images/bg-headliner.png) repeat left top;
color: #fff;
font-family: "Times New Roman", Times, serif;
height: 88px;
width: 900px;
padding-right: 58px;
padding-top: 20px;
text-align: right;
position: absolute;
bottom: 4px;
left: 1px;
}
#adbox div.details h1 {
font-weight: normal;
font-size: 26px;
line-height: 30px;
margin: 0;
text-transform: uppercase;
}
#adbox div.details p {
margin: 0;
font-size: 18px;
line-height: 30px;
letter-spacing: 1px;
}
/*------------------------------ CONTENTS ------------------------------*/
#contents {
background-position: left bottom;
margin-bottom: 30px;
padding-bottom: 11px;
}
#contents > div {
background-position: left bottom;
padding-bottom: 1px;
}
#contents div.background {
min-height: 830px;
padding: 60px 20px 30px;
}
#contents h2 {
color: #ffffff;
font-weight: normal;
line-height: 30px;
margin: 0;
text-transform: uppercase;
}
#contents h4 {
color: #f0e99a;
font: 14px/30px Arial, Helvetica, sans-serif;
letter-spacing: 1px;
margin: 0;
text-align: justify;
text-transform: uppercase;
}
#contents h4 a {
color: #f0e99a;
text-decoration: none;
}
#contents h4 a:hover {
color: #a08a6b;
}
#contents p {
color: #ffffff;
font: 16px/30px "Times New Roman", Times, serif;
letter-spacing: 1px;
margin: 0;
padding: 0 0 30px;
text-align: justify;
}
#contents p a {
color: #a08a6b;
}
#contents p a:hover, #headline div.body p a:hover {
color: #d1b676;
}
/** MAIN **/
#headline {
background-position: -966px bottom;
width: 958px;
margin: 0 auto;
padding-bottom: 12px;
}
#headline div.body {
background-position: -966px bottom;
padding: 20px 15px 0;
}
#headline div.body p {
color: #ffffff;
display: inline-block;
font-family: "Times New Roman", Times, serif;
font-size: 22px;
letter-spacing: 1px;
line-height: 36px;
margin: 0;
padding: 0 0 24px;
}
#headline div.body p a {
color: #a08a6b;
}
#headline div.body a.more {
background-position: -72px -65px;
color: #cab18e;
display: inline-block;
font-size: 14px;
line-height: 19px;
height: 19px;
width: 54px;
padding-left: 8px;
text-decoration: none;
}
#headline div.body a.more:hover {
background-position: 0 -65px;
color: #35240d;
}
/** Main **/
#main {
color: #a08a6b;
padding: 30px 15px;
}
#main h2 {
margin-bottom: 20px;
text-align: center;
}
#main p {
font-family: "Times New Roman", Times, serif;
line-height: 30px;
padding-bottom: 18px;
}
#main p a {
color: #a08a6b;
}
#main ul {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
#main ul li {
float: left;
background-position: 0 -94px;
height: 59px;
width: 260px;
padding-left: 40px;
}
#main ul li:first-child {
padding-left: 20px;
}
#main ul li a {
background-position: right bottom;
color: #fff;
display: block;
line-height: 59px;
height: 59px;
width: 260px;
padding-right: 38px;
text-align: center;
text-decoration: none;
position: relative;
}
#main ul li a:hover {
color: #d1b676;
}
/** Product and Contact Us **/
#list {
color: #f0e99a;
margin: 0;
padding-left: 30px;
}
#list li {
font-size: small;
padding: 0 15px;
}
#list li p {
padding-right: 0px;
}
#list li p em {
color: #f0e99a;
display: block;
font: bold 14px/30px Arial, Helvetica, sans-serif;
}
#list li p em a {
color: #f0e99a;
}
/** Services and Solutions **/
#solutions > div {
width: 920px;
margin: 0 auto;
position: relative;
}
#solutions > div img, #services img {
margin: 18px 0;
}
#solutions > div div {
background: url(../images/bg-headliner.png) repeat left top;
height: 82px;
width: 862px;
padding: 20px 58px 0 0;
text-align: right;
position: absolute;
left: 0;
bottom: 22px;
}
#solutions > div div h2 {
color: #fff;
display: inline-block;
font-family: "Times New Roman", Times, serif;
text-transform: uppercase;
}
#solutions > div div p {
color: #fff;
display: inline-block;
}
/** News **/
#news ul {
list-style: none;
margin: 30px 0 0;
padding: 0;
}
#news ul li {
background: url(../images/border.png) repeat-x left top;
display: inline-block;
width: 920px;
margin-bottom: 30px;
padding: 60px 0 0;
}
#news ul li:first-child {
background: none;
padding-top: 0;
}
#news ul li img {
float: right;
margin-left: 20px;
margin-top: 6px;
}
#news ul li:first-child img {
float: left;
margin-left: 0;
margin-right: 20px;
}
#news li p em {
color: #f0e99a;
display: block;
font: bold 14px/30px Arial, Helvetica, sans-serif;
letter-spacing: normal;
}
#news li p em a {
color: #f0e99a;
}
/** Blogs **/
#blogs {
display: inline-block;
}
#blogs div:first-child {
float: left;
width: 696px;
margin-right: 30px;
}
#blogs div.sidebar {
float: right;
height: 100%;
width: 184px;
}
#blogs div.sidebar ul {
color: #a08a6b;
font-size: small;
margin: 0 0 30px;
padding-left: 15px;
}
#blogs div.sidebar ul li a {
color: #a08a6b;
font: 16px/30px "Times New Roman", Times, serif;
text-decoration: none;
}
#blogs div.sidebar ul li a:hover {
text-decoration: underline;
}
/** Contacts **/
#contacts {
list-style: none;
margin: 0;
padding: 0;
}
#contacts li p em {
display: block;
font-style: normal;
text-transform: uppercase;
}
/*------------------------------ FOOTER ------------------------------*/
#footer {
color: #ffffff;
font-size: 12px;
width: 940px;
padding: 30px 10px;
}
#footer .connect {
float: left;
display: inline-block;
line-height: 26px;
margin-right: 30px;
}
#footer .connect span {
float: left;
margin-right: 5px;
}
#footer .connect a {
float: left;
display: block;
height: 26px;
margin: 0 6px;
}
#footer .connect a.facebook {
background-position: -48px 0;
width: 12px;
}
#footer .connect a.twitter {
background-position: -48px -36px;
width: 38px;
}
#footer .connect a.googleplus {
background-position: -48px -72px;
width: 25px;
}
#footer .connect a.facebook:hover {
background-position: 0 0;
}
#footer .connect a.twitter:hover {
background-position: 0 -36px;
}
#footer .connect a.googleplus:hover {
background-position: 0 -72px;
}
#footer p {
line-height: 26px;
margin: 0;
text-align: right;
}
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.thumbnail {
width: 150px;
height: 150px;
overflow: hidden;
border: 1px solid #ddd;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
.thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.thumbnail img:hover {
transform: scale(1.1);
}
Try to move #gallery closing div tag after your second img anchor closing tag.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.