I am using unsorted list to display image with the a tag to implement lightbox on each images to see a bigger version of the image.
On Mozilla Firefox, Google chrome and Opera the image are displayed with the correct size but in Internet Explorer they are smaller.
W3C Validator reports 0 errors and I declared the Doctype.
Here is the source code of the web page :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Makeup Artist - Hair Stylist | Natalie Bennet</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/mouseoverscroll.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js" ></script>
<div id="border"></div>
<div id="hide"></div>
<div id="header" align="center">
<div id="logo" align="center">
<img src="images/makeup-artist-hair-stylist.jpg" alt="Natalie Bennett" />
</div>
</div>
<div class="footer-arrow previous" style="left:1%; position:fixed;">
<img src="images/left-arrow-out.png"
onmouseover="this.src='images/arrow-left-on.png'"
onmouseout="this.src='images/left-arrow-out.png'" alt="previous" /></div>
<div class="galleryWrapper">
<ul class="galleryItems" style="list-style-type:none;">
<li><img class="portfolio" src="images/portfolio/Sofia_1.jpg" alt="" /></li>
<li><img class="portfolio" src="images/portfolio/Sofia_2.jpg" alt="" /></li>
<li><img class="portfolio" src="images/portfolio/Sofia_3.jpg" alt="" /></li>
<li><img class="portfolio" src="images/portfolio/Sofia_4a.jpg" alt="" /></li>
<li><img class="portfolio" src="images/portfolio/Sofia_4b.jpg" alt="" /></li>
<li><img class="portfolio" src="images/portfolio/Sofia_4.jpg" alt="" /></li>
<li><img class="portfolio" src="images/portfolio/Sofia_5.jpg" alt="" /></li>
<li><img class="portfolio" src="images/portfolio/Andro_1.jpg" alt="" /></li>
<li><img class="portfolio" src="images/portfolio/Andro_2.jpg" alt="" /></li>
<li><img class="portfolio" src="images/portfolio/Andro_3.jpg" alt="" /></li>
<li><img class="portfolio" src="images/portfolio/Andro_4.jpg" alt="" /></li>
[...]
<li><img class="portfolio" src="images/portfolio/T1.jpg" alt="" /></li>
<li><img class="portfolio" src="images/portfolio/T2.jpg" alt="" /></li>
</ul>
</div>
<div class="footer-arrow next" style="left:96.5%; position:fixed;">
<img src="images/right-arrow-out.png"
onmouseover="this.src='images/arrow-right-on.png'"
onmouseout="this.src='images/right-arrow-out.png'" alt="next" /></div>
<div id="footer">
<div id="site-navigation" align="center">
<ul>
<li>Portfolio</li>
<li>About</li>
<li>Backstage</li>
<li>Contact</li>
</ul>
</div>
<div id="footer-menu">
</div>
<div id="copyright">
© Natalie Bennett 2012
</div>
</div>
<script type="text/javascript">
$('.galleryItems a').lightBox({fixedNavigation:true});
openFooter();
var menuopen = false;
function openFooter(){
$('#footer').animate({
height: 40,
bottom:0
}, 750, 'linear');
}
function closeFooter(){
$('#footer').animate({
height: 20,
bottom:0
}, 750, 'linear');
$('#footer-button').css("backgroundPosition","center 0px");
}
var currentImage = 0;
function closeThenNavigate(url)
{
$('#footer').animate({
height: 20,
bottom:0
}, 750, 'linear', function() {
window.location.href=url+"?i="+currentImage;
});
}
</script>
</body>
</html>
And here is the CSS for the images :
img {
border:none;
}
ul{
padding:0px;
}
.galleryWrapper{
top:6%;
left:0px;
width:100%;
height:100%;
display:inline-block;
position: fixed;
width:100%;
overflow:hidden;
}
.galleryItems li {
list-style-type: none;
float:left;
}
.portfolio{
widht:80%;
height:88%;
margin: 6px;
cursor:pointer;
margin-bottom:250px;;
}
Do you know why they are smaller in IE ?
Edit, forgot the link : http://www.zackdibe.com/final/
use pixel Instead of % in width and height size ...
Indeed use pixels instead of % or live with it. IE7/8 uses quite a lot bigger area for the addressbar (bigger then for example Chrome or FF), so the viewable area is smaller, from where the percentage is calculated.
Give a position:relative; value to the .portfolio elements and then try.
Related
I'm using Thymeleaf (Spring Boot project). I have the code:
<div class="single_product_thumbnails">
<ul>
<li class="active"><img th:src="${product.mainImage}" alt="" data-image="${product.mainImage}"/></li>
<li><img th:src="${product.imageSecond}" alt="" data-image="${product.imageSecond}"/></li>
<li><img th:src="${product.imageThird}" alt="" data-image="${product.imageThird}"/></li>
</ul>
</div>
Th:src load image thumbnail in left panel (EL code works). Data-image load image on the center of screen - code not work i.e. if I use data-image="http://image.png" or data-image="images/single_2.jpg" it works but my EL expression doesn't work.
Original code (fully works - from https://colorlib.com/etc/coloshop/single.html):
<div class="single_product_thumbnails">
<ul>
<li><img src="images/single_1_thumb.jpg" alt="" data-image="images/single_1.jpg"></li>
<li class="active"><img src="images/single_2_thumb.jpg" alt="" data-image="images/single_2.jpg"></li>
<li><img src="images/single_3_thumb.jpg" alt="" data-image="images/single_3.jpg"></li>
</ul>
</div>
How to use EL properly in this data-image example? Thank you in advance for your help.
Thymeleaf only evaluates attributes that are prefixed with th:. You should be able to use:
<div class="single_product_thumbnails">
<ul>
<li><img src="images/single_1_thumb.jpg" alt="" th:data-image="${product.mainImage}" /></li>
<li class="active"><img src="images/single_2_thumb.jpg" alt="" th:data-image="${product.imageSecond}" /></li>
<li><img src="images/single_3_thumb.jpg" alt="" th:data-image="${product.imageThird}" /></li>
</ul>
</div>
The other option would be to use th:attr, to dynamically generate the attribute you want. Like this:
<img src="images/single_1_thumb.jpg" alt="" th:attr="data-image=${product.mainImage}">
Hello everybody out there reading my question :)
I am currently working on website with a "Masonry-lookalike" home screen.
There are 4x4 images with 2 different sizes and 1 image in every column is hidden.
So far it went pretty good but now I am stuck on the text-effect when hovering one of the images.
When the cursor is hovering over an image, a small text-box should appear on the bottom of it.
How do i get them one above the other without ruining the Masonry?
Where do i place the Text in the html code?
Sorry for my English, its not the best since I am from Austria ;)
HTML:
<!DOCTYPE html>
<!-- HTML -->
<html>
<!-- HEAD -->
<head>
<!-- STYLESHEET -->
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- UTF-8 -->
<meta charset="utf-8">
</head>
<!-- HEAD END -->
<!-- --------------------------------------------------------------- -->
<!-- BODY -->
<body>
<div id="img-container">
<ul id="content">
<li><img class="img_a" src="data/placeholder_a.png" alt="" />
</li>
<li><img class="img_c" src="data/placeholder_c.png" alt="" />
</li>
<li><img class="img_b" src="data/placeholder_b.png" alt="" />
</li>
<li><img class="img_a" src="data/placeholder_a.png" alt="" />
</li>
<li><img class="img_a" src="data/placeholder_a.png" alt="" />
</li>
<li><img class="img_a" src="data/placeholder_a.png" alt="" />
</li>
<li><img class="img_c" src="data/placeholder_c.png" alt="" />
</li>
<li><img class="img_b" src="data/placeholder_b.png" alt="" />
</li>
<li><img class="img_c" src="data/placeholder_c.png" alt="" />
</li>
<li><img class="img_a" src="data/placeholder_a.png" alt="" />
</li>
<li><img class="img_a" src="data/placeholder_a.png" alt="" />
</li>
<li><img class="img_c" src="data/placeholder_c.png" alt="" />
</li>
<li><img class="img_b" src="data/placeholder_b.png" alt="" />
</li>
</ul>
</div>
</body>
<!-- BODY END -->
</html>
<!-- HTML END -->
CSS:
body {
margin: 0;
padding: 0;
}
#img-container {
width: 1200px;
margin: 0 auto;
font-size: 0;
}
#content {
column-count: 4;
column-gap: 10px;
}
#content li img {
margin-bottom: 10px;
width: 100%;
display: block;
}
/* --------------------- HOVER EFFECTS --------------------- */
.img_a:hover {
opacity: 0.5;
}
.img_b:hover {
opacity: 0.5;
}
.img_c:hover {
opacity: 0.5;
}
I will append some zip.-file with .css .html and images.
Link to Dropbox
The following writeup might help you:
http://geekgirllife.com/place-text-over-images-on-hover-without-javascript/
It is one of the simplest methods I came across. Place the div tag containing text right below the img tag.
Does anyone know how i can add "links" to these image row codes
HTML
<ul>
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
<li><img src="4.jpg"></li>
<li><img src="5.jpg"></li>
<li><img src="6.jpg"></li>
<ul>
CSS
#images {
width: 2000px;
}
#images img {
width: 300px;
height: 200px;
float: left;
}
Fiddle Example: http://jsfiddle.net/mdesdev/gEGMF/
Could you possibly mean you want to add hyperlinks to the pictures? A simple <a href='[[your URL'>[[img-tag]]</a> should do the trick, as seen here.
Try this:
<ul>
<li><img src="1.jpg"/></li>
<li><img src="2.jpg"/></li>
<li><img src="3.jpg"/></li>
<li><img src="4.jpg"/></li>
<li><img src="5.jpg"/></li>
<li><img src="6.jpg"/></li>
</ul>
I have been created css3 image slideshow, Its working perfect, but location of slideshow is absolutely incorrect.
Here is the code in html:
<div id = "header">
<div class = "wrap">
<div class = "logo">
<img src = "img/photo.jpg" alt = "" />
</div>
<div class = "navigation">
<ul>
<li>HOME</li>
<li>ABOUT </li>
<li>HISTORY </li>
<li>NEWS </li>
<li>CONTACT </li>
<li>CONTACT </li>
<li>CONTACT </li>
</ul>
</div>
</div>
</div>
<div class = "wrap">
<div class="slides">
<ul>
<li><img src="slide-1.jpg" alt="" /></li>
<li><img src="slide-2.jpg" alt="" /></li>
<li><img src="slide-3.jpg" alt="" /></li>
<li><img src="slide-4.jpg" alt="" /></li>
</ul>
</div>
</div>
<div class = "wrap">
<p>Saina Nehwal (About this sound pronunciation (help.info); born 17 .../p>
</div>
Here is my working jsfiddle: http://jsfiddle.net/qj6s0xdh/
Can anyone help me to align the position of slideshow?
Thanks in advance.
Is this what you want?
http://jsfiddle.net/qj6s0xdh/2/
I don't think the float: left; in the #header is what you want.
Here is the slider is now center-aligned by just adding following to the ul of slider
width: 60%;
margin: auto;
display: block;
Add the following properties:
.slides ul li {
width:100%;
}
.slides ul li image {
margin:0 auto;
}
This line displays my logo:
<li><img class="logo" src="selector/logo.png" alt="" /></li>
How can I add a clickable link to this image?
Try this here:
<li>
<a href="target.html">
<img class="logo" src="selector/logo.png" alt="" />
</a>
</li>
You want properly also to remove the border around the image. To fix that use this CSS:
.logo {
border: 0;
}
Are you just asking how to make the image a hyperlink to itself? Like this?:
<li>
<a href="selector/logo.png">
<img class="logo" src="selector/logo.png" alt="" />
</a>
</li>