I have the following jsfiddle but it doesnt seem to show the caption up:
http://jsfiddle.net/KumcX/189/
HTML:
<ul>
<li>
<div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
<img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></li>
<li>
<div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
<img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></li>
<li>
<div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
<img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></li>
<li>
<div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
<img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></li>
<li>
<div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
<img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></li>
<li>
<div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
<img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></li>
</ul>
CSS:
ul li{ float:left; padding:20px; border:solid gray 4px; margin:5px;}
ul li div{display:none; background:white; opacity:.5; position:absolute;}
JS:
$('ul li').mouseenter(function(){
var image= $(this).find('a img'),
caption = $(this).find('div');
caption.width(image.width());
caption.height(image.height());
caption.fadeIn();
}).mouseleave(function(){
var image= $(this).find('img'),
caption = $(this).find('div');
caption.width(image.width());
caption.height(image.height());
caption.fadeOut();
});
It should show the caption, but its not.. Any ideas?
You probably copy the html with firebug,
delete the styles on the li elements.
check this
http://jsfiddle.net/kuyabiye/KumcX/194/
Refactored some of the JS, ditched the inline caption styling, and updated the css class
jQuery
$(".caption").css('opacity', 0);
$('ul li').mouseenter(function() {
$(this).find(".caption").animate({ 'opacity': 0.9 });
}).mouseleave(function() {
$(this).find(".caption").animate({ 'opacity': 0 });
});
css
ul li {
float:left;
padding:20px;
border:solid gray 4px;
margin:5px;
}
.caption {
width: 220px;
background: #fff;
height: 150px;
position: absolute;
}
example: http://jsfiddle.net/hunter/KumcX/201/
Use animate effect, configuring opacity:
$('ul li').mouseenter(function(){
var image= $(this).find('a img'),
caption = $(this).find('div');
caption.width(image.width());
caption.height(image.height());
caption.animate({'opacity':0.5});
}).mouseleave(function(){
var image= $(this).find('img'),
caption = $(this).find('div');
caption.width(image.width());
caption.height(image.height());
caption.animate({'opacity':0});
});
Just a couple of tweaks needed, first of all in your CSS you need to give your <div> a left and top position as well as some height and width which I've set to 100% to span the image and your <li> a position relative so the caption is nicely positioned over the image. Oh I also gave the <div> background an rgba color of 255,255,255,0.5 to achieve your transparent effect.
Your JS is fine but your problem in the fiddle is that you have lots of inline styles so delete those and everything should work ok from then on in.
Here's an updated fiddle: http://jsfiddle.net/KumcX/197/
And the updated CSS:
ul li{ float:left; padding:20px; border:solid gray 4px; margin:5px;position:relative}
ul li div{display:none; background:rgba(255,255,255,.5); position:absolute;left:0;top:0;width:100%;height:100%;}
Hope this helps.
Related
I can change a image when the mouse is hovered over it but how do I change the image when the mouse is hovered over the layer/div?
<div id="layerservicewebsite">
<a href="website%20design.html">
<br>
<img src="Images/symbol%20web%20design2.jpg" onmouseover="this.src='Images/symbol%20web%20design.jpg'" onmouseout="this.src='Images/symbol%20web%20design2.jpg'" width="200" height="200"> </a>
<h2>WEBSITE DESIGN</h2>
I would create 2 images and give one a class. Then create a CSS rule for your parent div which makes the default image transparent on hover. This has the advantage of being able to transition the two images, fading them in and out.
First, define a class rule for a general image:
#layerservicewebsite > img {
position: absolute;
display: block;
opacity: 1;
transition: opacity 1s ease;
/* set your left, top, width, height etc here... */
}
Then give the image that you want to disappear some class - canHide for example.
Then:
#layerservicewebsite:hover > img.canHide {
opacity: 0;
}
You can use the following CSS for that:
#layerservicewebsite:hover img {
background-image: url('image.png');
}
Snippet below:
#layerservicewebsite:hover img {
background-image: url('https://placeholdit.imgix.net/~text?txtsize=28&bg=0099ff&txtclr=ffffff&txt=300×300&w=300&h=300&fm=png');
}
#layerservicewebsite {
border: 1px solid lightgray;
}
<div id="layerservicewebsite">
<a href="website%20design.html">
<img src="Images/symbol%20web%20design2.jpg" onmouseover="this.src='Images/symbol%20web%20design.jpg'" onmouseout="this.src='Images/symbol%20web%20design2.jpg'" width="200" height="200">
</a>
<h2>WEBSITE DESIGN</h2>
</div>
A solution without javascript:
.layer {
padding: 50px;
background: #eee;
}
.layer img:last-child {
display: none;
}
.layer:hover img {
display: none;
}
.layer:hover img:last-child {
display: inline-block;
}
<div class="layer">
<a href="#">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Image%20One&w=350&h=150" alt="">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Image%20Two&w=350&h=150" alt="">
</a>
<h2>WEBSITE DESIGN</h2>
</div>
In my HTML website I have a button, and I try add an transparent image over this button. And I can't click in this button after.
My problem is something like this:
#container {
height: 400px;
width: 400px;
position: relative;
}
#image {
position: absolute;
left: 0;
top: 0;
}
<div id="container">
<img id="image" src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" width="200px" ;height="200px" />
<a href="#">
Click here
</a>
</div>
Thanks very much for your help!
To fix this you can set the z-index of the image lower than the a element (which defaults to 0)
#container {
height: 400px;
width: 400px;
position: relative;
}
#image {
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
<div id="container">
<img id="image" src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" width="200px" ;height="200px" />
<a href="#">
Click here
</a>
</div>
Alternatively you could use the image as a background on the container and avoid the need to position it absolutely, or have to change z-index at all.
you need to add a z-index to the button and give it position relative
.button {
z-index: 1;
position: relative;
}
Here is the code you need to use
html
<div id="container">
<img id="image" src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" width="200px";height="200px"/>
<a class="button" href="#">
Click here
</a>
css
#container
{
height:400px;
width:400px;
position:relative;
}
#image
{
position:absolute;
left:0;
top:0;
}
.button {
z-index: 10;
position: relative;
}
See js fiddle here
You can alter width and height of image-container as you wish..
#container {
height: 400px;
width: 400px;
position: relative;
}
#image-container{
width:100%;
height:100%;
background-image: url("http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png");
background-position:center;
background-size:contain;
}
<div id="container">
<div id="image-container">
<a href="#">
Click here
</a>
</div>
</div>
Someone has built a carousel for our webshop, but it is not functioning correctly. When you click one of the arrow buttons, the images will move to the left or right. But as you might have noticed already, the images just disappear into the void.
Obviously it should move to the first image when the last one has been reached and someone clicks on "next", and to the last image when the first one has been reached.
Note: the reason he used "jQuery" instead of "$" is because "$" is in conflict with Magento.
This is the code that is used:
HTML
<div class="gallery">
<div id="moveleft"><</div>
<ul class="gallery-content">
<li>
<a href="http://test.prestaq.nu/media/catalog/product/cache/27/image/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_1_24.jpg" data-lightbox="roadtrip">
<img src="http://test.prestaq.nu/media/catalog/product/cache/27/image/300x/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_1_24.jpg" alt="">
</a>
</li>
<li>
<a href="http://test.prestaq.nu/media/catalog/product/cache/27/image/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_2_9.jpg" data-lightbox="roadtrip">
<img src="http://test.prestaq.nu/media/catalog/product/cache/27/image/300x/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_2_9.jpg" alt="">
</a>
</li>
<li>
<a href="http://test.prestaq.nu/media/catalog/product/cache/27/image/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_3_1_2.jpg" data-lightbox="roadtrip">
<img src="http://test.prestaq.nu/media/catalog/product/cache/27/image/300x/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_3_1_2.jpg" alt="">
</a>
</li>
<li>
<a href="http://test.prestaq.nu/media/catalog/product/cache/27/image/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_4_15.jpg" data-lightbox="roadtrip">
<img src="http://test.prestaq.nu/media/catalog/product/cache/27/image/300x/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_4_15.jpg" alt="">
</a>
</li>
<li>
<a href="http://test.prestaq.nu/media/catalog/product/cache/27/image/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_5_15.jpg" data-lightbox="roadtrip">
<img src="http://test.prestaq.nu/media/catalog/product/cache/27/image/300x/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_5_15.jpg" alt="">
</a>
</li>
</ul>
<div id="moveright">></div>
</div>
CSS
ul, li { list-style: none; }
.gallery {
min-height: 340px;
overflow:hidden;
margin-top: 40px;
}
.gallery ul.gallery-content {
margin-left: 55px;
margin-right: 55px;
max-height: 300px;
overflow:hidden;
margin-top: -300px;
}
.gallery img {
float:left;
padding: 3px;
margin: 0 10px;
}
.gallery #moveleft {
height: 300px;
width: 50px;
line-height: 300px;
border: #CCC solid 1px;
margin-left: 0px;
font-size:45px;
padding-left: 2px;
}
.gallery #moveright {
height: 300px;
width: 50px;
line-height: 300px;
font-size:45px;
float: right;
margin-top: -300px;
padding-left: 2px;
border: #CCC solid 1px;
}
JS
jQuery(document).ready(function() {
jQuery('.gallery #moveleft').click(function() {
jQuery('.gallery li').animate({
'marginLeft' : "-=300px" //moves left
});
});
jQuery('.gallery #moveright').click(function() {
jQuery('.gallery li').animate({
'marginLeft' : "+=300px" //moves right
});
});
});
I would recommend using OwlCarousel for simple jQuery Carousel on Magento. This jQuery plugin also support touch slide (work very well on mobile), which is a plus if your Magento website is responsive.
Hope this help
i'm using ResponsiveSlides to make a slide of some pictures, but i have some issues.
First of all, automatic slide after a timeout doesn't work..
But my first problem is that i can't see the pager under the pictures, though i've enabled it! The pager is this: http://i.imgur.com/cCV4AOP.png (the number of the picture under the slide)
Sorry for my english and sorry i'm a noob on js & css..
This is my html code:
Head:
<script src="js/responsiveslides.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
$("#slider").responsiveSlides({
auto: false,
pager: true,
speed: 300,
maxwidth: 540,
});
});
</script>
Css:
/*! http://responsiveslides.com v1.54 by #viljamis */
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 90%;
padding: 0;
margin: 55px;
top: -50px;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 90%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 90%;
border: 0;
}
Slider on my html page:
<ul class="rslides" id="slider">
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
</ul>
Why i dont see the pager?
I haven't figured out why yet but if you switch the order in which you reference your external scripts, it fixes the issue.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
The page links are unformatted "ul > li > a" so to get the appearance of the ResponsiveSlides website, you need to add your own CSS or modify theirs.
I want the above five different images joined as this is header part of a webpage.
I used the lavalamp plugin and it works, but the webpage loses its responsiveness. On different devices, the header is not displayed in one line.
I tried to insert it in bootstrap. I inserted the lines of code of lavalamp CSS in bootstrap CSS file, shown here:
.lavaLampWithImage {
margin-top:10px;
position: relative;
height: 55px;
/* width: 734px;*/
/*width:780px;*/
}
.lavaLampWithImage li {
float: left;
list-style: none;
}
.lavaLampWithImage li.back {
background: url("res/arrow.png") no-repeat right -30px;
z-index: 0;
padding-top:59px;
padding-left:40px;
position: absolute;
}
.lavaLampWithImage li.back .left {
background: url("res/arrow.png") no-repeat top left;
height: 30px;
}
.lavaLampWithImage li a {
z-index: 20;
display: block;
float: left;
position: relative;
overflow: hidden;
}
.mm {
border:0px;
}
#navbar {
/*margin-left:152px;*/
/*padding-top:60px;*/
padding-top:1px;
/*width:727px;*/
}
And the relevant HTML code part is as follows:
<div class="span6">
<div id="navbar">
<ul class="lavaLampWithImage" id="1">
<li><img class="mm" src="res/1.png" width="300" height="60" alt="home" onClick="location.href='index.html'"/></li>
<li class="current"><img class="mm" src="res/Home-n.png" width="120" height="60" alt="home" onClick="location.href='index.html'"/></li>
<li><img class="mm" src="res/blog.png" width="120" height="60" alt="contact us" onClick="location.href='http://eywaz.com/sit2/'"/></li>
<li><img class="mm" src="res/Help-n.png" width="120" height="60" alt="about us" onClick="location.href='help.html'"/></li>
<li><img class="mm" src="res/Contact_us-n.png" width="120" height="60" alt="contact us" onClick="location.href='contactus.html'"/></li>
</ul>
</div>
<div class="clear"></div>
</div>
How to make it responsive?
Please reply as early as possible.
Thanks in advance.
First remove specific width and height from your image tag like bellow :
<li><img class="mm" src="res/Home-n.png" alt="home" onClick="location.href='index.html'"/></li>
Then write in css :
#media only screen and (max-width:720px){
.lavaLampWithImage li img {
max-width:100%;
}
}
and give a specific width of li element in percentage in this media query.
I am not 100% sure what you mean with responsive images. But if you just want to resize the images according to the screen width, you could try something like this:
.lavaLampWithImage {
margin:10px 0 0;
padding:0;
display:block;
position: relative;
width:100%;
}
.lavaLampWithImage li {
display:inline-block;
list-style: none;
background-color:green;
width:15.38%;
}
.lavaLampWithImage li:first-child {
width:38.45%;
}
.lavaLampWithImage li a, .lavaLampWithImage li a img {
display:block;
width:100%;
}
and the html:
<div class="span6">
<div id="navbar">
<ul class="lavaLampWithImage" id="nav1">
<li><img class="mm" src="http://www.upsdell.com/BrowserNews/img/ban_300x60.png" alt="home" onClick="location.href='index.html'"/></li><li class="current"><img class="mm" src="http://www.motive.co.nz/glossary/img/banner-120x60.gif" alt="home" onClick="location.href='index.html'"/></li><li><img class="mm" src="http://www.motive.co.nz/glossary/img/banner-120x60.gif" alt="contact us" onClick="location.href='http://eywaz.com/sit2/'"/></li><li><img class="mm" src="http://www.motive.co.nz/glossary/img/banner-120x60.gif" alt="about us" onClick="location.href='help.html'"/></li><li><img class="mm" src="http://www.motive.co.nz/glossary/img/banner-120x60.gif" alt="contact us" onClick="location.href='contactus.html'"/></li>
</ul>
</div>
<div class="clear"></div>
</div>
here is a jsfiddle