I want to display my text after my thumbnail slider div something like this,
my active slider class: "itm0 selected"
my thumbnail id: "thumbs"
i want to display text below my #thumbs div automatically when it is active
i tried this CSS, but not worked,
.itm0 .selected{
#thumbs::after{
content:"first active image";
}
}
.itm2 .selected{
#thumbs::after{
content:"second active image";
}
}
html:
<div id="thumbs">
<img class="itm0 selected"></img>
<img class="itm1"></img>
</div>
when 2nd img active in slider
<div id="thumbs">
<img class="itm0"></img>
<img class="itm1 selected"></img>
</div>
etc.
anyone have some solution?
or how can I do it in javascript?
I am new newbie.. give some idea friends
If you're open to using jQuery, you can do the following.
Fiddle: https://jsfiddle.net/79fryyz1/
HTML
I've added an additional div under the #thumbs div. I've given it a class called caption. This will be used to show the text under the div. Then, I've added a data attribute called data-caption to store the text to be displayed after each image. I've also added a toggle button for demonstration purposes.
<div id="thumbs">
<img class="itm0 selected" src="http://bit.ly/1S6znnc" data-caption="first active image"/>
<img class="itm1" src="http://bit.ly/1MKyvBI" data-caption="second active image"/>
</div>
<div class="caption">first active image</div>
Toggle
JS
When the image slider is changed, and a new image is selected, you can pick up the caption from the data attribute and display it under the #thumbs div.
$('.toggleBtn').click(function() {
$('img').toggleClass('selected');
var caption = $('img.selected').data('caption');
$('.caption').html(caption);
});
That's a strange way of doing it, but here's how it could work...
.thumbs {
width:100px;
height:100px;
float:left;
margin:10px;
background:green;
}
.thumbs:after {
content: ' ';
position:absolute;
background:#000;
color:#fff;
border-radius:5px;margin:100px 0 0;
}
.thumbs:nth-child(1):hover:after {
content:"first thumb";
}
.thumbs:nth-child(2):hover:after {
content:"second thumb";
}
<div class="thumbs"></div>
<div class="thumbs"></div>
Related
I have an original image of a person, and then what I want to do is basically click the image, and below a price chart will pop out. so it is hidden until it is clicked, and then if it is clicked again, hide it. I have it set up right now where i can display text, but it isn't really working, and there is no css. here it is:
<img onclick="changeText(1)" src="https://images.unsplash.com/photo-1497215728101-856f4ea42174?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60">
<img onclick="changeText(2)" src="def.jpg">
<img onclick="changeText(3)" src="efg.jpg">
<script type="text/javascript">
function changeText(val)
{
if(val==1)
{
para += "Image one was Clicked";
}
else if(val==2)
{
para += "Image Two was Clicked";
}
}
</script>
Can anyone help me please?
The easies way is to place an element like a <div> below the image that contains the price lsit or a etxt instead of an image.
Then hide the element with a class that contains display: none; as declaration. Use the onclick event on the image to toggle the class on/off to show/hide the element:
.hidden {
display: none;
}
/* for stylign purpose only */
img {
max-width: 30vw;
}
<img onclick="document.getElementById('image-label').classList.toggle('hidden')" src="https://images.unsplash.com/photo-1497215728101-856f4ea42174?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60">
<div class="hidden" id="image-label">Random Content</div>
I'm using this free HTML template https://html5up.net/ethereal
In the portfolio section, when you click on an image, the image appears bigger for a better view.
I want to add some info or some text along with the popup image but somehow cannot add it to this code
<img src="https://html5up.net/uploads/demos/ethereal/images/gallery/thumbs/01.jpg" alt="" />
Edit based on your comments: There are many approaches to toggling hidden content, below you will find a basic example. We are hiding the element with the class "hidden" and wiring up an event listener on the default image. Once the default image is clicked on it will fire a function that gets the parent element and applies a new class. In our CSS we are then hiding the default image and showing the previously hidden content. This is a rough example and by expanding on the styling you can do all sorts of things such as fading the hidden content in by setting a transition on the element's opacity or sliding the hidden content into view by transitioning the transform properties as a couple of examples.
var target = document.querySelector(".parent .default");
target.addEventListener("click", function(){
var parent = document.querySelector(".parent");
parent.classList.add("show-hidden");
});
.parent {
padding: 15px;
}
.parent p {
color: black;
font-size: 16px;
}
.hidden {
display: none;
}
.parent.show-hidden .hidden {
display: block
}
.parent.show-hidden .default {
display: none;
}
<div class="parent">
<img class="default" src="https://html5up.net/uploads/demos/ethereal/images/gallery/thumbs/01.jpg" alt="" />
<div class="hidden">
<img src="https://html5up.net/uploads/demos/ethereal/images/gallery/thumbs/01.jpg" alt="" />
<p>I am the text element</p>
</div>
</div>
HTML
<div module="product_listnormal">
<ul>
<li>
<input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}">
<div id="prdImgWrapper">
<img src="{$image_medium}" alt="" class="prdImgImg"/>
</div>
.....
So i Add onmouseover in img tag
<img src="{$image_medium}" onmouseover="this.src={$image_medium} + 'aaa'" alt="" class="prdImgImg"/>
but it doesn't call {$image_medium}aaa link what's wrong?
ex) if $image_medium = 111.png
$image_medium + aaa = 111aaa.png
I use on mouse over and on mouse leave function like this
onmouseover='this.src = this.src.replace(".jpg","_2.jpg")' onmouseleave='this.src = this.src.replate("_2.jpg", ".jpg")'
this source can use every picture
You have two links image_medium and image_medium2.
Say image_medium="a.jpg" and image_medium_2="a_2.jpg";
Using pure JavaScript
1) You can add listener for the same using mouseenter and mouseleave events if you know values
var divToBeHovered=document.getElementById("prdImgWrapper");
//add listener
divToBeHovered.addEventListener("mouseenter",function(){
var imgEle=document.querySelector("#"+this.id+" img");
imgEle.src="a_2.jpg"; //image_medium_2
},false);
divToBeHovered.addEventListener("mouseleave",function(){
var imgEle=document.querySelector("#"+this.id+" img");
imgEle.src="a.jpg"; //image_medium
},false);
2)If you don't know values i.e src of image is dynamic then you can create one function and call it both on mouseenter and mouseleave event.
<a href="/product/detail.html{$param}" class="prdImg">
<img src="{$image_medium}"
onmouseenter="changeURLOfImage(this,'{$image_medium}aaa')"
onmouseleave="changeURLOfImage(this,'{$image_medium}')"
mouseralt="" class="prdImgImg"/></a>
function changeURLOfImage(imageElem,url){
imageElem.src="url"
}
3)Assign direct values to src
<img onmouseenter='this.src ={$image_medium}aaa' onmouseleave='this.src ={$image_medium}'/>
This can be done using pure CSS by using two images and changing the display on hover state.
a.prdImg > img {
display: inline-block;
}
a.prdImg > img + img {
display: none;
}
a.prdImg:hover > img {
display: none;
}
a.prdImg:hover > img + img {
display: inline-block;
}
<div module="product_listnormal">
<ul>
<li>
<input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}">
<div id="prdImgWrapper">
<img src="http://media-cache-ak0.pinimg.com/736x/65/7e/a2/657ea254eb522135fbd59e0656a2e1dd.jpg" alt="" class="prdImgImg"/><img src="http://baconmockup.com/400/300" alt="" class="prdImgImg"/>
</div>
.....
By the way; wouldn't cause this.src={$image_medium} + 'aaa' the src to change from 111.png to 111.pngaaa?
While changing image src is not possible with css you can have 2 images(one hidden) and a container and on container mouse hover hide first image and show the second image.
something like this:
Html:
<div>
<span>This could be an image</span>
<span>This could be an image</span>
</div>
CSS:
div{
float:left;
width:200px;
height:200px;
}
div span{
width:100%;
height:100%;
display:none;
background-color:red;
}
div span:first-child{
display:block;
background-color:lime;
}
div:hover span:first-child{
display:none;
}
div:hover span:nth-child(2){
display:block;
}
have a look:
http://jsfiddle.net/mzvaan/fs6mc952/
html code like
<img src="sample1.png" id="newimg">
script like this
$(document).ready(function(e) {
$("#newimg").hover(function() {
$("#newimg").attr('src', 'sample2.png');
})
});
I have a one list page with edit column. When he click on edit it will open one edit page with all data which have list of image in thumbnail format.
Now I put close icon to all images.each image have its unique id.
1) When I click on close icon it will hide remove respective image.
2) onclick of submit I want available image ids.
PHP Code:-
<div id="<?=$rw['id'];?>" style="height:68px; width:86px; margin-right:10px; float:left;">
<img src="img/icons/close.png" style="float:right; vertical-align:top; height:18px; width:18px; z-index:9999;" >
<div style="height:50px; width:70px; border:1px solid #999; float:left; margin: 0 10px 0 0; box-shadow: 0 0 1px 1px #888888;">
<a class="group<?=$i;?>" href="<?=$img_gpath;?><?=$rw['upload_url'];?>" title="">
<img src="<?=$img_gpath.$rw['upload_url'];?>" style="height:50px; width:70px; z-index:999;" id="<?=$i;?>">
</a>
</div>
</div>
Please if you have any solution then share it with me.
add common class for div and dynamic id also
now you have only dynamic id;
if you use common class we can write jQuery like this
HTML
<div id="<?=$rw['id'];?>" class="common">
----elements
</div>
jQuery
jQuery('.common').on('click',function(){
var element_id=jQuery(this).attr('id'));// u will get dynamic id of div; after that u can do anything by using this id
});
An example fiddle is created. Please check.
Please give a class of remove-img to the remove buttons.
<img class="remove-img" src="url" />
Then you need to remove the parent division on click of the remove image like:
$('.remove-img').click(function(e) {
$( this ).parent().remove();
});
I have an image and rollover image. Using jQuery or CSS, I want to show/hide the rollover image when the onmousemove/onmouseout event happen on the parent div (containing the image).
How can I do it?
Edit: HTML posted below by request. Not relevant to the question, but as an FYI HTML is built on a 30 column fluid grid.
Upon hover of the top div (row-fluid) the image (image.png) should change to a different source image (imagehover.png).
<div class="row-fluid" style="padding-top:1em">
<div class="span4">
//Random content
</div>
<div class="span8 offset1">
//Random content
</div>
<div class="span9 offset3">
<ul>
<li>//Random content</li>
<li>//Random content</li>
<li>//Random content</li>
</ul>
</div>
<img src='../../images/image.png>
<div>
You want to do something like this: full_path_to_css parent:hover child
full_path_to_css parent:hover child {
styles for your item
}
eg:
html (the div.img can be anything):
<div class="parent">
<div class="img">
</div>
</div>
css:
div.parent {
width:200px;
height:200px;
background-color:red;
}
div.img {
width:100px;
height:100px;
background-color:blue;
}
div.parent:hover div.img {
background-color:green;
}
if you want to test check here: http://jsfiddle.net/NicosKaralis/kd6wy/
just to remember, the div with img class can be any element, doesn't need to be div and you can change the css styles as you wish, the only thing you need to watch is the parent:hover child
EDIT
Just to clarify one thing: the item with :hover is the parent on witch you want to detect the hover action, and the child is the item on witch you want to change the css rules
EDIT AGAIN
<div id="parent" class="row-fluid" style="padding-top:1em">
<div class="span4">
//Random content
</div>
<div class="span8 offset1">
//Random content
</div>
<div class="span9 offset3">
<ul>
<li>//Random content</li>
<li>//Random content</li>
<li>//Random content</li>
</ul>
</div>
<img class="child" src='../../images/image.png>
<div>
on your code you will need:
div#parent.row-fluid img.child {
display:none;
}
div#parent.row-fluid:hover img.child {
display:block;
}
this will make your image only show up if the mouse is over your div
Should just be as easy as attaching a mouseover and mouseout event handlers to the parent div and then manipulating the containing img element.
var rolloverImage = ...
var origImage = ...
$("#parentDivId")
.mouseover(function() {
$("#parentDivId img").attr("src", rolloverImage)
})
.mouseout(function() {
$("#parentDivId img").attr("src", origImage)
})
Try:
$('div.row-fluid').hover(function() {
$(this).find('img').attr('src', 'http://dummyimage.com/100x100/000/fff');
}, function() {
$(this).find('img').attr('src', 'http://www.placekitten.com/100/100');
});
jsFiddle example
Without having any html to test with, this is just something I thought up in my head. Not sure if it will work or not, but I don't see why it wouldn't.
$('div').mouseenter(function() {
var image = $('img', this);
$(image.attr('src', 'new-image-src.jpg');
}).mouseleave(function () {
var image = $('img', this);
$(image).attr('src', 'old-image-src.jpg');
});
You can use this code to "show/hide the rollover image"
#parentDiv > img {
display: none;
}
#parentDiv:hover > img {
display: block;
}
The > allows you to select img tags that are the direct descendents of #parentDiv (I gave the outer div that ID). Then we're just setting a different style for it on regular and hover states.
Answering my own question, as I used elements of others' comments and answers to create a hybrid: a sprite, totally CSS solution. I find this to be optimal.
Per #gilly3 "Image swaps are best done with a sprite, so that there is never any delay switching between the images. Put both versions of the image side by side in a single file. Set that image to be the background of a div, and adjust the background position to display one or the other image." For this example, I will use a 96px (height) by 27px (width) sprite, using my em values.
In HTML replace img line with:
<div class="sprite-image"></div>
CSS:
.sprite-image {
{
background-image: url(../../images/image.png);
height: 3.7em;
width: 27px;
}
.row-fluid:hover .sprite-image
{
background-position: 0px -3.7em;
}