I am trying to make a slideshow using jquery, I am a rooky in this code and am only familiar with css and html (though I am unsure how to position things in css). I want to create my slideshow and followed this template however I don't know how to change aspects of it, I tried messing around with it however no luck. My images are much bigger than the slide window created, I want to fit the image to the window, since now only a portion of the image is shown, which doesn't look very good.
So I was wondering how I could fit the complete image in that slidewindow (not a portion)
Here is what I have as html:
<div id="slideshow">
<div id="slideshowWindow">
<div class="slide">
<img src="Images/DSC_0419 copy.JPG" />
</div>
<div class="slide">
<img src="Images/DSC_1019 copy.JPG" />
</div>
<div class="slide">
<img src="Images/DSC_2975.JPG" />
</div>
</div>
</div>
My CSS:
#slideshow #slideshowWindow {
width:1000px;
height:700px;
margin:0;
padding:0;
position:relative;
overflow:hidden;
}
#slideshow #slideshowWindow .slide {
margin:0;
padding:0;
width:1000px;
height:700px;
float:left;
position:relative;
}
And this is my Jquery script:
<script type="text/javascript">
$(document).ready(function() {
var currentPosition = 0;
var slideWidth = 1000;
var slides = $('.slide');
var numberOfSlides = slides.length;
var slideShowInterval;
var speed = 3000;
slideShowInterval = setInterval(changePosition, speed);
slides.wrapAll('<div id="slidesHolder"></div>')
slides.css({ 'float' : 'left' });
$('#slidesHolder').css('width', slideWidth * numberOfSlides);
function changePosition() {
if(currentPosition == numberOfSlides - 1) {
currentPosition = 0;
} else {
currentPosition++;
}
moveSlide();
}
function moveSlide() {
$('#slidesHolder')
.animate({'marginLeft' : slideWidth*(-currentPosition)});
}
});
</script>
Try ...
#slideshow #slideshowWindow .slide img {
height: 100%;
width: 100%;
}
As it is, the CSS above will stretch the images ... if they are sized proportionately, this works fine ...
However, if you might be dealing with some images that are portrait and some landscape, try setting only height or only width; then, add adjustments to center when needed.
Related
I have logo1 in the header changing to logo2 when user scrolls down. However, I don't want the logos to instantly switch but rather the first logo gradually fade out as the second logo fades in. I have added .fadeIn(slow) and .fadeOut(slow) in various places in my js but it's had no effect. Hoping I can get some help with this.
I've updated my question with more code. I've had 2 answers but can't get either to work for me and no more responses. Hoping an edited question with more detail will get a bit more attention.
<header>
<div id="nav" class="navbar">
<div id="nav_left">
HOME
SERVICES
PORTFOLIO
</div>
<a href="index.html" id="logo" class="Claire_logo">
<img src="images/logo_6_small.png" alt="logo2" id="logo_Claire" class="logo_main"
style="display:none" />
<img src="images/logo_bluebird_90_cc.png" alt="logo1" id="logo_Claire_blue" class="logo" />
</a>
<div id="nav_right">
BLOG
ABOUT
GET IN TOUCH
</div>
</div>
</header>
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 0) {
$(".navbar").addClass("navbar-scroll");
$(".logo").show();
} else {
$(".navbar").removeClass("navbar-scroll");
$(".logo").hide();
}
if (scroll > 120) {
// $(".navbar").addClass("nav-color");
$(".logo_main").show();
$(".logo").hide();
} else {
// $(".navbar").removeClass("nav-color");
$(".logo_main").hide();
$(".logo").show();
}
});
});
You can do that using jQuery replaceWith
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 0) {
$('#oldlogo').fadeOut(500, function() {
$('#oldlogo').replaceWith('<div id="newlogo"><img src="newlogo" alt="newlogo"/></div>').fadeIn(500);
});
}
});
});
body {
height: 200vh
}
header {
height: 50px;
position: fixed;
top: 0;
width: 100%;
background: white;
}
#nav {
display: flex;
justify-content: center;
flex-direction: row;
height: 180px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div id="nav" class="navbar">
<div id="oldlogo"> <img src="oldlogooldlogo" alt="oldlogo" /></div>
</div>
</header>
I edited my answer. I missed the error in your code. I commented below in codes. You can use both fadeIn & fadeOut or show & hide methods as well. But for fadeing effect using fadeIn & fadeOut maybe looks better than show & hide
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 0 && scroll <= 120) { // I missed this logic mistake for the first time.
$(".navbar").addClass("navbar-scroll");
$(".logo").fadeIn(300); // or show(300)
} else {
$(".navbar").removeClass("navbar-scroll");
$(".logo").fadeOut(0); // or hide()
}
if (scroll > 120) {
// $(".navbar").addClass("nav-color");
$(".logo_main").fadeIn(300);
$(".logo").fadeOut(0);
} else {
// $(".navbar").removeClass("nav-color");
$(".logo_main").fadeOut(0);
$(".logo").fadeIn(300);
}
});
});
I'm trying to make image slider with my own without using plugins.
1st question : How to make the animation horizontally
2nd question : Whatever the size of the image, it must cover the height and width of its container, but keeping the proportionalities original image. The image can be rendered partially. How to make this?
3rd question : About the code of the slide, if anyone finds any improvement to make it lighter and more elegant, would be welcome.
$(function(){
setInterval(function(){
var displayed = $(".img-header.displayed");
displayed.animate({opacity : 0}, 500, function() {
displayed.css("display","none");
displayed.addClass("not-displayed").removeClass("displayed");
if(displayed.next(".img-header.not-displayed").length == 0){
$(".img-header:first").css("display","inline-block").css("opacity","1");
$(".img-header:first").addClass("displayed").removeClass("not-displayed");
$(".img-header:first").animate({opacity : 1}, 500);
}
else{
displayed.next(".img-header.not-displayed").css("display","inline-block").css("opacity","1");
displayed.next(".img-header.not-displayed").addClass("displayed").removeClass("not-displayed");
displayed.next(".img-header.not-displayed").animate({opacity : 1}, 500);
}
});
}, 4000);
});
#slider-container{height: 200px; width: 200px;}
#slider-container img.img-header{ width: 100%; height: auto;}
.displayed{display: inline-block;}
.not-displayed{display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider-container">
<img class="img-header displayed" src="http://i.stack.imgur.com/AIHnl.png" />
<img class="img-header not-displayed" src="http://i.stack.imgur.com/XQrms.png" />
</div>
I think you might be looking for something like this.
The slider here is position:relative; with top:100px; you can set as per your requirement. Still i suggest you to keep it positioned relative.
Slider has width:700px and height:500px;, you can change as per your requirement, it will be fine for whatever aspect ratio of image you have or all images with different aspect ratio.
There is an array for images to load which are serially numbered in one location, so you may give little more understanding into that. I have made a comment for that in JS file
Also you could change slider speed and delay as per your requirements.
When you hover over image it will pause the slider, which resumes after you leave image.
Snippet :
$(document).ready(function(){
var noPannel = document.getElementsByClassName("pannel").length;
var i;
var imgArr = [ ];
var pannelWidth = $(".slider_holder").width();
var totalWidth = noPannel*pannelWidth;
for (i=1;i<=noPannel;i++)
{
imgArr[i] = "http://www.picget.net/background/" + i + ".jpg"; //if you have somewhere on other path
//imgArr[i] = " " + i + ".jpg"; //use this if you have image in same folder/path.
}
for(i=1;i<=noPannel;i++)
{
$(".pannel:nth-child("+i+")").css("background","url("+imgArr[i]+")");
}
function jsslider()
{
var curScroll = $(".slider").scrollLeft();
var endScroll = totalWidth - (pannelWidth*2);
if(curScroll<=endScroll)
{
$(".slider").animate({scrollLeft: '+=' + pannelWidth +'px'},900,"swing");// Replace 900 for speed
}
else
{
$(".slider").animate({scrollLeft: '0px'},500,"swing"); // Replace 500 for speed to go bck to first
}
}
var interval = setInterval(jsslider, 3000); // Replace 3000 for delay between each slide.
$(".pannel").hover(function () {
clearInterval(interval);
}, function () {
interval = setInterval(jsslider, 3000); // Replace 3000 for delay between each slide.
});
}); // document.ready ENDS
html, body, *
{
margin:0px;
width:100%;
height:100%;
}
.slider_holder
{
margin-left:auto;
margin-right:auto;
display:block;
position:relative;
top:100px;
width:1024px;
height:768px;
background:#eee;
overflow:hidden;
}
.slider
{
width:auto;
height:100%;
width:100%;
white-space: nowrap;
overflow:hidden;
}
.pannel
{
margin:0px;
display:inline-block;
width:100%;
height:calc(100% - 1px);
/*border:1px solid red;*/
background-size:cover !important;
background-repeat:no-repeat;
background-position:50% 50% !important;
position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body onload="sliderFunc()">
<div class="slider_holder">
<div class="slider">
<span class="pannel"> </span>
<span class="pannel"> </span>
<span class="pannel"> </span>
<span class="pannel"> </span>
<span class="pannel"> </span>
</div>
</div>
</body>
I want my code to act like a slideshow. If I click the next button it will hide the previous image and show the other image. It will show the first image, but it doesn't' go through the loop . I also have an error that say
"Uncaught TypeError: Cannot read property 'style' of undefined".
<!DOCTYPE html>
<html lang ="en">
<head>
<title> VIS</title>
<meta charset="utf-8"/>
</head>
<body>
<div style="position: relative; visibility: hidden;">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"
alt="Pumpkins" id="Pum"/>
</div>
<div style="position: relative; visibility: hidden;">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"
alt="Pumpkins" id="Straw"/>
</div>
<div style="position: relative; visibility: hidden;">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"
alt="Pumpkins" id="Ras"/>
</div>
<button onclick="removeVisibility()">Next</button>
</body>
<script type="text/javascript" >
function removeVisibility(){
var imgs=document.getElementsByTagName('img');//get all the images
for(var i=0;i< imgs.length;i++){
imgs[i].style.visibility= 'visible'; //hide them
imgs[i-1].style.visibility= 'hidden';
}
}
</script>
</html>
jsBin demo
You have your DIV (!!!) elements set to visibility: hidden; but you're trying desperately to change the visibility to IMG.
Now that you know your main issue, you should better go with display none/block if you use position:relative (or rather use position: absolute for your overlaying elements...) Any way,
don't use inline CSS styles! That's why we invented stylesheets!
don't use inline JS! Use addEventListener to attach any desired event to your elements. Don't mix your application logic with (view) teplating.
var imagesHolder = document.getElementById("imagesHolder");
var images = imagesHolder.getElementsByTagName('img');
var imagesTot = images.length;
var button = document.getElementById("nextImage");
var counter = 0; // We'll use it to get the image index
function showNext(){
counter = ++counter % imagesTot; // Increment and loop counter
for(var i=0; i<imagesTot; i++){
if(i != counter) images[i].style.display = "none"; // Hide all but `counter` one
}
// Finally show the 'counter' one!
images[counter].style.display = "block";
}
button.addEventListener("click", showNext);
#imagesHolder img+img{ /* SHOW ALL BUT FIRST!*/
display:none;
}
<div id="imagesHolder">
<img src="http://lorempixel.com/400/200/sports/1" alt="1"/>
<img src="http://lorempixel.com/400/200/sports/2" alt="2"/>
<img src="http://lorempixel.com/400/200/sports/3" alt="3"/>
</div>
<button id="nextImage">Next</button>
...but wait!
Welcome to the world of responsive web design!
so let's add some animations and responsiveness:
var imagesHolder = document.getElementById("imagesHolder"),
images = imagesHolder.getElementsByTagName('div'),
n = images.length,
c = 0;
function showNext(){
c = ++c % n;
for(var i=0; i<n; i++) images[i].classList[i!=c?"add":"remove"]("fadeaway");
}
document.getElementById("nextImage").addEventListener("click", showNext);
showNext(); // Initial kick
*{margin:0;}
html, body{height:100%;}
#imagesHolder{
position:relative;
overflow:hidden;
width:100%;
height:90vh;
}
#imagesHolder div{
position: absolute;
width:inherit;
height:inherit;
background:50% / cover;
transition: 1s 0s ease;
/* Default when visible: */
opacity: 1;
transform: scale(1);
}
#imagesHolder div.fadeaway{
opacity:0;
transform: scale(1.2);
}
<div id="imagesHolder">
<div style="background-image:url(http://lorempixel.com/400/200/sports/1);"></div>
<div style="background-image:url(http://lorempixel.com/400/200/sports/2);"></div>
<div style="background-image:url(http://lorempixel.com/400/200/sports/3);"></div>
</div>
<button id="nextImage">Next</button>
I have created a simple slider
html
<div id="sldvid1" class="slider" >
<img picnum="1" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail1.png" />
<img picnum="2" style="display:none;" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail7.png" />
<img picnum="3" style="display:none;" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail14.png" />
</div>
<hr>
<div id="sldvid2" class="slider" >
<img picnum="1" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail1.png" />
<img picnum="2" style="display:none;" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail7.png" />
<img picnum="3" style="display:none;" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail14.png" />
</div>
$
var timer1 = setInterval(runSlide, 1000);
var curnum = 1;
function runSlide()
{
curnum = $(".slider img:visible").attr('picnum');
//$("#sldvid1 img[picnum=" + curnum + "]").fadeOut();
if(curnum == 3){
curnum = 1;
}
else
{
curnum++;
}
// $(".slider img").hide();
//$(".slider img[picnum=" + curnum + "]").show();
$(".slider img").hide();
$(".slider img[picnum=" + curnum + "]").show();
//console.log(curnum);
}
CSS
.slider{
height:50px;
}
Demo
http://jsfiddle.net/mparvez1986/vf401e2y/
Everything is working fine, I just need some one to improve effect so that it could effect like moving from left to right, I tried with some effect, but it seems it required some css manipulation as well
Thanks
I modified your code to create a carousel where images are slid in and out. I accomplished this by animating the margin-left CSS property with jQuery. I specified a size for the .slider class and used overflow: hidden; to ensure the sliding images were not displayed outside of it.
If you wish, you can change the transition effect by changing the CSS property that is animated and ensuring that the elements are in the correct position for the animation before it begins.
You can also change the speed of the animation by changing the magic number 1000 that I've left in the calls to animate. This number is specified in milliseconds.
By the way, I should point out that while custom HTML attributes are allowed in HTML5 they should begin with data-; they are called data attributes.
jsfiddle
HTML
<div id="sldvid1" class="slider">
<img class="active" data-slide-to="0" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail1.png"/>
<img data-slide-to="1" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail7.png"/>
<img data-slide-to="2" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail14.png"/>
</div>
<hr>
<div id="sldvid2" class="slider">
<img class="active" data-slide-to="0" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail1.png"/>
<img data-slide-to="1" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail7.png"/>
<img data-slide-to="2" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail14.png"/>
</div>
CSS
.slider {
position: relative;
width: 50px;
height: 50px;
overflow: hidden;
}
.slider img {
display: none;
width: 100%;
position: absolute;
}
.slider .active {
display: inline-block;
}
.slider .sliding {
display: inline-block;
}
JavaScript
var timer = setInterval(runSlide, 2000);
function runSlide() {
// Slide each slider on the page.
$(".slider").each(function (index, element) {
// Get the elements involved in the slide.
var numChildren = $(this).children().length;
var activeChild = $(this).children(".active");
var activeSlideTo = $(activeChild).attr("data-slide-to");
var nextSlideTo = (parseInt(activeSlideTo) + 1) % numChildren;
var nextChild = $(this).find("*[data-slide-to=" + nextSlideTo + "]");
// Prepare for slide.
$(activeChild).css("margin-left", "0%");
$(nextChild).css("margin-left", "-100%");
$(activeChild).addClass("sliding");
$(nextChild).addClass("sliding");
$(activeChild).removeClass("active");
// Slide using CSS margin-left.
$(activeChild).animate({"margin-left": "100%"}, 1000, function () {
$(this).removeClass("sliding");
});
$(nextChild).animate({"margin-left": "0%"}, 1000, function () {
$(this).addClass("active");
$(this).removeClass("sliding");
});
});
}
Ended with following
setInterval(function() {
$('#sldvid1 > img:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#sldvid1');
}, 3000);
HTML
<div id="slider">
<img src="http://www.alleywatch.com/wp-content/uploads/2013/04/brand.jpeg" id="image1" />
<img src="http://www.ereleases.com/prfuel/wp-content/uploads/2012/07/brand_stamp.jpg" id="image2" />
<img src="http://www.submitedge.com/blog/wp-content/uploads/2013/04/Creating-a-Positive-Brand-Image.jpg" id="image3" />
</div>
<div id="slider-back"></div>
CSS
#slider {
height:296px;
overflow:hidden;
width:822px;
position:absolute;
left:50%;
margin-left:-411px;
top:87px;
z-index:20;
}
#slider-back {
position:absolute;
left:50%;
margin-left:-411px;
height:296px;
z-index:29;
top:87px;
width:822px;
background: url("/test/backimage.png") no-repeat scroll 0px 0px transparent;
jquery
$(document).ready(function () {
var imgs = $('#slider > a > img');
var z = 1;
var previousImageId = "";
$(imgs[0]).show();
function loop(ev) {
imgs.delay(5000).slideUp('slow').eq(z).slideDown(500, function () {
check = z != imgs.length - 1 ? z++ : z = 0;
loop();
});
}
loop();
});
I tried in fiddle
http://jsfiddle.net/ee9R6/
I want to output like
http://www.lulupu.com/ (Right side our manufactures modlue vertical slider)
I would go a slightly different route
http://jsfiddle.net/ee9R6/4/
Instead of sliding all of the elements up, which ends up queuing the slide down, you can slide up the current img and slide down the next image at the same time.
function loop(ev) {
$(imgs[z]).slideUp("slow");
check = z != imgs.length - 1 ? z++ : z = 0;
$(imgs[z]).slideDown("slow");
setTimeout(loop, 5000);
}