Pop image out of div - javascript

How would I pop an image out of its div and set its width to 100% (so that it takes up most of the screen)? Note: I don't want to use any plugins.
I have this so far:
<div class="container">
<img src="thumbnail_image.png" />
</div>
JQuery:
$(document).on("click", ".container img", function(event) {
/* Get the image name. */
var src = $(this).attr('src').split('/');
var file = src[src.length - 1];
/* Load the big image into the container to replace the thumbnail. */
$(this).attr('src', 'big_images/' + file);
});
How would I do this?

You can use the css position fixed. So defining a class like this:
.fullscreen_image {
position: fixed;
top: 0;
left: 0
width: 100%;
}
you can then add and remove this class for your image.
$(this).addClass( 'fullscreen_image' );

You need to do something like this:
<div id="container">
<img src="http://i.stack.imgur.com/QWQds.jpg?s=128&g=1" class="thumbnail"/>
</div>
and jquery code:
$('#container img').live('click',function(){
$(this).addClass('zoom');
});
Check the DEMO HERE

Related

How to add transparent hover overlay to these carousel portfolio images

https://jsfiddle.net/dmaltron87/odpeLLv6/
Trying to make it so a simple overlay with text appears when I hover over the images, but I can't get anything to work with this code. I found this in a demo tutorial and edited for my site, but my javascript understanding/skills are still pretty basic. I'm not too picky about the end result, just want ideas.
tried something like this, and added a css overlay with opacity=0 then hover at .75. straightforward, but didn't work.
<div class="container">
<img src=".." alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
You'll need to capture the mouseenter() and mouseleave() events and add some dynamic content.
Here's an example:
$(".carousel img").on("mouseenter", function() {
//start hover
let me = $(this);
let position = me.position();
//create overlay
let overlay = $('<div class="overlay"></div>');
//set position and size
overlay.css({
left: position.left,
top: position.top,
height: me.height(),
width: me.width()
});
//append overlay
me.after(overlay);
});
//remove hover when the overlay is de-hovered
$(".carousel").on("mouseleave", ".overlay", function() {
//end hover
$(this).remove();
});
.overlay {
background: url(http://via.placeholder.com/200x200/00AA00?text=Overlay) no-repeat center;
opacity: 0.7;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="carousel">
<img src="http://lorempixel.com/200/200/sports/1/" />
<img src="http://lorempixel.com/200/200/sports/2/" />
<img src="http://lorempixel.com/200/200/sports/3/" />
</div>

How to swap images from side bar to the middle div on clicking on those sidebar images?

I'm new to JavaScript and I'm trying to build a web page and I've 3 images of that product in my sidebar and one main image in the middle now I want to get the sidebar image in the middle when a user clicks on that sidebar image. I don't know how to go about this. I've already tried couple of ways which I've found online, one of them is this
1. How to swap image and video to another div?
But these are not working out for me.
What you have to do is save both images in a variable and then swap them. Look at the example below
var imgleft,
imgcenter,
$center = $(".center img");
$(".sidebar img").click(function(){
imgleft = $(this).attr("src");
imgcenter = $center.attr("src");
$center.attr("src", imgleft);
$(this).attr("src", imgcenter);
});
.sidebar{
position: absolute;
top: 0;
width: 70px;
height: 100%;
background: red;
}
.center{
width: 80px;
height: 80px;
margin:25% auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
<img src="http://placehold.it/70x70">
<img src="http://placehold.it/70x60">
<img src="http://placehold.it/70x50">
</div>
<div class="center">
<img src="http://placehold.it/70x40">
</div>
You can use javascript's event handling (on each of your sidebar images) to solve this problem. First add the following java script code in your html:
<script type="text/javascript">
function changeToImage1(){
if(centerImage.src != "[1st-image-url.*]"){
centerImage.src = "[1st-image-url.*]";
}
}
function changeToImage2(){
if(centerImage.src != "[2nd-image-url.*]"){
centerImage.src = "[2nd-image-url.*]";
}
}
function changeToImage3(){
if(centerImage.src != "[3rd-image-url.*]"){
centerImage.src = "[3rd-image-url.*]";
}
}
</script>
Then you can simply add the above functions in the onClick attributes of your three sidebar div's accordingly. This can be done like this:
<div id = "first" onclick = "changeToImage1()">
...
</div>
<div id = "second" onclick = "changeToImage2()">
...
</div>
<div id = "third" onclick = "changeToImage3()">
...
</div>

Swap background on hover

I'm trying to swap background using jQuery. But the problem is that it doesn't successfully switch to new background, instead, the old one is removed and I get a white background instead.
I've been googling and trying out putting the path as a var instead for example, and some other unsuccessful suggestions.
My jQuery function looks like the following:
$("#btn").hover(function () {
$('#page1').css('background-image','url(../images/bg1_normal.jpg)');
});
And my CSS for the default background looks like this:
#page1 {
height: 100vh;
max-height: 100vh;
background-image: url("../images/bg1_rw.jpg");
background-repeat: no-repeat;
background-size: 100%;
}
I'm using Java Play Framework and the pictures are in the same folder, and it is the correct path to it since the default background works.
EDIT: I Tried as well to use an img source from the web, just to be 100% sure it wasn't some issues with the path, but it still only makes it white.
I believe jQuery's hover() function isn't able to remove that particular style when the mouse leaves.
You could just do it yourself
$("#btn").on({
mouseenter : function() {
$('#page1').css('background-image','url(../images/bg1_normal.jpg)');
},
mouseleave : function() {
$('#page1').removeAttr('style');
// or simply set the backround again to the other image
}
});
Try .addClass and .removeClass functions - it's simple and all style work is done in stylesheet file:
$("#btn").on({
mouseenter : function() {
$('#page1').addClass('inverted');
},
mouseleave : function() {
$('#page1').removeClass('inverted');
}
});
and then simply add
#page1.inverted {
//style as you need
}
to your stylesheet.
If you're using images you could do an image swap like this
https://jsfiddle.net/RachGal/oee3guxz/
$("#flowers").mouseover(function () {
var _this = $(this);
var current = _this.attr("src");
var swap = _this.attr("data-swap");
_this.attr('src', swap).attr("data-swap", current);
_this.toggleClass("opaque");
});
.opaque {
opacity:.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img id='flowers' class="full" src='http://www.rachelgallen.com/images/snowdrops.jpg' width="500" height="400" data-swap='http://www.rachelgallen.com/images/daisies.jpg' width="500" height="400" />
or if you could just use color like this
$("#color").mouseleave(function () {
$("body").css("background-color","black");
});
$("#color").mouseover(function (){
$("body").css("background-color","red");
});
$("#color").click(function(){
$("body").css("background-color","green");
});
body, #color {
height: 800px;
width: 800px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="color"> </div>
https://jsfiddle.net/RachGal/8p783jfo/
Hope this helps
Rach

Jquery: Slide images diagonally

Here is the effect I want to achieve:
This is i.e. one image, and the other images should slide diagonally in the way that arrow goes. The effect should not be fade effect. The slide effect has to be achieved.
Here is the html:
<div id="slider_page">
<div style="display: block;">
<img src="img1.jpg">
<img src="img2.jpg">
</div>
</div>
Please for help guys.
Sorry for the mess in the html code.
Thanks in advance
Here is a rough sketch on how to do it on your own, without a library. The code might need some adaption for your particular circumstances. For instance, if you want to slide not only images but elements containing text as well, change from using <img> to <div>. You'll find explanation in the comments.
HTML
<div id="carousel">
<img class="carousel-img" src="img1.jpg" />
<img class="carousel-img" src="img2.jpg" />
<img class="carousel-img" src="img3.jpg" />
</div>
CSS
#carousel {
position: relative; /* So images are positioned relative to it. */
width: 400px;
height: 300px;
overflow: hidden; /* So we clip the other images. */
}
.carousel-img {
width: 100%;
position: absolute; /* Position relative to parent div. */
left: 400px; /* Hide just beyond bottom right corner. */
top: 300px;
}
.carousel-img:first-child {
/* Do not hide the first image. */
left: 0px;
top: 0px;
}
JavaScript
//Some settings.
var animation_time = 500; //Millisecs the animation takes.
var waiting_time = 2000; //Millisecs between animations.
//Some variables.
var images; //A list of the images.
var i = 0; //Index of the current image.
var w; //Width of carousel.
var h; //Height of carousel.
$(function() {
//Runs when the DOM is ready.
//Set the variables.
images = $("#carousel .carousel-img");
w = $("#carousel").css("width");
h = $("#carousel").css("height");
//Start the carousel.
setTimeout(slideToNext, waiting_time)
});
function slideToNext() {
//Get the index of the next image.
var next = (i + 1) % images.length;
//Make sure the new image is on top.
images.css("z-index", 0);
images.eq(next).css("z-index", 1);
//Animate the next image.
images.eq(next).animate({left: "0px", top: "0px"}, animation_time, function() {
//Runs when the animation is compleated.
//Move the old image out.
images.eq(i).css({left: w, top: h});
//Now this is the current image.
i = next;
//Do it again.
setTimeout(slideToNext, waiting_time);
});
}
Here is a working JSFiddle, including some beautiful artwork by Caspar David Friedrich.
It might also be possible to configure an existing carousel library (like Slick or Jssor) to do this.

Show/hide multiple elements on hover with JQuery and HTML

This is what I have so far:
<div style = "position: relative;">
<a href = "#games">
<div class="sidenavOff">
<img src = "images/card_normal.png" />
<img src = "images/category_icons/icon_games.png" style = "position: absolute; top: 10px; left: 40px;" />
<img src = "images/category_titles/title_games.png" style = "position: absolute; top: 160px; left: 40px;" />
</div>
<div class = "sidenavOver">
<img src = "images/hover/card_hover.png" />
<img src = "images/category_titles/title_games.png" style = "position: absolute; top: 10px; left: 40px;" />
<img src = "images/hover/card_hover_separator.png" style = "position: absolute; top: 40px; left: 40px;" />
Show a bunch of text here
<img src = "images/button_start_normal.png" style = "position: absolute; top: 200px; left: 40px;" />
/div>
</a>
</div>
So card.png is a notecard that has multiple transparent images overlayed on top of it. When the mouse is away from the card, it has icon_games.png and title_games.png showing on the card. I want it so that when the mouse hovers over card.png, icon_games.png, or title_games.png (in other words, whenever the mouse pointer is in the card), the card displays the elements title_games.png, card_hover_separator.png, a text description, and button_start_normal.png, in that order vertically (and the positioning of this should be editable as it will likely be different than the images displayed when not hovering).
This is my jquery code (I've never used it before so I'm pretty sure this is off. I don't quite understand it):
$(document).ready(function() {
$(“div.sidenavOff”).mouseover(function(){
$(this).removeClass().addClass(“sidenavOver”);
}).mouseout(function(){
$(this).removeClass().addClass(“sidenavOff”);
});
});
In a more understandable format, without hover:
http://img834.imageshack.us/img834/7026/screenshot20130606at122.png
With hover:
http://imageshack.us/photo/my-images/855/screenshot20130606at122.png/
This is my jquery code [...]. I don't quite understand it
$(document).ready(function () {/* function body */});
When document (as a jQuery object $) is ready, invoke a function as described by /* function body */
$("div.sidenavOff")
Use jQuery $ to get all HTMLElements that match the CSS Selector div.sidenavOff
.mouseover(function () {
$(this).removeClass().addClass("sidenavOver");
})
When the mouse goes over one of these elements (mouseover), remove the class undefined (as nothing between brackets, removeClass), then add the class sidenavOver (addClass) to the element that the mouse is over (this). class here can be understood as meaning the same as the HTML attribute class; <a class="xyz">
.mouseout(function () {
$(this).removeClass().addClass("sidenavOff");
})
When the mouse leaves one of these elements (mouseout), similar to when it goes over them, except this time adding the class sidenavOff to that element.
You're close but probably want code that looks like this
$(document).ready(function () {
$("div.sidenavOff").mouseover(function () { // add visibility flag
$("div.sidenavOver").addClass("showme"); // to div.sidenavOver
}).mouseout(function () { // remove visibility flag
$("div.sidenavOver").removeClass("showme"); // from div.sidenavOver
});
});
Where the class showme relates to some CSS to force the element to be displayed
.showme {display: block;}
It sounds like you are just trying to show or hide the "sidenavOver" div when the mouse hovers the container. Is that correct?
I created this jsfiddle using your html, but commented out all your missing images and added a class to your container div.
http://jsfiddle.net/joshvito/GaZQ6/
e.g.
//on hover over the container; you can use the a tag too, which ever element you want to bind the event to
$('.container').on({
mouseenter: function () {
$(".sidenavOff").hide(); //On mouseover, hode the first div
$(".sidenavOver").show();
},
mouseleave: function () {
$(".sidenavOff").show();
$(".sidenavOver").hide();
}
});
good reference for the js event handlers is at JQUERY API Documentation for .on

Categories