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>
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.
Fiddle
<table>
<tr>
<td>
<div id="filterContainer">
<ul id="filters">
<li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/Pink_Lemonade_Blueberry_Cupcake.png/revision/latest?cb=20150927002728" id="normalPic">
Normal </li>
<li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/Pink_Lemonade_Blueberry_Cupcake.png/revision/latest?cb=20150927002728" id="vintagePic">
Vintage </li>
<li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/Pink_Lemonade_Blueberry_Cupcake.png/revision/latest?cb=20150927002728" id="lomoPic">
Lomo </li>
<li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/Pink_Lemonade_Blueberry_Cupcake.png/revision/latest?cb=20150927002728" id="clarityPic">
Clarity </li>
<li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/Pink_Lemonade_Blueberry_Cupcake.png/revision/latest?cb=20150927002728" id="sinCityPic">
Sin City </li>
<li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/Pink_Lemonade_Blueberry_Cupcake.png/revision/latest?cb=20150927002728" id="sunrisePic">
Sunrise </li>
<li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/Pink_Lemonade_Blueberry_Cupcake.png/revision/latest?cb=20150927002728" id="crossProcessPic">
Cross Process </li>
<li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/Pink_Lemonade_Blueberry_Cupcake.png/revision/latest?cb=20150927002728" id="orangePeelPic">
Orange Peel</li>
<li><img src="R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" id="lovePic">
Love</li>
<li><img src="R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" id="grungyPic">
Grungy</li>
<li><img src="R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" id="jarquesPic">
Jarques</li>
<li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/Pink_Lemonade_Blueberry_Cupcake.png/revision/latest?cb=20150927002728" id="pinholePic">
Pinhole</li>
<li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/Pink_Lemonade_Blueberry_Cupcake.png/revision/latest?cb=20150927002728" id="oldBootPic">
Old Boot</li>
<li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/Pink_Lemonade_Blueberry_Cupcake.png/revision/latest?cb=20150927002728" id="glowingSunPic">
Glowing Sun</li>
<li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/Pink_Lemonade_Blueberry_Cupcake.png/revision/latest?cb=20150927002728" id="hazyDaysPic">
Hazy Days</li>
<li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/Pink_Lemonade_Blueberry_Cupcake.png/revision/latest?cb=20150927002728" id="herMajestyPic">
Her Majesty</li>
<li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/Pink_Lemonade_Blueberry_Cupcake.png/revision/latest?cb=20150927002728" id="nostalgiaPic">
Nostalgia</li>
<li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/Pink_Lemonade_Blueberry_Cupcake.png/revision/latest?cb=20150927002728" id="hemingwayPic">
Hemingway</li>
<li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/Pink_Lemonade_Blueberry_Cupcake.png/revision/latest?cb=20150927002728" id="concentratePic">
Concentrate</li>
</ul>
</div>
</td>
</tr>
</table>
#filterContainer ul{
width: 30%;
display: inline-block;
white-space: nowrap;
overflow: auto;
margin: 0;
padding: 0;
}
#filterContainer li{
width: 25%;
display: inline-block;
}
#filterContainer{
margin-top: 1%;
display: block;
margin: 0 auto;
}
I've tried changing the width to maybe squeeze the text underneath the image but everything just ends up getting smushed and the text remains horizontal to the images. I've also tried adding height in case maybe there wasn't enough space but that didn't seem to do anything either :/
You can add display: block; to your <a> tag. This will put the text under the image.
CSS
li a {
display: block;
}
JSFiddle
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;
}
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.