I've been asked at a job application to make jQuery slider plugin from scratch.
I just graduated as a Computer Science Engineer and to be honest, I've never been taught in college about jQuery. At all.
The little I know about it, is because I've read docs and experimented a little.
But a jQuery slider is very very far away from my current abilities.
I was reading this article on github http://rafbm.github.io/howtomakeaslider/ which is quite illustrative, but still it would be worthless to just copy the code (which by the way I do not understand fully), because what I need/want is to understand how to do one.
On the small free-lance jobs I've done, it's been easy because I just look for plugins, but now I realize that I need to start learning how to make these by myself, and it would be good to start by doing a slider.
What are the things I need? Like I was reading I should create a slider class and create methods for next(), prev() and goTo() sliding-methods. The problem is that for what I hear javascript/jQuery is not a pure OOP language, and it is done differently.
What are the basic things I need to store the images inside an array, know the current position and slide to the next/previous one?
Help would be much appreciated. My HTML and CSS markup is the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Slider Plugin</title>
<style type="text/css">
a{
text-decoration: none;
color: black;
text-align: center;
}
.slider{
width: 300px;
height: 200px;
overflow: hidden;
float: left;
}
.slider > ul{
position: relative;
list-style: none;
margin: 0;
padding: 0;
-webkit-transition: 0.5s left;
-moz-transition: 0.5s left;
-ms-transition: 0.5s left;
-o-transition: 0.5s left;
}
.slider > ul li img{
width: 300px;
height: 200px;
overflow: hidden;
}
.img-thumb-container > ul{
list-style: none;
margin: 0;
padding: 0;
}
.thumb{
width: 50px;
height: 50px;
display: inline-block;
text-align: center;
}
.img-thumb-container{
float: left;
height: 150px;
width: 200px;
}
</style>
<script src="js/jquery.js"></script>
<script src="js/slider.js"></script>
</head>
<body>
<div class="img-thumb-container">
<ul>
<li><button type="button">↑</button></li>
<a href="#"><li>
<img src="images/s1.jpg" class="thumb">
</li></a>
<a href="#"><li>
<img src="images/s2.jpg" class="thumb">
</li></a>
<a href="#"><li>
<img src="images/s3.jpg" class="thumb">
</li></a>
<li><button type="button">↓</button></li>
</ul>
</div>
<div class="slider">
<ul>
<li><img src="images/s1.jpg"></li>
<li><img src="images/s2.jpg"></li>
<li><img src="images/s3.jpg"></li>
</ul>
</div>
</body>
</html>
This is the basic markup I need for what I understand.
I was also asked the same thing in a Job interview and here is the code that I used to passed the interview:
HTML CODE:
<div id="background-slideshow">
<img id="home-image" class="slides" src="img/home-image.jpg" />
<img id="shop-image" class="slides" src="img/shop-image.jpg" />
<img id="dine-image" class="slides" src="img/dine-image.jpg" />
<img id="watch-image" class="slides" src="img/watch-image.jpg" />
</div>
CSS CODE:
div#background-slideshow{
position: relative;
height: 745px;
width: 1440px;
position: absolute;
top: 0px;
right: -10px;
}
img.slides{
position: absolute;
width: 100%;
top: 0px;
right: 0px;
height: 745px;
}
img#home-image{
z-index: -666;
}
img#shop-image{
z-index: -777;
}
img#dine-image{
z-index: -888;
}
img#watch-image{
z-index: -999;
}
JQUERY CODE:
var indexer = 0;
var animateInterval;
function animate(){
if(indexer == 0){
$("#background-slideshow > #watch-image").fadeOut(2000);
$("#background-slideshow > #home-image").fadeIn(2000);
}
else if(indexer == 1){
$("#background-slideshow > #home-image").fadeOut(2000);
$("#background-slideshow > #shop-image").fadeIn(2000);
}
else if(indexer == 2){
$("#background-slideshow > #shop-image").fadeOut(2000);
$("#background-slideshow > #dine-image").fadeIn(2000);
}
else if(indexer == 3){
$("#background-slideshow > #dine-image").fadeOut(2000);
$("#background-slideshow > #watch-image").fadeIn(2000);
}
if(indexer == 3) indexer = 0;
else indexer++;
}
animateInterval = setInterval(animate, 10000);
animate();
Give it a try and good luck, I also never learned it from school too.
You should check out this free course:
30 Days to Learn jQuery
After going through the basics of jQuery in the first chapter, you'll be learning how to build a slider from scratch.
The main video is in the chapter about Effects - The Obligatory Slider (First Stab).
Don't feel bad man. I am a Software Engineer. So far I have 5 years experience as a PHP Developer. 5 years experience as a SEO Engineer, and I am a Senior UI Developer and none of that was taught to me in school either! lol. My best advice to you is:
Find the easiest smallest Jquery Slider
Break it down and re-verse engineer it
Then start adding your own flavor.
I've taught myself a lot this way. Tutorials take a long time and it looks like you need a quick solution.
Do take the tutorial eventually tho.
Good luck
HTML:
<div id="background-slideshow" class="background-slideshow">
<img class="current" src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
<img src="img/4.jpg" />
<img src="img/5.jpg" />
</div>
CSS:
div.background-slideshow img {
display: none;
z-index: 1;
width: 100%;
vertical-align: middle;
}
div.background-slideshow img.current {
display: inline;
z-index: 2;
}
div.background-slideshow img.previous {
z-index: 1;
}
jQuery:
var animateInterval;
function rotateImagesForward(){
var oCurrentPhoto = $("#background-slideshow img.current");
var oNextPhoto = oCurrentPhoto.next();
if (oNextPhoto.length == 0) {
oNextPhoto = $("#background-slideshow img:first");
}
oCurrentPhoto.removeClass("current").addClass("previous");
oNextPhoto.css({opacity:0.0}).addClass("current")
.animate({opacity:1.0}, 500, function(){
oCurrentPhoto.removeClass("previous");
});
}
animateInterval = setInterval(rotateImagesForward, 4000);
Related
I am just learning HTML. Is there a way without using image mapping to split a background image into 50-50%, with each half linking to an external link? I put style=0% and 50% to split the links into the top 50% and bottom 50%, but it doesn't split the image in two.
This is what I have:
<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>
<link href="https://fonts.googleapis.com/css?family=Proxima+Nova" rel="stylesheet">
</head>
<body>
<div class="image">
<center><img src="{% static 'picture.png' %}" alt="image" /></center>
</div>
</body>
</html>
Thanks in advance!
Just put the img as a background-image via css, then position the links on top of a container with that background-image:
.split-link-image {
height: 400px;
background: transparent url(http://placekitten.com/400/400) no-repeat 0 0;
background-size: cover;
width: 400px;
position: relative;
}
.split-link-image a {
position: absolute;
left: 0;
right: 0;
height: 50%;
display: block;
}
.split-link-image a:first-child {
top: 0;
}
.split-link-image a:last-child {
bottom: 0;
}
<div class="split-link-image">
</div>
This is a simple sample:
<div style="position: relative; width:500px; height:500px; background-color: #667799">
<a style="display: inline-block; position: absolute; top:0; left:0; height:50%; width:100%; box-sizing: border-box; border:solid 1px red" href="addr1"></a>
<a style="display: inline-block; position: absolute; top:50%; left:0; height:50%; width:100%; box-sizing: border-box; border:solid 1px orange" href="addr2"></a>
</div>
My wrapper is div and i use background-color for wrapper of links ;you must use background-image:url(imageAdress);
Also you don't need border of a tags.
I have created something that does what you are looking for. It has the following limitations:
You need to know the height of the image you are using in pixels and code the top half to be exactly half that many. When I use % instead, I wind up with the top link being bigger than the bottom. I didn't do much playing around to try and get around that.
The image actually is loaded twice, so if your images are very big, this may be a concern for you.
* {
margin: 0px;
padding: 0px;
}
.top {
height: 200px;
overflow: hidden;
position: absolute;
z-index: 2;
}
.bottom {
position: absolute;
}
<a class="top" href="https://www.google.com"><img src="https://placeholdit.co//i/400x400" /></a>
<a class="bottom" href="https://www.cnn.com"><img src="https://placeholdit.co//i/400x400" /></a>
I am teaching myself about animations using simple rectangles and I have so far managed a bit of progress with this simple project:
html:
<!DOCTYPE html>
<html>
<head>
<title>test slider</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<span class="rect">
<span class="otherrect"></span>
</span>
<p id="button"> click here </p>
</body>
</html>
css
.rect{
float: left;
height: 400px;
width: 550px;
background-color: blue;
transition-property: all;
transition-duration: 2s;
transition-timing-function: ease-in-out;
}
.otherrect {
float: left;
height: 200px;
width: 250px;
background-color: red;
}
.closed {
height: 0;
background-color: white;
}
#button {
float: right;
margin-top: 200px;
margin-right: 500px;
}
js
$(document).ready(function(){
$("#button").click(function(){
if ($( ".rect" ).hasClass( "closed" )){
$(".rect").removeClass("closed");
} else {
$(".rect").addClass("closed");
}
});
});
And it looks like this:
So, what I was aiming at, was that the red rectangle (class: otherrect) should also collapse and fade like its parent rectangle. How can I do this without using javascript and preferably not having to use the display property. Thanks for your time. P
---------------------------------EDIT AFTER RECEIVING ANSWERS-----------------------------------
Thank you all for your answers. These are all good in one way or another, but I guess I sould have mentioned that the red rectangle is going to be a video in the finished project so I need it to be a child of the other element because if the class that collapses it is applied to it directly, it affects the way it looks. Please refer to this other question to see a gif of what I mean:
slideDown() function behaving oddly
Change your span class or add one like this :
<span class="rect">
<span class="otherrect rect"></span>
</span>
Just add overflow:hidden; in the .rect { class and your good. :)
Move the animation settings into a 3rd class ("anim"), give both span elements that class as well and add the "closed" class to any element with the "anim" class in your onclick.
Note: This uses the same amount of JavaScript as your question, which I assume is ok (but technically doesn't meet the "without using javascript" requirement)
(thx to Mark B for the onclick)
EDIT: Added a video. The animation is a little hokey, sorry :(
$(function(){
$("#button").click(function() {
$('.anim').toggleClass('closed')
});
});
.rect{
float: left;
height: 400px;
width: 550px;
background-color: blue;
}
.anim {
transition-property: all;
transition-duration: 2s;
transition-timing-function: ease-in-out;
}
.otherrect {
float: left;
height: 200px;
width: 250px;
background-color: red;
}
.closed {
height: 0;
background-color: white;
}
video {all:inherit}
#button {
float: right;
margin-top: 200px;
margin-right: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<span class="rect anim">
<span class="otherrect anim"><video class="anim" controls>
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video></span>
</span>
<p id="button"> click here </p>
</body>
I am a beginer trying to make a gallery for my site, but I am failing somewhere. What I am trying to do is create a page with menu on the top and then under it boxes of small pictures. When you click on one of them, the picture should be loaded under those boxes. So far I have my menu done, and I have the boxes with the pictures, but the problem is that when you first load the page all of the pictures in the small boxes are loaded under and when you click on any boxes - they disapear and only the selected picture is loaded, as it should be. So my problem is that I can't make the page not load all those pictures when loaded for a first time. I don't mind if it just loads one of them, but not all. I've been trying to fix it for 3 days now, but no luck, so I have no choice, but to ask you for help.
Here's the HTML:
<!DOCTYPE HTML>
<HEAD>
<LINK href="Menu/Menu.css" rel="stylesheet" type="text/css" />
<LINK href="Pictures/Background.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="Style/style.css"/>
<script type="text/javascript" src="JavaScript/Script.js"></script>
</HEAD>
<BODY>
<nav class="nav">
<ul>
<li class="current"><b>MENU</b></li>
<li>BLOG</li>
<li>MUSIC</li>
<li>PHOTOGRAPHY</li>
<li>QUOTES & THOUGHTS</li>
<li>ABOUT ME</li>
</ul>
</nav>
<div id="gallery">
<div id="thumbs">
<img src="Pictures/Photography/image1.jpg" alt="" />
<img src="Pictures/Photography/image2.jpg" alt="" />
<img src="Pictures/Photography/image3.jpg" alt="" />
<img src="Pictures/Photography/image4.jpg" alt="" />
<img src="Pictures/Photography/image5.jpg" alt="" />
</div>
<CENTER>
<div id="bigimages">
<div id="normal1">
<img src="Pictures/Photography/bigimage1.jpg" alt=""/>
</div>
<div id="normal2">
<img src="Pictures/Photography/bigimage2.jpg" alt=""/>
</div>
<div id="normal3">
<img src="Pictures/Photography/bigimage3.jpg" alt=""/>
</div>
<div id="normal4">
<img src="Pictures/Photography/bigimage4.jpg" alt=""/>
</div>
<div id="normal5">
<img src="Pictures/Photography/bigimage5.jpg" alt=""/>
</div>
</div>
</div>
</BODY>
</HTML>
Here's the CSS:
html{
background:url(BACKGROUND.jpg) no-repeat center center;
min-height:100%;
background-size:cover;
}
img {
border: none;
}
#gallery {
margin: 0 auto;
width: 100%;
}
#thumbs {
margin: 10px auto 10px auto;
width: 100%;
}
#bigimages {
width: 100%;
float: left;
}
#thumbs img {
width: 50px;
height: 50px;
}
#bigimages img {
border: 4px solid #555;
margin-top: 5px;
height: 500px;
}
#thumbs a:link, #thumbs a:visited {
width: 50px;
height: 50px;
border: 6px solid #555;
margin: 6px;
float: left;
}
#thumbs a:hover {
border: 6px solid #888;
}
And finally here's my simple JavaScript:
function changeImage(current) {
var imagesNumber = 5;
for (i=1; i<=imagesNumber; i++) {
if (i == current) {
document.getElementById("normal" + current).style.display = "block";
} else {
document.getElementById("normal" + i).style.display = "none";
}
}
}
You could simply hide them via CSS.
#bigimages > div:not(:first-child) { display: none; }
This should display only the first big image.
Could be easier yet if you added a class to the image wrappers. Assuming the class could be big-image-wrap, the css would be:
#bigimages > div.big-image-wrap { display: none; }
#bigimages > div.big-image-wrap:first-child { display: block; }
You can hide those images on load event. Like this:
window.onload = function(){
var thumbs = document.getElementById('thumbs');
var images = thumbs.getElementsByTagName('img');
for (i = 0; i < images.length;i++ ) {
images[i].style.display = "none";
}
}
My navigation has a border-bottom on hover, after you slide down on the site my first nav gits hidden and my 2nd nav gets shown. The navs have the same css, but my border-bottom on the 2nd nav doesn't work. Is this a problem with my css or jquery? Can anyone help me fix this?
HTML:
<header>
<a href="#home" id="logo" class="smoothScroll">
<img src="img/logo.png">
</a>
<nav>
Home
About
Projects
Contact
</nav>
</header>
<div id="header" class="fade">
<a href="#home" id="logo" class="smoothScroll">
<img src="img/logo-white.png">
</a>
<nav>
Home
About
Projects
Contact
</nav>
</div>
Jquery:
$(window).scroll(function() {
if ($(window).scrollTop() > 100 ){
$('header').show();
$('header').removeClass('slideUp');
$('header').addClass('slideDown');
$('#header').addClass('hide');
} else {
$('header').addClass('slideUp');
$('#header').removeClass('hide');
};
});
CSS:
header, #header{
height: 75px;
background: rgba(26, 28, 30, 0.75);
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 50;
}
header{
display: none;
}
#header{
background-color: transparent;
}
nav{
position: fixed;
right: 0;
margin-top: 22.5px;
margin-right: 30px;
z-index: 55;
}
nav a:link, nav a:visited{
position: relative;
display: inline-block;
padding: 0px 10px 0px 10px;
text-decoration: none;
font-size: 1.5em;
color: #fffffa;
}
nav a:after{
content: '';
display: block;
margin: auto;
width: 0px;
background: transparent;
transition: width .5s ease,
background-color .5s ease;
}
nav a:hover:after{
width: 100%;
border-bottom: 2px solid #fffffa !important;
}
Looks like your JQuery is having some syntax issues in the id selectors. Make sure to include #
$(window).scroll(function() {
if ($(window).scrollTop() > 100 ){
$('#header').show();
$('#header').removeClass('slideUp');
$('#header').addClass('slideDown');
$('#header').addClass('hide');
} else {
$('#header').addClass('slideUp');
$('#header').removeClass('hide');
};
});
Edit
Per feedback, I have re-visited this issue and have crafted a fiddle with my interpretation of what I believe will solve this. Continuous feedback will be great in getting this resolved.
$(window).scroll(function() {
if ($(window).scrollTop() > 100 ){
$('header').addClass('hide');
$('#header').removeClass('hide');
} else {
$('#header').addClass('hide');
$('header').removeClass('hide');
};
});
Updated JSFiddle Link
The first problem in your script is HTML code.
You should put the second nav inside the header element like this:
<header>
<nav id="first-nav">
Home
About
Projects
Contact
</nav>
<nav id="second-nav">
Home
About
Projects
Contact
</nav>
</header>
I gave the id of "first-nav" and "second-nav" for easy handling.
Second problem is your jQuery. In your if condition, you tell jQuery to hide the header element when the browser has been scrolled more than 100. That's the problem because nav element need to be used inside header element.
I have edited your jQuery.
$(document).ready(funciton() {
//hide the second nav
$('#second-nav').hide();
//when the scroll event fired
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('#second-nav').show();
$('#first-hav').hide();
}
else {
$('#first-nav').show();
$('#second-hav').hide();
}
});
});
If there is anything that is not clear please let me know, I'll be happy to help.
I know how to answer my question, I'm just posting to see if there's a better way to do what I'm already doing.
Let's say I'm making a website that sells 4 different types of posters. I want the user to see each of the posters in a row. and when they hover over each picture the image will change to show the price, and measurements of the poster.
How I achieved this:
<ul>
<li> image link here using onmouseover and onmouseout for hover over effects </li>
<li> same as above </li>
<li> same as above </li>
<li> same as above </li>
</ul
Then I just styled the list to remove bullets and aligned it horizontally. Now here's my question... I am currently using onmouseover and onmouseout for hover over effects Because you need 2 images in order to achieve this you need a lot of data, especially if you're going to do this for, say, a grid of 25 images for an art portfolio.
Is this a bad way to get a hover over effect? I'm assuming because I'm new at web-development anything I can throw onto a webpage is going to be somewhat crude and not efficient.
You could have another div within the <li> containing the info you wanted. Have this absolutely positioned over the image and then show it on hover using opacity.
Demo
HTML
<ul>
<li><img src="http://placehold.it/350x150" alt="" /><div class="info">Info here</div></li>
<li><img src="http://placehold.it/350x150" alt="" /><div class="info">Info here</div></li>
<li><img src="http://placehold.it/350x150" alt="" /><div class="info">Info here</div></li>
</ul>
CSS
ul,li {
list-style: none;
}
li {
display: inline-block;
position: relative;
z-index: 1;
}
img {
display: block;
}
.info {
opacity: 0;
color: white;
position: absolute;
top: 0;
bottom: 0;
width: 100%;
z-index: 2;
background: red;
.transition(opacity 0.5s ease);
}
li:hover .info {
opacity: 1;
}
I made an example for you :)
You can line .image next to each other with display: inline-block;
Have a fiddle!
HTML
<div class="image">
<img src="http://www.placehold.it/200X200" />
<div class="text">Hello</div>
</div>
CSS
.image {
position: relative;
width: 200px;
height: 200px;
}
.text {
display: none;
}
img {
cursor: pointer;
}
img:hover + .text, .text:hover {
position: absolute;
bottom: 0;
height: 50px;
background: rgba(0, 0, 0, 0.5);
display: block;
padding: 10px;
width: 180px;
cursor: pointer;
}