I use Superslides to create an intro. I need that at first the background is white (image 0.jpg) and then when the mouse enters a div change to another image random.
My code is:
HTML
<div id="entra_mouse">
<img src="imagenes/intro/logo.png" alt="" />
<br /><br /><br />
Entrar / Enter
</div>
<div id="slides">
<div class="slides-container">
<img src="imagenes/intro/0.jpg" alt="" />
<img src="imagenes/intro/1.jpg" alt="" id="img_aleatoria" />
</div>
</div>
Javascript
<script>
$(function() {
$('#slides').superslides({
hashchange: false
});
$('#entra_mouse').on('mouseenter', function() {
$('#slides').css('display','inline');
var imagen_aleatoria = Math.round(Math.random()*6);
$("#img_aleatoria").attr("src", "imagenes/intro/'+imagen_aleatoria+'.jpg");
$('#slides').superslides('start');
});
$('#entra_mouse').on('mouseleave', function() {
$('#slides').superslides('stop');
$('#slides').css('display','none');
});
});
</script>
The problem is when the mouse enters ($('#entra_mouse').on('mouseenter', function() {) always show image 1.jpg and not the random.
How I can fix it? =(
Thanks.
Hej!
You can write $('#slides').data('superslides').animate(something).
In my case I have a gallery and when you click on a specific image on get the slide show on a overlay that slides from the top. I get the current index of the thumbnail clicked and animated the slideshow to match with the thumbnail:
$( thumbnail ).click(function() {
var current = $(thumbnail).parent().children('a').index(this);
$('#slides').data('superslides').animate(current);
});
Although I have to say that is not ideal, since I would like to go to a specific slide without animating the action. I haven't find a way to do so.
I hope that helps you! Good Luck!
Related
I have two images, what I want to happen is that when I hover on the image, the image will change to the second image, and then when I hover on the image again, the image will change to the first image.
How do I do that using JavaScript?
This is a Javascript solution. I highly suggest you look into Jquery once you understand the below. In your case you don't seems to need the onmouseout.
HTML
<img src="urImg.png" onmouseover="chgImg(this)" onmouseout="normalImg(this)">
Javascript
function chgImg(x) {
x.src = "newImg.png";
}
function normalImg(x) {
x.src = "urImg.png";
}
HTML
<div class="image_container">
<img src="foo.png" class="first"/>
<img src="bar.png" class="last"/>
</div>
jQuery
$(".image_container").hover(function(){
$(this).toggleClass("switch");
});
CSS
.image_container .last{display:none;}
.image_container.switch .last{display:block;}
.image_container.switch .first{display:none;}
You can do this!
<a href="#" id="name">
<img title="Hello" src="images/view2.jpg>
</a>
$('#name img').hover(function() {
$(this).attr('src', 'images/view1.jpg');
}, function() {
$(this).attr('src', 'images/view2.jpg');
});
For anyone who do not want to use Javascript, just HTML, CSS.
You just need create second image with position: absolute; and put it with original image into a div (with position: relative;)
After that, you can use CSS to control opacity of second image when you hover it.
Below is my sample code using TailwindCSS
<div className="relative">
<img
src="/image1.png"
className="w-[100px] h-[100px]"/>
<img
src="/image1.png"
className="w-[100px] h-[100px] absolute opacity-[0] hover:opacity-[1]"/>
</div>
Taking a web design course, and need to use strictly Javascript on this project.
Basically I want to have a series of thumbnails on the left of the screen, and when one is hovered over it brings up information about the image on the right side of the screen. It remains that way until another thumbnail is hovered over, then the information is replaced.
I thought of having a series of divs on-top of eachother containing the information, and onhover the targeted div appears and the last div disappears.
Any suggestions?
Give the images a mouseover attribute and run a function on hover.
<img onmouseover="changeInfo(0)">
<img onmouseover="changeInfo(1)">
<img onmouseover="changeInfo(2)">
<div id="showInfo"></div>
Then place the info for every image in an array and change the inner html in the div depending on which image is being hovered.
function changeInfo(index){
var texts = ['Info on img0','Info on img1','Info on img2'];
var info = document.getElementById('showInfo');
info.innerHTML = texts[index];
}
I don't know if this is the result you want to get. First, I declare all the images using divs. The information is hidden at the beginning.
<div id="posts">
<div id="post1">
<img src="[Insert an image]" width="100" height="100"/>
<p class="hide"> information about picture one </p>
</div>
<div id="post2">
<img src="[Insert an image]" width="100" height="100"/>
<p class="hide"> information about picture one </p>
</div>
<div id="post3">
<img src="[Insert an image]" width="100" height="100"/>
<p class="hide"> information about picture one </p>
</div>
</div>
these are the css classes
.nolabel p {display: none;}
.label p { display: block; }
.hide { display: none; }
and javascript:
var posts = document.getElementById("posts").children;
function forEach(el, callback) {
for(var i = 0; i <= el.length; i++) {
callback(posts[i]);
}
}
forEach(posts, function(child) {
child.addEventListener("mouseover", function(){
forEach(posts, function(el) {
if(child.id === el.id)
el.className = "label";
else
el.className = "nolabel";
});
});
});
the forEach helps us to simplify a this code a little.
Since we could have any number of images I thought it was not a good
idea to reference each of them by its id.
When the cursor hovers over one of the images we trigger a mouseover event which will compare the ids. The if statement makes sure we only modify the element we clicked and the others remain with the nolabel class (or replace it if they had label).
I hope that helps.
jQuery would be best for this, or you can use an onMouseOver function and your information styled with visibility: hidden. Maybe post some code so more help can be provided.
Check this out too Display text on MouseOver for image in html
I have two images which I'm toggling and a zoom on those images is supposed to be displayed according to the selected image. On the first page load everything works fine (image appears, zoom appears). After I click the image, the image swaps and the zoom works fine as well. However, if I click again, I'm getting the image toggled correctly, but the zoom image does not refresh even for further clicks (keep displaying the zoom for the 2nd loaded image).
I'm trying to change the attributes of data-zoom-image but no luck. Any suggestions?
function pageLoad(sender, args) {
zooming();
}
function chngimg(x) {
if ($("#zoom_mw").attr("src") == x) {
var rimage;
rimage = $("#zoom_mw").attr('rearimage');
$("#zoom_mw").attr("src", rimage);
$("#zoom_mw").removeAttr("data-zoom-image");
$("#zoom_mw").attr("data-zoom-image", rimage);
$("#zoom_mw").elevateZoom({ scrollZoom: true });
} else {
var fimage;
fimage = $("#zoom_mw").attr('frontimage');
$("#zoom_mw").attr("src", fimage);
$("#zoom_mw").attr("data-zoom-image", fimage);
$("#zoom_mw").elevateZoom({ scrollZoom: true });
}
}
<img style="border:1px solid #e8e8e6;" id="zoom_mw"
onclick="chngimg('<%= Session("ImagePathFront")%>')"
frontimage='<%= Session("ImagePathFront")%>'
rearimage='<%= Session("ImagePathRear")%>'
src='<%= Session("ImagePathFront")%>'
width="500" height="250" />
I assume that you are using this library. Is this the case?
In my demo i copied your code and currently
it toggles the images.
Your function pageLoad() calls a function zooming() but the code you provided does not execute pageLoad and the function zooming() is missing.
The call to elevateZoom is not working for me. Are you missing a reference?
If you are using elevateZoom than you have to provide the URL for the larger Image
<img id="zoom_01" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
Their exsample Gallery & Lightbox seems to me that it comes close what you are looking for:
<img id="img_01" src="small/image1.jpg" data-zoom-image="large/image1.jpg"/>
<div id="gal1">
<a href="#" data-image="small/image1.jpg" data-zoom-image="large/image1.jpg">
<img id="img_01" src="thumb/image1.jpg" />
</a>
<a href="#" data-image="small/image2.jpg" data-zoom-image="large/image2.jpg">
<img id="img_01" src="thumb/image2.jpg" />
</a>
</div>
And the matching javascript
//initiate the plugin and pass the id of the div containing gallery images
$("#zoom_03").elevateZoom({gallery:'gallery_01',
cursor: 'pointer', galleryActiveClass: 'active'
, imageCrossfade: true
, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'});
//pass the images to Fancybox
$("#zoom_03").bind("click", function(e) {
var ez = $('#zoom_03').data('elevateZoom');
$.fancybox(ez.getGalleryList());
return false;
});
Please ask additional questions or comment if i misunderstood you.
I'm currently working on a new personal portfolio site using very basic html/css/jquery code. I'm trying to build my own gallery to display my work (instead of using an already existing one like lightbox) but I've run into an annoying issue: I've tried to make the "forward-button" display the immediate following div but instead it fades in all the following divs. Here's my (condensed) code:
HTML:
<!--navigation buttons for gallery-->
<a id="back-button"><img src="image.png" /></a>
<a id="forward-button"><img src="image.png"/></a>
<!--gallery begins here-->
<div id="gallery">
<div id="first-div" class="work-display">
<img src="images/albumust-display.png" class="work-image" />
<div class="caption" id="wd1c">
<p class="caption-text">caption</p>
</div>
</div>
<div id="second-div" class="work-display">
<img src="images/ce-display.png" class="work-image" />
<div class="caption">
<p class="caption-text">caption</p>
</div>
</div>
<div id="third-div" class="work-display">
<img src="images/display.png" class="work-image" />
<div class="caption">
<p class="caption-text">caption</p>
</div>
</div>
CSS (all divs inside gallery are hidden by default):
.work-display {
display:none;
position:absolute;
}
What I'm trying to do with Jquery is that everytime someone opens a thumbnail, give the corresponding div that displays the image on full size a "true" state of "active" and then fade in, like this:
$( "#thumb-1" ).click(function(){
$( "#first-div" ).prop("active",true);
$( "#first-div" ).fadeIn();
});
all divs originally have a state of "active" = false:
$( "#gallery" ).children("div").prop("active",false);
then this is what I've tried to do with the "forward-button":
$("#forward-button").click(function () {
$("#gallery").find( $("div").prop("active",true) )
.prop("active",false)
.fadeOut()
.next().fadeIn();
$(".caption").fadeIn();
});
But then what it does is that instead of fading in only the next div, it fades all the divs that come after. what am I doing wrong?
I'm very new to Javascript/Jquery so probably this isn't the smartest way to go about this, if you have a simpler solution, do tell me.
I couldn't test it properly, because I don't have the whole code (and the images either). But this should do the trick:
$(function () {
$("#gallery div").attr("active", false);
$("#thumb-1").click(function () {
$("#first-div").attr("active", true).fadeIn();
});
$("#forward-button").click(function () {
$("#gallery div[active=true]:first")
.attr("active", false)
.fadeOut()
.next()
.attr("active", true)
.fadeIn();
});
$("#back-button").click(function () {
$("#gallery div[active=true]:first")
.attr("active", false)
.fadeOut()
.prev()
.attr("active", true)
.fadeIn();
});
});
Kind of demo: http://jsfiddle.net/W8VLh/13/
Just in case you have a reason to use 'active' properties instead of classes:
$("#forward-button").click(function () {
$("#gallery").find( "div[active='true']")
.prop("active",false)
.fadeOut()
.next().fadeIn().prop("active",true);
$(".caption").fadeIn();
});
i have read several posts on this but none seems to solve my issue,
when I fadeout a gallery, the other fades in, that works fine...but the item that fades in seems to 'refresh' or fade in again (real quick) after the fadein animation completed, here's my code:
what I have is basically a photo gallery (photographySection) contained inside a 'mediaContainer', this is the css:
.mediaContainer {
position: relative;
}
.photographySection {
top: 10px;
left:0;
position: absolute;
}
html:
<div class='mediaContainer'>
<div class='photographySection hidden' id='photographyExperimental'>
<ul><li><img src...></li></ul>
</div>
<div class='photographySection hidden' id='photographyFaces'>
<ul><li><img src...></li></ul>
</div>
</div>
js:
$(".photographyMenu").click(function(event){
$(".photographySection").hide(1,function() { // hide all sections
var section = $(event.target).attr("section"); // read new section to show
$("#"+section).fadeIn(500); // for example $("#photographyFaces")
});
});
everything works smoothly, but sometimes after the chosen div fades in, it flickers/blinks once for some reason
thanks!
Do you really need all that markup for such a simple task? If all you want is just fade a bunch of images in and out, you could do something like this:
html markup:
<div class="mediaContainer">
<img src="" />
<img src="" />
<img src="" />
</div>
jQuery:
function fadeInOut(){
var imgs = $('.mediaContainer > img');
imgs.wrapAll('<div class="slideshow" />');
$('.slideshow > img:gt(0)').hide();
setInterval(function(){
$('.slideshow > img:first')
.fadeOut(500)
.next('img')
.fadeIn(500)
.end()
.appendTo('.slideshow');
}, 5000);
}
Maybe someone more experienced can improve upon this code. You can also set vars to those "magic numbers" (500/5000) and some other things, but that should solve the problem with much less code (just an option).
Just don't use the 500, and it will work smoother, slow is 600miliseconds and normal is 400miliseconds
You can try this one: http://jsfiddle.net/S4sbm/
$(".photographySection:gt(0)").hide();
$(".photographyMenu").click(function(event){
$(".photographySection").fadeOut(500);
var section = $(event.target).attr("section"); // read new section to show
$("#"+section+':hidden').fadeIn(500); // for example $("#photographyFaces")
});
checkout the fiddle and see if this helps.