I'm learning the JavaScript language and I'd like to reproduce something. I have a text called "Pause" and I'd like that, on click, another text replaces it with "Play".
Here's my JavaScript code:
(function($) {
$('#slideshow-pause-icon').click(function(e) {
e.preventDefault();
$('#slideshow, #slider, figcaption, #timeline').toggleClass('slideshow-pause');
});
})(jQuery);
Here's my HTML code:
<div id="slideshow">
<span id="slideshow-pause-icon" title="Click to pause">Pause</span>
<div id="slideshow-container">
<div id="slider">
<figure>
<a href="style-1.php">
<img src="images/image-1.jpg" alt="">
<figcaption>Style 1</figcaption>
</a>
</figure>
<figure>
<a href="style-2.php">
<img src="images/image-2.jpg" alt="">
<figcaption>Style 2</figcaption>
</a>
</figure>
<figure>
<a href="style-3.php">
<img src="images/image-3.jpg" alt="">
<figcaption>Style 3</figcaption>
</a>
</figure>
<figure>
<a href="style-4.php">
<img src="images/image-4.jpg" alt="">
<figcaption>Style 4</figcaption>
</a>
</figure>
</div>
<span id="timeline"></span>
</div>
</div>
Currently, when I click on the "Pause" text: http://i.stack.imgur.com/UYg7h.png
the slideshow-pause class is displayed and it has this CSS:
.slideshow-pause
{
animation-play-state: paused !important;
-webkit-animation-play-state: paused !important;
-moz-animation-play-state: paused !important;
-o-animation-play-state: paused !important;
}
Using JavaScript, I'd like that by clicking on the "Pause" text, my span ID slideshow-pause-iconis replaced by something like this:
<span id="slideshow-play-icon" title="Click to play">Play</span>
Thanks.
$(document).on("click", "#slideshow-pause-icon, #slideshow-play-icon", function(){
$(this).html()=="Play"?$(this).html("Pause"):$(this).html("Play");
this.id= (this.id=="slideshow-pause-icon"?"slideshow-play-icon":"slideshow-pause-icon");
this.title = (this.title=="Click to pause"?"Click to play":"Click to pause");
$("#slideshow, #slider, figcaption, #timeline").toggleClass("slideshow-pause");
});
This is gonna work for you.
With JQuery is quite easy:
$("#slideshow-play-icon").text("Pause");
You could do something like this. Just check if it has the class you're using to drive the text. It looks like this is playing an image gallery?
$('#slideshow-pause-icon').click(function()
{
var $this = $(this);
if($this.hasClass('slideshow-pause'))
{
$this.removeClass('slideshow-pause').text('Play');
//do something else to play the image gallery
}
else
{
$this.addClass('slideshow-pause').text('Pause');
//do something else to pause the image gallery
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="slideshow">
<span id="slideshow-pause-icon" class='slideshow-pause' title="Click to pause">Pause</span>
</div>
Related
I want to change an SVG image when hover
these are my imports
import sebhag from "./assets/Menu/grey/sebha-g.svg"
import sebhaw from "./assets/Menu/white/sebha-w.svg"
export const menu = {
title_sebhag: 'tasbieh',
image_sebhag: sebhag,
image_sebhaw: sebhaw,
};
I want to change the sebha-g.svg to sebha-w.svg when hover
<button>
<a href="#">
<figure>
<img src={image_sebhag} alt=" " />
<figcaption>{title_sebhag}</figcaption>
</figure>
</a>
</button>
Without additional context, the easiest way is probably through CSS:
<button>
<a href="#">
<figure>
<img class="figure-img src={image_sebhag} alt=" " />
<img class="figure-img--hover" src={image_sebhaw} alt=" " />
<figcaption>{title_sebhag}</figcaption>
</figure>
</a>
</button>
figure .figure-img--hover {
display:none
}
figure:hover .figure-img {
display: none;
}
figure:hover .figure-img--hover {
display: unset;
}
Here we simply hide the original image while hovering and instead display the desired image. Though there are many ways to skin this cat...
I have a few div's with class ".web-item" containing images. I go through them with a for loop and put an addEventListener (mouseover) on all the iterations and try to change the styling of each element (always the hovered element's style). But as I hover over an element, the styling of all the elements changes following the hovered element.
This is my JavaScript code:
let webItems = document.querySelectorAll(".web-item");
let i = 0;
for (let i = 0; i < webItems.length; i++) {
webItems[i].addEventListener("mouseover", function() {
webItems[i].style.filter = "brightness(30%)";
webItems[i].children[1].style.display = "block";
});
};
And the HTML:
<div class="web-item web-item-a">
<a href="#" target="_blank">
<img src="img/img-1.jpg" loading="lazy" alt="img-1.jpg">
</a>
<div class="web-item-caption">
<?php echo $lang["web-caption-a"] ?>
</div>
</div>
<div class="web-item web-item-b">
<a href="#" target="_blank">
<img src="img/img-2.jpg" loading="lazy" alt="img-2.jpg">
</a>
<div class="web-item-caption">
<?php echo $lang["web-caption-b"] ?>
</div>
</div>
How could I achieve that only the actually hovered element's styling changes? I would be really grateful for your help.
Only the styling of the hovered element will change - but if you hover over another element afterwards (like if you're moving the mouse quickly), that element's style will change too. You don't have any "stop hovering" functionality at the moment - if the mouse hovers over something, that element's style will stay changed until the page is reloaded.
let webItems = document.querySelectorAll(".web-item");
let i = 0;
for (let i = 0; i < webItems.length; i++) {
webItems[i].addEventListener("mouseover", function() {
webItems[i].style.filter = "brightness(30%)";
webItems[i].children[1].style.display = "block";
});
};
<div class="web-item web-item-a">
<a href="#" target="_blank">
<img src="img/img-1.jpg" loading="lazy" alt="img-1.jpg">
</a>
<div class="web-item-caption">
<?php echo $lang["web-caption-a"] ?>
</div>
</div>
<div class="web-item web-item-b">
<a href="#" target="_blank">
<img src="img/img-2.jpg" loading="lazy" alt="img-2.jpg">
</a>
<div class="web-item-caption">
<?php echo $lang["web-caption-b"] ?>
</div>
While you could add a mouseout listener, this can be achieved with only CSS and :hover:
.web-item-caption {
display: none;
}
.web-item:hover {
filter: brightness(30%)
}
.web-item:hover > .web-item-caption {
display: block;
}
<div class="web-item web-item-a">
<a href="#" target="_blank">
<img src="img/img-1.jpg" loading="lazy" alt="img-1.jpg">
</a>
<div class="web-item-caption">
text 1
</div>
</div>
<div class="web-item web-item-b">
<a href="#" target="_blank">
<img src="img/img-2.jpg" loading="lazy" alt="img-2.jpg">
</a>
<div class="web-item-caption">
text 2
</div>
I would like to toggle the src of the specific image element clicked. But, only for that image. In other words, only toggle the one clicked. If clicked again then change back. How can I do this with jQuery or JavaScript. The code can be seen here: https://codepen.io/centem/pen/NgKEmG
<!--
When image clicked change image to:
https://www.centerpointe.com/v2/wp-content/uploads/2014/01/red-x.png
-->
<ul class="list-unstyled">
<li>Username<span class="pull-right">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"></span><span class="pull-right">
<img src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"></span><span class="pull-right">
<img src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></span></li>
<li>Username<span class="pull-right">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"></span><span class="pull-right">
<img src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"></span><span class="pull-right">
<img src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></span></li></li>
<li>Username<span class="pull-right">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"></span><span class="pull-right">
<img src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"></span><span class="pull-right">
<img src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></span></li></li>
</ul>
Here is my jquery:
function handler( event ) {
var target = $( event.target );
if ( target.is( "img" ) ) {
target.src().toggle(
"https://www.centerpointe.com/v2/wp-content/uploads/2014/01/red-x.png");
}
}
Thank you.
You can add click event on img that exist in ul and toggle src of them by saving in data attribute. For toggling you need to save main src of image that can be saved as data-src (or anything else), And you need a flag for state of image like data-clicked (or anything else).
$('ul.list-unstyled li img').on('click', function(){
var clicked = $(this).data('clicked');
if(clicked === '1') {
$(this).attr('src', $(this).data('src'))
$(this).data('clicked', '0')
} else {
$(this).data('src', $(this).attr('src'))
$(this).attr('src', "https://www.centerpointe.com/v2/wp-content/uploads/2014/01/red-x.png");
$(this).data('clicked', '1')
}
})
img {
height: 25px;
padding-right: 4px;
}
li {
margin: 4px;
clear: both;
}
li:nth-child(odd) {
background: #f0f0f5;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--
When image clicked change image to:
https://www.centerpointe.com/v2/wp-content/uploads/2014/01/red-x.png
-->
<ul class="list-unstyled">
<li>Username<span class="pull-right">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"></span><span class="pull-right">
<img src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"></span><span class="pull-right">
<img src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></span></li>
<li>Username<span class="pull-right">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"></span><span class="pull-right">
<img src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"></span><span class="pull-right">
<img src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></span></li></li>
<li>Username<span class="pull-right">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"></span><span class="pull-right">
<img src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"></span><span class="pull-right">
<img src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></span></li></li>
</ul>
What you need to use is jquery's attr() function
Give your image a class name then you can change the src in jQuery by:
$(".image1").attr("src","https://www.centerpointe.com/v2/wp-content/uploads/2014/01/red-x.png");
And to attach it to a click event
$(".image1").click(function(){
$('.image1').attr('src','https://www.centerpointe.com/v2/wp-content/uploads/2014/01/red-x.png');
});
add an ID to your image and then try this:
$(function() {
$("#yourImage").onClick(function() {
$(this).attr("src", "https://www.centerpointe.com/v2/wp-content/uploads/2014/01/red-x.png");
});
});
Alternatively, you can change the image depending on the source like this:
$(function() {
$("img").onClick(function() {
if ($(this).attr("src") == "OriginalSource")
$(this).attr("src", "https://www.centerpointe.com/v2/wp-content/uploads/2014/01/red-x.png");
});
});
I'm creating a simple little slideshow for a site I'm designing for a friend. So far I have it to work just perfectly via clicking images to show / hide the respective image. I'm trying to get it to automatically scroll through the images but it won't seem to work. Here's my code:
<script type="text/javascript">
$(function() // run after page loads
{
$('.slide1t').show();
$('.slide2').click(function()
{
$('.slide2t').show();
$('.slide1t').hide();
$('.slide3t').hide();
$('.slide4t').hide();
});
$('.slide1').click(function()
{
$('.slide1t').show();
$('.slide2t').hide();
$('.slide3t').hide();
$('.slide4t').hide();
});
$('.slide3').click(function()
{
$('.slide3t').show();
$('.slide1t').hide();
$('.slide2t').hide();
$('.slide4t').hide();
});
$('.slide4').click(function()
{
$('.slide4t').show();
$('.slide1t').hide();
$('.slide2t').hide();
$('.slide3t').hide();
});
});
</script>
This is the code i'm using to hide/show images when clicked. Could this be shortened using toggle?
This is what i've tried to get them automatically scrolling:
<script type="text/javascript">
$(function() // run after page loads
{
$('.slide1t').show([1000]),
$('.slide1t').hide(),
$('.slide2t').show([1000]),
$('.slide21t').hide(),
$('.slide3t').show([1000]),
$('.slide3t').hide(),
$('.slide4t').show([1000]),
$('.slide4t').hide()
});
</script>
I've tried other aspects of this same code to try and get it to do something, but to no anvil.
<div id="slideshow">
<div class="text">
<a class="slide1" href="#"><img src="images/1.png" width="240" height="60" /></a>
<a class="slide2" href="#"><img src="images/2.png" width="240" height="60" /></a>
<a class="slide3" href="#"><img src="images/3.png" width="240" height="60" /></a>
<a class="slide4" href="#"><img src="images/4.png" width="240" height="60" /></a>
</div>
<div class="image">
<a class="slide1t" href="#"><img src="images/image1.png" width="525" height="210" /></a>
<a class="slide2t" href="#"><img src="images/image1.png" width="525" height="110" /></a>
<a class="slide3t" href="#"><img src="images/image1.png" width="525" height="170" /></a>
<a class="slide4t" href="#"><img src="images/image1.png" width="525" height="190" /></a>
</div>
</div>
I've looked into the documentation and saw you can use .show([duration],[easing],[callback]) but I don't really know what to input into them.
Thanks all
Are you making a slideshow where you can see to previous and next slide to the left and right of the current slide, or just one slide fading into another?
If it's the latter you can use this very simple code for doing this.
HTML:
<div class="image">
<img src="images/image1.png" />
<img src="images/image2.png" />
<img src="images/image3.png" />
<img src="images/image4.png" />
</div>
CSS:
.image
{
position:relative;
}
.image img
{
position:absolute;
top:0;
left:0;
}
jQuery:
$(function() {
$('.image img:gt(0)').hide(); // to hide all but the first image when page loads
setInterval(function()
{
$('.image :first-child').fadeOut(1000)
.next().fadeIn(1000).end().appendTo('.image');
},5000);
}
This basically shuffles the images like a pack of cards. 5000 (5 seconds) is the interval between fading, 1000 (1 second) is the speed of the fading animation.
For this to work however you must use position:relative on the containing div and position:absolute to position the images on top of each other.
jsFiddle demo
The thing is, .show is async. So your javascript will continue will it does the effect. That's what the third parameter is for, it's an anonymous function that will get called when the effect has finished.
You should look into a jquery plugin, making this things yourself is wasting time. There are hundreds of these plugins so there is always one fitting your needs.
For example: http://www.1stwebdesigner.com/css/fresh-jquery-image-gallery-display-solutions/
You can do this:
$('.image a').each(function (index) {
$(this).show(1000, function () {
$(this).delay(index * 1000).hide(1000);
});
});
FIDDLE DEMO
If you don't want to change your structure much and still want to retain the click function, you can do something like this
This is similar to your original approach but is based in a function and element's siblings instead of doing each image individual. This is optimized for adding new elements easily and retaining functionality. I used a setInterval to loop the animation function as well
HTML (changed slightly)
<div id="slideshow">
<div class="text"> <a id='one' href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png" width="240" height="60" /></a>
<a id='two' href="#"><img src="https://si0.twimg.com/profile_images/604644048/sign051.gif" width="240" height="60" /></a> <a id='three' href="#"><img src="https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png" width="240" height="60" /></a> <a id='four' href="#"><img src="https://si0.twimg.com/profile_images/2204583306/fb_logo.png" width="240" height="60" /></a>
</div>
<div class="image"> <a id='one' href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png" width="525" height="210" /></a>
<a id='two' href="#"><img src="https://si0.twimg.com/profile_images/604644048/sign051.gif" width="525" height="110" /></a>
<a id='three' href="#"><img src="https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png" width="525" height="170" /></a>
<a id='four' href="#"><img src="https://si0.twimg.com/profile_images/2204583306/fb_logo.png" width="525" height="190" /></a>
</div>
</div>
CSS:
.image a:not(#one) {
display:none;
}
javascript:
$('.text a').click(function () {
var idName = $(this).attr('id');
$('.image a').each(function () {
if ($(this).attr('id') === idName) $(this).show(1000);
else {
$(this).hide(1000);
}
});
window.clearInterval(loop);
loop = self.setInterval(function () {
autoChangeSlide()
}, 5000);
});
function autoChangeSlide() {
var elem;
$('.image a').each(function () {
if ($(this).is(':visible')) elem = $(this);
});
if (elem.attr('id') != $('.image').children('a').last().attr('id')) {
elem.hide(1000).next().show(1000);
} else {
elem.hide(1000).parent().children('a').first().show(1000);
}
}
var loop = self.setInterval(function () {
autoChangeSlide()
}, 5000);
You can combine my solution with Dolchio's to make it particularly awesome
How can I get an Image overlay to work with this code?
What I want is a set of icons to overlay, ontop of a image when the cursor moves over it.
http://socialartist.co/index.html
The code in question is HTML 5 and CSS 3, and has quite a lot of mark-up:
<ul class="items x_columns">
<li data-id="id-1" data-cat="#luxury">
<div class="preview"><a href="#" class="frame">
<img src="https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275" id="imgSmile" alt=""/></a>
</div>
<a class="title" href="#">Kirkbridge DNB</a>
<p>UK | Drum and Bass</p>
</li>
When I try to add a new div it just breaks the design (eg messes up the preview class border)
Is there 'an easy way' to just overlay onto an existing image, as above.
I don't really know how to set this up on Fiddle; I am hoping that ppl could just use developer tools (inspect element) on the page URL above?
If I got it right:
Add the icon you want to dispay inside the anchor tag:
Quick and dirty example: http://jsfiddle.net/ZVSVw/
<a href="#" class="frame">
<img src="https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275" id="imgSmile" alt=""/>
<div class=overlay>ICON</div>
</a>
Set it to display: none by default and style it with the selector .frame:hover > .overlay.
To your comment
remove the following line from your style.css:1654:
a > .frame:hover, a.frame:hover{
background: #ffffff;
/* border: 1px solid #24bfb6; remove this line */
}
You could add the other overlay picture with the display: none; property set and then basically toggle between the two pictures fiddle
Javascript:
jQuery('li[data-id="id-3"] > div').on('hover', 'a', function() {
jQuery(this).find('img').toggle();
jQuery(this).find('div.overlayContent').toggle();
});
Html:
<li data-id="id-3" data-cat="#holiday">
<div class="preview">
<a href="#" class="frame">
<img src="http://..." alt="default picture">
<div class="overlayContent" style="display: none;">...overlay content</div>
<!--img src="http://..." alt="alternate picture" style="display: none;"-->
</a>
</div>
<a class="title" href="#">TEST ME!</a>
<p>Test this one!</p>
</li>