Show Image Captions When Hovering - javascript

I'm trying to use javascript to show the caption of an image only when it's being hovered, and have a default caption displayed when no image is hovered.
<ul class="logos">
<li class="image-1"></li>
<li class="image-2"></li>
<li class="image-3"></li>
<li class="image-4"></li>
<li class="image-5"></li>
</ul>
<div class="captions">
<p>Default caption</p>
<p>This is a caption for the first logo</p>
<p>This is a caption for the second logo</p>
<p>This is a caption for the third logo</p>
<p>This is a caption for the fourth logo</p>
<p>This is a caption for the fifth logo</p>
</ul>
Any advice on how I could implement such an effect with javascript?

There's a better way to structure your page:
<script language="javascript" type="text/javascript">
// sets the caption for the clicked img
function caption(img){
// finds the element with an id="caption"
var ctrl = document.getElementById("caption");
// sets the text of the element = the alt property of the img
alert(img.alt);
ctrl.innerText = img.alt;
// sets the css display property = block (shows the element)
ctrl.style.display = "block";
// hides the defaultCaption element
document.getElementById("defaultCaption").style.display = "none";
}
// shows the defaultCaption and hides the caption div
function clearCaption() {
document.getElementById("defaultCaption").style.display = "block";
document.getElementById("caption").style.display = "none";
}
</script>
<ul class="logos">
<!--
alt : an alternative text description for an image
onmouseover : event handler that fires as the mouse moves over image
onmouseout : event handler that fires as the mouse moves off the image
-->
<li><img class="image-1" alt="caption text" onmouseover="caption(this)" onmouseout="clearCaption()"/></li>
<li><img class="image-2" alt="caption text" onmouseover="caption(this)" onmouseout="clearCaption()"/></li>
<li><img class="image-3" alt="caption text" onmouseover="caption(this)" onmouseout="clearCaption()"/></li>
<li><img class="image-4" alt="caption text" onmouseover="caption(this)" onmouseout="clearCaption()"/></li>
<li><img class="image-5" alt="caption text" onmouseover="caption(this)" onmouseout="clearCaption()"/></li>
</ul>
<div id="caption" style="display:none"></div>
<div id="defaultCaption">default caption text</div>
UPDATED:
Hadn't spotted that the image tags were malformed? - I've rewritten it as a list of images.
If your want li elements then change alt to title (in the elements and the code).

You even do not need JavaScript. You can achieve it via CSS.
See it in action at jsFiddle: http://jsfiddle.net/phusick/n6wTr/
Markup:
<div class="container">
<ul class="logos">
<li class="image i1">
<p class="caption">1st caption</p>
</li>
<li class="image i2">
<p class="caption">2nd caption</p>
</li>
<li class="image i3">
<p class="caption">3rd caption</p>
</li>
</ul>
</div>
CSS:
div.container {
position: relative;
padding-top: 2em;
}
li.image p.caption {
position: absolute;
top: 0;
left: 0;
display: none;
}
li.image:hover p.caption {
display: block;
}​

Related

Slide show add and remove class for change image and button

I want make slide show.
its my code:
java script =>
setInterval(function () {
var activeLi = document.querySelector('li.current');
activeLi.classList.remove('current');
if (activeLi.nextElementSibling ) {
activeLi.nextElementSibling .classList.add('current');
} else {
activeLi.parentElement.firstElementChild.classList.add('current')
}
var activeIMG = document.querySelector('.active_slider');
activeIMG.classList.remove('active_slider');
if (activeIMG.nextElementSibling ) {
activeIMG.nextElementSibling .classList.add('active_slider');
} else {
activeIMG.parentElement.firstElementChild.classList.add('active_slider')
}
}, 5000);
.active_slider{
display: inline;
}
.current{
color: red;
}
<div id="slider" class="dk-box mrg-bottom">
<div id="dk-slider-div" class="slides center">
<a class="clickCount" elementtype="1" categorytitle="">
<img src="/f15468d9.jpg" class="slideItem active_slider">
</a>
<a class="clickCount" elementtype="1" categorytitle="">
<img src="/f15468d9.jpg" class="slideItem">
</a>
<a class="clickCount" elementtype="1" categorytitle="">
<img src="/f15468d9.jpg" class="slideItem">
</a>
<footer>
<ul class="tabs">
<li class="tabItem current">
<a>
Slide 1
</a>
</li>
<li class="tabItem">
<a>
Slide 2
</a>
</li>
<li class="tabItem">
<a>
Slide 3
</a>
</li>
</ul>
</footer>
</div>
</div>
buttons was active and changed after 5 sec but image doesn't change
active_slider = active slider
current = active button
how can i make auto change for slider
i want add class for active and remove class for hide
if cant with class i can active with style { display: inline; }
Try something like this, it will run every 3 second and set the class active to the next element.
setInterval(function(){
var slider = $(".slider");
var active = slider.find(".active");
var sliderCount = slider.find("li").length;
var index = active.index();
active.removeClass("active");
if (index < sliderCount - 1){
active.next().addClass("active")
} else {
slider.find("li:first").addClass("active")
}
}, 3000);
.active{
color: yellow
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<li class="slide1">
<img src"image.png" alt="1">
</li>
<li class="slide2 active">
<img src"image.png" alt="2">
</li>
<li class="slide3">
<img src"image.png" alt="3">
</li>
</div>
Your html is invalid, there is = missing after class, should be class="slide1 active". To invoke function after some time you can use setInterval() adn to modify classes you can modify classList
property:
var x = 1000;
setInterval(function () {
var activeLi = document.querySelector('li.active');
activeLi.classList.remove('active');
if (activeLi.nextElementSibling ) {
activeLi.nextElementSibling .classList.add('active');
} else {
activeLi.parentElement.firstElementChild.classList.add('active')
}
}, x);
.active {
color:red
}
<div class="slider">
<li class="slide1 active">
<img src"image.png">
</li>
<li class="slide2">
<img src"image.png">
</li>
<li class="slide3">
<img src"image.png">
</li>
</div>
On every interval it removes class active from element and checks if element has sibling element (by checking nextElementSibling existence). Depending on it, active class is attached to either sibling or first element (parentElement.firstElementChild).

Mouseover product gallery

I want to create product list page and mouseover gallery like [this page][1]
I tried with vertical carousel like that Fiddle
But it is not working like Zalando and jcarousel is not working 1.9.1+ jQuery version. I need a structure that works like Zalando.
Here we are! I've encapsulated your entire product (lets call it .product-item) in a <div> so when hovering the main image (or the other options when visible) you can toggle the visibility of the options:
Make the options hidden by default (CSS):
#name-carousel {
float: left;
display: none;
}
Encapsulate your product in a container (HTML):
<div class="product-item"> <!-- This is the container -->
<div id="name-carousel" class="container">
<ul id="mycarousel" class="jcarousel-skin-tango">
<li id="carousel-selector-1"><img src="http://placehold.it/100x50&text=slide1" /></li>
<li id="carousel-selector-2"><img src="http://placehold.it/100x50&text=slide2" /></li>
<li id="carousel-selector-3"><img src="http://placehold.it/100x50&text=slide3" /></li>
<li id="carousel-selector-4"><img src="http://placehold.it/100x50&text=slide4" /></li>
<li id="carousel-selector-5"><img src="http://placehold.it/100x50&text=slide5" /></li>
</ul>
</div>
<div class="bigProductimage">
<img data-img="http://placehold.it/400x200&text=slide0" src="http://placehold.it/400x200&text=slide0">
</div>
</div>
Toggle the options visibility when hovering (jQuery):
productItem.hover(function() {
$("#name-carousel").fadeToggle();
});
Here is the updated fiddle for you: http://jsfiddle.net/CliffBurton/6svy9ocy/3/

Using jquery, how to change div position depending on variable

I'm trying to create a simple slider
I have main images and thumbnails
I want to animate the thumbnails container to the right position, put i don't want to use integer i want to use width value from a variable
My HTML code is some thing like that
<div class="Slider" >
<ul class="main-image">
<li><img src="images/gal-1.jpg" alt=""/></li>
<li><img src="images/gal-2.jpg" alt=""/></li>
<li><img src="images/gal-3.jpg" alt=""/></li>
</ul>
<div class="thumbnails-holder">
<a class="prev"></a>
<div class="thumbnails-items">
<a class="thumbnails-item">
<img src="images/gal-1.jpg" alt=""/>
</a>
<a class="thumbnails-item">
<img src="images/gal-2.jpg" alt=""/>
</a>
<a class="thumbnails-item">
<img src="images/gal-3.jpg" alt=""/>
</a>
</div>
<a class="next"></a>
</div>
</div>
My J query code
var ThumbWidth = parseInt($(".thumbnails-item").width());
$(".next").click(function(){
$(this).parents().find(".thumbnails-items").animate({
right: '-=95'
})
})
is there a way to write it like right: '-=ThumbWidth'
var ThumbWidth = parseInt($(".thumbnails-item").width());
$(".next").click(function() {
$(this).parents().find(".thumbnails-items").animate({
right: '-=' + ThumbWidth
});
});

CSS Masonry Grid with JQuery .hover hiding images in grid other than hovered image and first column

I am building a custom theme for koken based on their Blueprint framework theme and have coded it so the album template loops over all images in the album and outputs the images into a 4 column masonry-like grid using CSS, and a jquery script so that when I hover over an image it changes the opacity of all other images in the grid to 0.4.
The jquery code with the grid works fine in JSFiddle, but when I bring it into the koken theme, whenever an image is hovered, the script works for a second showing all but the hovered image at reduced opacity, but then hiding all the images except for the hovered image and the first column.
The code used for the grid is as follows:
HTML
<main>
<div id="grid">
<ul>
<li>
<img src="http://placekitten.com/300/200" class="gridimg" />
</li>
<li>
<img src="http://placekitten.com/300/200" class="gridimg" />
</li>
<li>
<img src="http://placekitten.com/300/200" class="gridimg" />
</li>
<li>
<img src="http://placekitten.com/300/200" class="gridimg" />
</li>
<li>
<img src="http://placekitten.com/300/200" class="gridimg" />
</li>
<li>
<img src="http://placekitten.com/300/200" class="gridimg" />
</li>
<li>
<img src="http://placekitten.com/300/200" class="gridimg" />
</li>
<li>
<img src="http://placekitten.com/300/200" class="gridimg" />
</li>
<li>
<img src="http://placekitten.com/300/200" class="gridimg" />
</li>
</ul>
</div>
CSS
#grid {
/* Prevent vertical gaps */
line-height: 0;
-webkit-column-count: 4;
-webkit-column-gap: 0;
-moz-column-count: 4;
-moz-column-gap: 0;
column-count: 4;
column-gap: 0;
}
#grid img {
/* Just in case there are inline attributes */
width: 100% !important;
height: auto !important;
}
#grid ul li {
display: inline;
}
.gridimg {
opacity:1;
transition: opacity 0.5s;
}
.opaque {
opacity:0.4;
transition: opacity 0.5s;
}
JS
$('img.gridimg').hover(function () {
$('img.gridimg').not(this).each(function () {
$(this).toggleClass("opaque");
});
});
JSFiddle is here: http://jsfiddle.net/jgYY9/3/
Is there something in the koken code that is messing this up? And does anyone know how I can fix it?
Thanks.

image in a list not being displayed correctly(as if in table), how to do that

I have code something like this :
<ul>
<li>some text <img src="path" style="height:15px;width:25px;" /></li>
<li>some text <img src="path" style="height:15px;width:25px;" /></li>
<li>some text <img src="path" style="height:15px;width:25px;" /></li>
</ul>
What i want is , the "some text" and img should come neatly, as if they are 2 cols in a table . Also, if text is small like "ab" , then the image should not change its position , i mean, shouldnt come near, it should be always at far distance like some 80px after "some text" . And,if text length is more than 80, img should lie after text only . Will provide more information if necessary .
Thanks
<li><span style="min-width:80px; display: inline-block;">some text</span>
<img src="path" style="height:15px;width:25px; float:left;" /></li>
This will works...
You can solve the problem by adding a couple of span tags inside the list items and some CSS as follows:
<style type="text/css">
li {
clear: left;
}
li span {
display:block;
float: left;
width: 140px;
}
li img {
float: left;
}
​
</style>
<ul>
<li><span>some text</span><img src="path" style="height:15px;width:25px;" /></li>
<li><span>some text bla bla bla</span><img src="path" style="height:15px;width:25px;" /></li>
<li><span>some text</span><img src="path" style="height:15px;width:25px;" /></li>
</ul>​
You can check out the result of this here:
http://jsfiddle.net/magnusohlin/xhLmx/

Categories

Resources