I would like to code a slider with jquery from scratches

I would like to code a slider with jquery from scratches - javascript

Hy everybody,
My task is to realize a slider with pure HTML / Jquery code.
The template is the follow
and the html code for the upper template is the follow
<div id="viewport-container">
<section id="sliding-container">
<article id="slide-0" class="slide"><span></span></article>
<article id="slide-1" class="slide"><span></span></article>
<article id="slide-2" class="slide"><span></span></article>
<article id="slide-3" class="displayed-slide"><span></span></article>
</section>
</div>
<nav id="slider-nav">
</nav>
We start with button {#slide-0} which display article {ID="slide-0"}; when we select another button, let's say {#slide-3} then article with {ID="slide-0"} fade out and article with {ID="slide-3} fade in; when we select another button, let's say {#slide-1} then article with {ID="slide-3"} fade out and article with {ID="slide-1} fade in; and so on.
I started to struggle with this aim a week ago and so I ask your precius help.
Many many thanks

This will get you going.
You will need:
- http://jquery.com/ - JQuery
- http://jqueryui.com/ -JQueryUI
With these two your work is easy.
First reference JQuery in your website then you reference JQueryUI.
Then you will do something like this in your own JQuery Code:
The HTML:
<div id="slider">
<div id="firstSlide">
<img class="active" src="pics/home/1.1.gif"/>
<img src="pics/home/1.2.gif"/>
<img src="pics/home/1.3.gif"/>
</div>
</div>
The CSS:
#slider
{
position: relative;
height: 180px;
border-bottom: 3px solid black;
z-index: 1;
box-shadow: 0px 0px 10px black;
}
#firstSlide
{
position: absolute;
width: 198px;
height: 100%;
left: 0%;
border: 1px solid black;
}
#firstSlide img
{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 1;
}
#firstSlide img.active
{
z-index: 3;
}
The JQuery:
var howLongEffectLasts = 1000;
var timerInterval = 7000;
var slideDelay = 300;
var slideEffect = 'slide';
var slideDirection = 'up';
var timer = setInterval('DoIt1()', timerInterval);
function DoIt1()
{
var $active = $('#firstSlide' + ' .' + 'active');
var $next = ($active.next().length > 0) ? $active.next() : $('#firstSlide' + ' ' + 'img:first');
$next.css('z-index',2);
$active.toggle(slideEffect, { direction: slideDirection }, howLongEffectLasts, function() {
$active.css('z-index',1).show().removeClass('active');
$next.css('z-index',3).addClass('active');
});
setTimeout(function() { DoIt1(); }, slideDelay);
}
In the JQuery, just change the var's to your needs. Also, change the CSS etc to your own needs. The Z-INDEXes are VERY important here - so be careful when you change theCSS I gave you.

Why don't you put a javascript function in your href that can just change the class of your article.
When you change the class of your article, you can display them or not (like we can see, class=slide or displayed-slide)
I don't know if it's what you want to do ?
Have you try some things ?

I did it (phew!!)
Now this is the css
#viewport-container {
height: 250px;
width: 980px;
margin: 0 auto;
overflow: hidden;
}
#sliding-container {
width: 100%;
}
#slide-0 {
background-image: url(/Images/slide_home.jpg);
height: 250px;
width: 980px;
position: absolute;
}
#slide-1 {
background-image: url(/Images/slide_informatica.jpg);
height: 250px;
width: 980px;
position: absolute;
}
#slide-2 {
background-image: url(/Images/slide_musica.jpg);
height: 250px;
width: 980px;
position: absolute;
}
#slide-3 {
background-image: url(/Images/slide_recensioni.jpg);
height: 250px;
width: 980px;
position: absolute;
}
#slider-nav {
text-align: center;
margin: 10px 0 0 0;
}
#slider-nav a {
width: 10px;
height: 10px;
display: inline-block;
background: #ddd;
border-radius: 50%;
}
#slider-nav a.active {
background: #999;
}
this is the html
<head>
<title></title>
<script src="Scripts/jquery-2.0.3.min.js"></script>
<link href="CSS/Slider.css" rel="stylesheet" />
</head>
<body>
<div id="viewport-container">
<section id="sliding-container">
<article id="slide-0" class="displayed" style="display:block;"><span></span></article>
<article id="slide-1" style="display:none"><span></span></article>
<article id="slide-2" style="display:none"><span></span></article>
<article id="slide-3" style="display:none"><span></span></article>
</section>
</div>
<nav id="slider-nav">
<a id="btn-0" href="#slide-0" class="active"></a>
<a id="btn-1" href="#slide-1"></a>
<a id="btn-2" href="#slide-2"></a>
<a id="btn-3" href="#slide-3"></a>
</nav>
and this is the script
<script>
$(document).ready(function () {
var $navButtons = $("#slider-nav > a");
$navButtons.click(
function () {
var $selectedButton = $(this);
var rawIdSlideToFadeIn = $selectedButton.attr("href");
$navButtons.removeClass("active");
$selectedButton.addClass("active");
crossFading(rawIdSlideToFadeIn);
});
function crossFading(rawIdSlideToFadeIn) {
var $slideToFadeIn = $(rawIdSlideToFadeIn);
var $slideToFadeOut = $("article.displayed");
var idSlideToFadeIn = $slideToFadeIn.attr("id");
var idSlideToFadeOut = $slideToFadeOut.attr("id");
if(idSlideToFadeIn != idSlideToFadeOut)
{
$slideToFadeOut.removeClass("displayed").css("style", "none").fadeOut();
$slideToFadeIn.addClass("displayed").css("style", "block").fadeIn();
}
}
});
</script>
Yes, some part of this code has to be improved, but the kernel is built,
Special thanks to SushiBalboha: his hint showed me the right way.
Thank you very much

Related

is there a way to make a background scroll down while some content stay in the middle at all time?

I'm trying to do something like (in js, html, sass) :
when I scroll the page down my layers (ground, sky, space, ...) go down
my content (that will be a rocket going in the sky) stay in the middle of the screen and will move to the sides like if it were to be flying (that will be for later)
some elements will move on the layers (like asteroids going from right to left or something) (for later)
So here are some ideas of code I tried but this seem odd and do not work as intended; as you can see, the layers are scrolling as intended, but they are not all showing for whatever reason, they seem to fill all the page size but they shouldn't and i'm going round and round about this on the internet and no one seem to have done something like this.
// Functions
detectPageVerticalPosition = () => {
pageVerticalPosition = pageYOffset;
};
getDivs = () => {
for (
let div = document.getElementsByTagName("div"), i = 0; i < div.length; i++
) {
div[i].getAttribute("class") == "layer-vertical" &&
layerVerticalArray.push(div[i]);
}
console.log("layerVerticalArray: ", layerVerticalArray);
};
moveLayers = () => {
for (let i = 0; i < layerVerticalArray.length; i++) {
layerVerticalArray[i].style.bottom = -1 * pageVerticalPosition + "px";
}
};
// End Functions
// Variables
var pageVerticalPosition = 0,
layerVerticalArray = new Array();
// End Variables
// Events
window.onload = e => {
getDivs();
// console.log(layerVerticalArray);
};
window.onscroll = e => {
detectPageVerticalPosition();
moveLayers();
};
// End Events
body {
margin: 0;
}
#page {
position: relative;
height: 20000px;
width: 100%;
}
#rocket-container {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#rocket-container #rocket {
position: absolute;
width: 100px;
height: 100px;
left: calc(50% - 50px);
top: calc(50% - 50px);
}
#background-container {
position: fixed;
height: 100%;
width: 100%;
background-color: red;
overflow: hidden;
}
#background-container .layer-vertical {
width: 100%;
height: 3500px;
}
#background-container #layer-vertical-1 {
position: absolute;
background-color: blue;
}
#background-container #layer-vertical-1 #cloud-1 {
outline-style: dashed;
right: 0px;
}
#background-container #layer-vertical-1 #cloud-2 {
outline-style: dotted;
bottom: 0px;
}
#background-container #layer-vertical-2 {
background-color: green;
}
#background-container #layer-vertical-3 {
background-color: purple;
}
.cloud {
position: absolute;
width: 180px;
height: 120px;
background-image: url(../images/cloud.png);
}
<div class="page">
<div class="background-container">
<div class="layer-vertical" id="layer-vertical-1">
Layer 1
<div class="cloud" id="cloud-1"></div>
<div class="cloud" id="cloud-2"></div>
</div>
<div class="layer-vertical" id="layer-vertical-2">
Layer 2
</div>
<div class="layer-vertical" id="layer-vertical-3">
Layer 3
</div>
</div>
<div id="rocket-container">
<div id="rocket">STAY MIDDLE</div>
</div>
</div>
[1]: https://via.placeholder.com/180/120

So, here's what i found in order to fix this (jsfiddle: http://jsfiddle.net/kjrte2sd/2/)
i used some jquery to make the background-container scroll down as intended instead of each elements scrolling down by himself.
now the page div is gone and the body handle the sizing of the whole thing.
i guess the answer was simpler than i expected it to be.
var winHeight = $(window).innerHeight();
$(document).ready(() => {
$(".layer-vertical").height(winHeight);
$("body").height(winHeight * $(".layer-vertical").length);
});
window.addEventListener("resize", e => {
$(".layer-vertical").height($(window).innerHeight());
});
$(window).on("scroll", () => {
$("#background-container").css("bottom", $(window).scrollTop() * -1);
});
body {
margin: 0;
padding: 0;
}
#rocket-container {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#rocket-container #rocket {
position: absolute;
width: 100px;
height: 100px;
left: calc(50% - 50px);
top: calc(50% - 50px);
}
#background-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
#background-container .layer-vertical {
width: 100%;
}
#background-container .layer-vertical h1 {
width: 100px;
position: relative;
display: block;
margin: 0 auto;
text-align: center;
top: 50%;
}
#background-container #layer-vertical-1 {
background-color: green;
}
#background-container #layer-vertical-2 {
background-color: red;
}
#background-container #layer-vertical-3 {
background-color: white;
}
#background-container #layer-vertical-4 {
background-color: pink;
}
#background-container #layer-vertical-5 {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="background-container">
<div class="layer-vertical" id="layer-vertical-5">
<h1>5</h1>
</div>
<div class="layer-vertical" id="layer-vertical-4">
<h1>4</h1>
</div>
<div class="layer-vertical" id="layer-vertical-3">
<h1>3</h1>
</div>
<div class="layer-vertical" id="layer-vertical-2">
<h1>2</h1>
</div>
<div class="layer-vertical" id="layer-vertical-1">
<h1>1</h1>
</div>
</div>
<div id="rocket-container">
<div id="rocket">STAY MIDDLE</div>
</div>

Using jQuery / JavaScript to float element to right

Fiddle
Hello,
I found sticky sidebar jQuery script, but the fixed element (sidebar) floats to the left once I start scrolling down. I am trying to keep it on the right-hand side the whole time. Also, I am trying to get some spacing around sidebar once it starts scrolling, as now it's just stuck to the very top.
I trust it's a simple fix but JavaScript is like a dark forest to me, I tried to change couple things, tried to look online but can't seem to find the answers or I just don't know how to look for them so I apologise if this has been asked before.
$( document ).ready(function() {
console.log( "document ready!" );
var $sticky = $('.sticky');
var $stickyrStopper = $('.sticky-stopper');
if (!!$sticky.offset()) { // make sure ".sticky" element exists
var generalSidebarHeight = $sticky.innerHeight();
var stickyTop = $sticky.offset().top;
var stickOffset = 0;
var stickyStopperPosition = $stickyrStopper.offset().top;
var stopPoint = stickyStopperPosition - generalSidebarHeight - stickOffset;
var diff = stopPoint + stickOffset;
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
if (stopPoint < windowTop) {
$sticky.css({ position: 'absolute', top: diff });
} else if (stickyTop < windowTop+stickOffset) {
$sticky.css({ position: 'fixed', top: stickOffset });
} else {
$sticky.css({position: 'absolute', top: 'initial'});
}
});
}
});
.container {
width: 1000px;
float: left
}
.header {
clear: both;
margin-bottom: 10px;
border: 1px solid #000000;
height: 90px;
}
.sidebar {
float: right;
width: 350px;
border: 1px solid #000000;
}
.content {
float: right;
width: 640px;
border: 1px solid #000000;
height: 800px;
}
.footer {
clear: both;
margin-top: 10px;
border: 1px solid #000000;
height: 820px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
<div class="header">
This is header
</div>
<div class="sidebar sticky">
This is side bar
</div>
<div class="content">
This is main content
</div>
<div class="footer">
<div class="sticky-stopper"></div>
This is my footer
</div>
</div>

I used the Sticky-Kit.js plugin. That worked for me. See below, it keeps your sidebar to the right the entire time and has the sticky effect you're after:
$(document).ready(function() {
console.log("document ready!");
$(".sidebar").stick_in_parent();
});
.container {
width: 1000px;
float: left
}
.header {
clear: both;
margin-bottom: 10px;
border: 1px solid #000000;
height: 90px;
}
.sidebar {
float: right;
width: 350px;
border: 1px solid #000000;
}
.content {
float: left;
width: 640px;
border: 1px solid #000000;
height: 800px;
}
.footer {
clear: both;
margin-top: 10px;
border: 1px solid #000000;
height: 820px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/leafo/sticky-kit/v1.1.2/jquery.sticky-kit.js"></script>
<div class="container">
<div class="header">
This is header
</div>
<div class="sidebar sticky">
This is side bar
</div>
<div class="content">
This is main content
</div>
<div class="footer">
<div class="sticky-stopper"></div>
This is my footer
</div>
</div>

You can use JQuery's css() method to apply css on scroll to the element to achieve the desired effect.
Change the JavaScript as follows:
if (stopPoint < windowTop) {
$sticky.css({ position: 'absolute', top: diff, right: '0px' });
} else if (stickyTop < windowTop+stickOffset) {
$sticky.css({ position: 'fixed', top: stickOffset, right: '0px' , margin: '10px 10px 0px 0px'});
} else {
$sticky.css({position: 'absolute', top: 'initial', right: "0px", margin: '0px'});
}
A css property of right:0px is applied to the element on scroll, since it's position becomes aboslute on scroll.
margin: 10px 10px 0px 0px was also applied to the element to provide additional spacing around it when scrolling. This is then sent to margin:0px when the scroll stops.
You will also need to adjust the css of the content css class, if you do not want your side bar sitting on top of the content area.
.content {
width: 550px;
border: 1px solid #000000;
height: 800px;
}
Here is an updated fiddle demonstrating these changes.

jquery animated slide show not animating

I have the following code for an image slider. It is a bit complicated because i want to use the slider code for multiple slider elements on the page. See below the code for one slider:
The problem i am having is described at the bottom.
$(document).ready(function(){
$('.vertical_img').first().addClass('display currentvertical_img').removeClass('invisable');
$('.horizontal_img').first().addClass('display currenthorizontal_img').removeClass('invisable');
$('.diagonal_img').first().addClass('display currentdiagonal_img').removeClass('invisable');
// image slider interaction with user
$('.right').click(function(){
next($(this).data('id'));
});
$('.left').click(function(){
previous($(this).data('id'));
});
});
function next(img_class){
var count;
$('.current'+img_class).animate({left: 0}, 500, function(){
console.log("animated?");
$('.current'+img_class).removeClass('display current'+img_class).addClass('invisable previous'+img_class);
if($('.previous'+img_class).is(':last-child')) {
count = $('.'+img_class).first().data('num');
$('.'+img_class).first().removeClass('invisable').addClass('display current'+img_class);
}
else{
$('.previous'+img_class).next().addClass('display current'+img_class).removeClass('invisable');
count = $('.previous'+img_class).next().data('num');
}
$('.'+img_class+'_slider').text(count+'/4');
$('.previous'+img_class).removeClass('previous'+img_class);
});
}
function previous(img_class){
var count;
$('.current'+img_class).removeClass('display current'+img_class).addClass('invisable previous'+img_class).animate({right: 0});
if ( $('.previous'+img_class).is(':first-child')) {
count = $('.'+img_class).last().data('num');
$('.'+img_class).last().removeClass('invisable').addClass('display current'+img_class);
}
else{
$('.previous'+img_class).prev().addClass('display current'+img_class).removeClass('invisable');
count = $('.previous'+img_class).prev().data('num');
}
$('.'+img_class+'_slider').text(count+'/4');
$('.previous'+img_class).removeClass('previous'+img_class);
}
.main_image_slide_container{
position: fixed;
left: 50px;
right:50px;
width: 500px;
height: 500px;
}
.image_slide_container_all_text_wrapper{
width: 100%;
height: auto;
overflow: overlay;
}
.image_slider_title{
float: left;
}
.image_slider_counter{
float: right;
}
.main_image_slide_container .image_slider_counter{
display: none;
}
.image_slide_container_all_text_wrapper .image_slider_counter{
display: block;
}
.slider_images_wrapper_window{
width: 100%;
height: auto;
position: relative;
}
.image_slider_controls{
position: absolute;
z-index: 10;
width: 50%;
height: 100%;
}
.left{
left: 0;
cursor: default;
}
.left:hover{
cursor: url(../../data/cursor_left.png) 40 30, move;
}
.right{
right: 0;
cursor: default;
}
.right:hover{
cursor: url(../../data/cursor_right.png) 40 30, move;
}
.slider_images_container{
width: 100%;
height: auto;
}
.slider_images_container img{
position: relative;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main_image_slide_container">
<div class="image_slide_container_all_text_wrapper">
<div class="image_slider_title big_text font">Gravient Vertical</div>
<div class="image_slider_counter big_text font vertical_img_slider">1/4</div>
</div>
<div class="slider_images_wrapper_window">
<div class="image_slider_controls left" data-id="vertical_img"></div>
<div class="image_slider_controls right" data-id="vertical_img"></div>
<div class="slider_images_container">
<img class="vertical_img invisable" data-num="1" src="https://www.geeky-gadgets.com/wp-content/uploads/2010/06/google-mac-linux1.jpg">
<img class="vertical_img invisable" data-num="2" src="https://images.techhive.com/images/idge/imported/article/ctw/2012/10/19/samsung_chromebook_338-100391696-orig.jpg">
</div>
</div>
<div class="image_slider_counter big_text font vertical_img_slider">1/4</div> <!--mobile counter -->
</div>
So my current problem is that the images are not animating to the left. And i dont know why.. I am pretty sure my animate syntax is correct. I copy pasted it from the jquery website.
All suggestions and tips are welcome.
If something is not clear please let me know so i can clarify it!

You have missed the invisable css. Here is the working Example.
jsfiddle

Change picture when hovering with mouse

Good morning world! I've got another problem with my project, this time the JavaScript isn't working, I want the picture to change when I'm holding my mouse pointer over it, thanks for your patience!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css" type="text/css" />
<title>Konst UF</title>
<meta charset="utf-8" />
<script type="text/javascript" language="javascript">
if (screen.width <= 699) {
document.location = "mobile.html";
}
document.getElementById("Orderbutton").onclick = function () {
location.href = "http://www.youtube.com/";
};
function billFunction() {
var Bill = getElementById("BillGate");
if (img.src.match("Bill")) {
img.src = "bill-gates.jpg";
} else {
img.src = "Card.jpg";
}
}
</script>
<body>
<p class="madeby">Made by Albin Karlsson and Oliver Jansson</p>
<center>
<ul>
<li>
<p class="Home">Home</p>
</li>
<li>
<p class="Products">Products</p>
</li>
<li>
<p class="About">About Us</p>
</li>
</ul>
</center>
<center><p class="para1">Konst UF</p></center>
<center>
<img
id="BillGate"
src="bill-gates.jpg"
alt="Bill Gates"
class="Billgates"
onmouseover="billFunction()"
/>
</center>
<marquee><h2>Bill GATES</h2></marquee>
<div></div>
<div class="sidepanels1">
<center>
<img class="Konstbild" src="Konst_uf_1.jpg" alt="Konst" />
</center>
<h2>Unknown</h2>
<p>I have no idea haha</p>
</div>
<div class="sidepanels2">
<center>
<img class="Konstbild" src="mikrofiberduk-konst.jpg" alt="Monalisa" />
</center>
<center><h2>Mona Lisa</h2></center>
<center>
<p>Mona Lisa is a painting which was painted by Leonardo Da Vinci</p>
</center>
</div>
<center>
<button
id="Orderbutton"
type="button"
onclick="location.href = 'http://www.youtube.com/';"
>
Order Our Products
</button>
</center>
</body>
</head>
</html>
That was the html code and I hope you could find the problem, if you need the css I got it too:
body {
background-color: grey;
border: grey solid 1px;
}
p.para1 {
margin: auto;
width: 40%;
border: 3px solid black;
padding: 20px;
background-color: black;
color: white;
font-size: 30px;
}
div.sidepanels1 {
border: 5px dotted green;
background-color: grey;
position: absolute;
top: 10px;
right: 10px;
width: 320px;
height: 550px;
text-align: center;
margin-top: 40px;
}
div.sidepanels2 {
border: 5px dotted green;
background-color: grey;
position: absolute;
top: 10px;
left: 10px;
width: 320px;
height: 550px;
margin-top: 40px;
}
p.iframe {
position: absolute;
top: 20px;
text-align: center;
}
div.2nd {
background-color: black;
color: white;
}
img.asus-logo {
width: 1200px;
margin-left: auto;
margin-right: auto;
border: 2px solid black;
}
img.Billgates {
margin-top: 30px;
border: 2px solid black;
margin-bottom: 40px;
}
img.Konstbild {
margin-top: 20px;
width: 300px;
height: 300px;
border: 3px solid green;
margin-right: auto;
margin-left: auto;
}
ul {
list-style-type: none;
}
p.madeby {
position: fixed;
}
Thank you !

Lets take a look at your billFunction, as there are a few problems with this function.
function billFunction() {
var Bill = getElementById('BillGate');
if (img.src.match("Bill")) {
img.src = "bill-gates.jpg";
} else {
img.src = "Card.jpg";
}
}
First of all, getting the element of your desire requires you to use document.getElementById, rather than just getElementById. Changing that should give you the correct element.
Next, you are setting img.src, but variable img is never defined. I assume this should be Bill.src instead. (Side note, I want to advise you to use lowerCamelCase variable names)
Last, your logic for checking which image to use looks wrong. Bill (capital B) can never be in bill-gates. Changing this logic using all lowercase should work.
You will get something along the lines of:
function billFunction() {
var bill = document.getElementById('BillGate');
if (bill.src.match("bill")) {
bill.src = "bill-gates.jpg";
} else {
bill.src = "Card.jpg";
}
}

In your JavaScript change this
function billFunction(img) {
var Bill = document.getElementById('BillGate');
if (img.src.match("Bill")) {
img.src = "bill-gates.jpg";
} else {
img.src = "Card.jpg";
}
}
And in your HTML
<img id="BillGate" src="screenshot_tweet.png" alt="Bill Gates" class="Billgates" onmouseover="billFunction(this)"/>
Also you should comment the onclick code before, it's causing you problems.
A better solution would be to do this only with CSS. It's much easier.
#bill {
background-image: url("bill-gates.jpg");
}
#bill:hover {
background-image: url("Card.jpg");
}

function billFunction() {
var Bill = getElementById('BillGate');
if (img.src.match("Bill")) {
img.src = "bill-gates.jpg";
} else {
img.src = "Card.jpg";
}
}
Corrected One:
$("img").hover(function(){
$(this).attr("src","bill.jpg");
},function(){
$(this).attr("src","card.jpg")
});

JQuery Custom LightBox - Opacity Fade

I am building my own jQuery light box but am running into a small issue. The html page has 6 images on it and when one is clicked an overlay is displayed over the whole page with the image in the center.
The issue I am running into is that the animation that controls the light box displaying is not smooth, it produces a sort of outwards in effect and I would like it to all be effected as one. The animation to fade it out works perfectly though, so I am not sure what I am missing ?
Here is a jsFiddle: http://jsfiddle.net/hqsapk5a/
My HTML:
<div class="page-wrapper">
<div class="grid">
<div class="image-thumb-wrapper">
<img src="img/Casinogames_2MillionBC.jpg" class="image-thumb" />
</div>
<div class="image-thumb-wrapper">
<img src="img/casinogames_7thheaven.jpg" class="image-thumb" />
</div>
<div class="image-thumb-wrapper">
<img src="img/casinogames_10sOrBetter.jpg" class="image-thumb" />
</div>
<div class="image-thumb-wrapper">
<img src="img/casinogames_21BurnBlackjack.jpg" class="image-thumb" />
</div>
<div class="image-thumb-wrapper">
<img src="img/Casinogames_AfterNightFalls.jpg" class="image-thumb" />
</div>
<div class="image-thumb-wrapper">
<img src="img/casinoGames_AllAmerican.jpg" class="image-thumb" />
</div>
</div>
</div>
<div class="light-box">
<div class="light-box-overlay">
</div>
<div class="light-box-wrapper">
<img src="" id="light-box-image" />
</div>
x
</div>
My jQuery:
$(document).ready( function() {
$('.image-thumb').click( function() {
var image = $(this).attr('src');
$('#light-box-image').attr('src', image);
$('.light-box').css('opacity', '0').fadeTo(100, 1, function() {
$('.light-box').css('z-index', '2');
});
});
$('.light-box-close').click( function(e) {
event.preventDefault(e);
$('.light-box').css('opacity', '1').fadeTo(100, 0, function() {
$('.light-box').css('z-index', '0');
}); });
});
My CSS:
.page-wrapper {
height: 100%;
position: absolute;
width: 100%;
z-index: 1;
}
.grid {
width: 600px;
height: 552px;
position: absolute;
bottom: 0;
left: 0;
top: 0;
right: 0;
text-align: center;
margin: auto;
background-color: #DFDFDF;
border: 2px solid #999;
border-radius: 5px;
padding: 20px 0px;
}
.image-thumb-wrapper {
width: 228px;
display: inline-block;
margin: 5px;
}
.image-thumb:hover {
cursor: pointer;
}
.light-box {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 0;
}
.light-box-overlay {
position: absolute;
top: 0;
left: 0;
background-color: #000;
height: 100%;
width: 100%;
opacity: 0.8;
}
img#light-box-image {
z-index: 10;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 2px solid #fff;
background-color: #999;
padding: 25px;
border-radius: 5px;
}
.light-box {
opacity: 0;
}
a.light-box-close {
color: #fff;
font-size: 1.2em;
position: absolute;
text-decoration: none;
right: 10px;
top: 5px;
}
a.light-box-close:hover {
text-decoration: underline;
}

You are changing the z-index of .light-box after the fade in animation completes which is why you see it display strangely as it jumps in front of the other content.
Change this block:
$('.image-thumb').click( function() {
var image = $(this).attr('src');
$('#light-box-image').attr('src', image);
$('.light-box').css('opacity', '0').fadeTo(100, 1, function() {
$('.light-box').css('z-index', '2');
});
});
To this:
$('.image-thumb').click( function() {
var image = $(this).attr('src');
$('#light-box-image').attr('src', image);
$('.light-box').css({'z-index': '2','opacity':'0'}).fadeTo(100, 1);
});
DEMO

Is this what you are looking for?
You just have to make $('.light-box').css('z-index', '2'); before it fades in.
What is happening is that you are putting the z-index: 2 while it fades in that's why it acts weird.

Expanding on previous answers, beyond changing the z-index in css, try this ...
$('.light-box').css('z-index', '2').animate({ opacity: 0 }, 500).fadeTo(100, 1);
This will give you a much smoother animation; the time can be adjusted higher or lower from the 500ms.

Develop Reference

JavaScript is the programming language of the Web.

I would like to code a slider with jquery from scratches - javascript

Why don't you put a javascript function in your href that can just change the class of your article. When you change the class of your article, you can display them or not (like we can see, class=slide or displayed-slide) I don't know if it's what you want to do ? Have you try some things ?

Related

is there a way to make a background scroll down while some content stay in the middle at all time?

Using jQuery / JavaScript to float element to right

jquery animated slide show not animating

Change picture when hovering with mouse

JQuery Custom LightBox - Opacity Fade

Categories

Resources