I'm working on this website:
http://www.lakeofthewoodsadventures.com/local/index.html
I got the homepage image slider working, but it won't render the last two pages of the slider, no matter which files they are.
My question is: why is it doing that? Is it because it considers what is "off-page" not needed? The images are the same size, 1280x480 (scaled to 340 height).
Here are my settings:
Script in Head:
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: true,
useCSS: true,
itemWidth: 900,
});
});
</script>
Markup:
<div class="slide-container row">
<div class="flexslider slideEdit">
<ul class="slides">
<li>
<img src="images/slide6.JPG" alt="Slide 6">
</li>
<li>
<img src="images/slide7.JPG" alt="Slide 7">
</li>
<li>
<img src="images/slide8.JPG" alt="Slide 8">
</li>
<li>
<img src="images/slide9.jpg" alt="Slide 9">
</li>
<li>
<img src="images/slide10.jpg" alt="Slide 10">
</li>
</ul>
</div>
</div>
No, it is because those images do not exist (404 File Not Found):
http://www.lakeofthewoodsadventures.com/local/images/slide9.jpg
http://www.lakeofthewoodsadventures.com/local/images/slide10.jpg
Looks like it is a capitalization issue:
http://www.lakeofthewoodsadventures.com/local/images/slide9.JPG
http://www.lakeofthewoodsadventures.com/local/images/slide10.JPG
Related
Question
Is there a way to hide the currently-active slide from a slider in Slick Slider?
Motivation
I am building a Featured Posts slider. One post will be featured prominently, while the remaining posts will feature as previews in a column on the side. A total of 5 posts will be shown at a time.
This is pretty easy to do with Slick Slider (1.9.0) but it has one issue: the "remaining posts" section should only show the remaining posts and not the current post. So when a post is selected it should scroll out of view in the slider, and the featured post slider will change to use the slide at the same index.
Description of the Action
Basically, the initial state should be:
Featured Slider: Slide 1 is visible, all others are hidden.
Remaining Slider: Slide 1 is hidden, Slides 2-5 are visible.
If I click on slide 2 from the Remaining Slider:
Featured Slider: Slide 2 is visible, all others are hidden.
Remaining Slider: Slide 2 slides out of view, Slide 3 becomes the new top post followed by (in order) 4, 5, 1.
JS Fiddle
Here's the JS Fiddle I'm working on: https://jsfiddle.net/zak_rhm/Lks61ah7/71/
HTML
<div id="Large_Slider">
<!-- Should only show one slide at a time. -->
<article class="slide">
<h2>Slide 1</h2>
</article>
<article class="slide">
<h2>Slide 2</h2>
</article>
<article class="slide">
<h2>Slide 3</h2>
</article>
<article class="slide">
<h2>Slide 4</h2>
</article>
<article class="slide">
<h2>Slide 5</h2>
</article>
</div>
<ul id="Small_Slider">
<!-- Should only show four slides at a time, never show the slide in #Large_Slider -->
<li id="slide">Slide 1</li>
<li id="slide">Slide 2</li>
<li id="slide">Slide 3</li>
<li id="slide">Slide 4</li>
<li id="slide">Slide 5</li>
</ul>
JavaScript (jQuery)
var $slider_lg = $("#Large_Slider")
var $slider_sm = $("#Small_Slider")
$slider_lg.slick({
slidesToShow: 1,
slidesToScroll: 1,
asNavFor: '#Small_Slider',
dots: true,
fade: true
});
$slider_sm.slick({
arrows: false,
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '#Large_Slider',
focusOnSelect: true,
vertical: true,
verticalSwiping: true
});
Just add a style in .slick-current class
#Small_Slider .slick-current {
opacity: 1;
visibility: hidden;
width:0px !important;
height: 0px !important;
}
This should do what you're looking for: https://jsfiddle.net/kmsv5xn8/
I changed your HTML so that the "Small_Slider" section begins at #2 and each slide has a data-sm-slide attribute:
<ul id="Small_Slider" class="slick-slider">
<li id="sm-slide-2" class="slide slide--sm" data-sm-slide="2">
<img src="https://via.placeholder.com/640x480.png/0f9/333?text=Slide+2" alt="Slide 2" height="48" width="64" class="slide--sm__img" />
<span class="slide--sm__title">Slide 2</span>
</li>
<li id="sm-slide-3" class="slide slide--sm" data-sm-slide="3">
<img src="https://via.placeholder.com/640x480.png/f09/fff?text=Slide+3" alt="Slide 3" height="48" width="64" class="slide--sm__img" />
<span class="slide--sm__title">Slide 3</span>
</li>
<li id="sm-slide-4" class="slide slide--sm" data-sm-slide="4">
<img src="https://via.placeholder.com/640x480.png/f90/333?text=Slide+4" alt="Slide 4" height="48" width="64" class="slide--sm__img" />
<span class="slide--sm__title">Slide 4</span>
</li>
<li id="sm-slide-5" class="slide slide--sm" data-sm-slide="5">
<img src="https://via.placeholder.com/640x480.png/90f/fff?text=Slide+5" alt="Slide 5" height="48" width="64" class="slide--sm__img" />
<span class="slide--sm__title">Slide 5</span>
</li>
<li id="sm-slide-1" class="slide slide--sm" data-sm-slide="1">
<img src="https://via.placeholder.com/640x480.png/09f/333?text=Slide+1" alt="Slide 1" height="48" width="64" class="slide--sm__img" />
<span class="slide--sm__title">Slide 1</span>
</li>
</ul>
That takes care of the initial offset, however to show the correct slides I disabled the focusOnSelect: true property and added an event listener instead:
$slider_sm.on("click", "li.slide", function() {
var slideNo = $(this).attr("data-sm-slide") - 1;
$slider_lg.slick("slickGoTo", slideNo);
})
The corresponding slide index is taken from the data-* attribute and updates the main carousel; because that uses the asNavFor property, Slick takes care of the rest.
The jquery image slider works when i put it outside ng-view div. But doesn't work when i move it inside directives or when it is injected into ng-view
index.html
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="src/js/lightslider.js"></script>
<script>
$(document).ready(function() {
$("#content-slider").lightSlider({
loop:true,
keyPress:true
});
$('#image-gallery').lightSlider({
gallery:true,
item:1,
thumbItem:9,
slideMargin: 0,
speed:500,
auto:true,
loop:true,
onSliderLoad: function() {
$('#image-gallery').removeClass('cS-hidden');
}
});
});
</script>
<body ng-controller="mainController">
<div class="wrapper">
<div id="main">
<!--code works when moved here-->
<div ng-view></div>
Html code for the slider, It doesnt work inside a directive.
slider.html
<div class="demo">
<div class="item">
<div class="clearfix" style="max-width:474px;">
<ul id="image-gallery" class="gallery list-unstyled cS-hidden">
<li data-thumb="img/thumb/cS-1.jpg">
<img src="img/cS-1.jpg" />
</li>
<li data-thumb="img/thumb/cS-2.jpg">
<img src="img/cS-2.jpg" />
</li>
<li data-thumb="img/thumb/cS-3.jpg">
<img src="img/cS-3.jpg" />
</li>
</ul>
</div>
</div>
</div>
HTML slider code:
<ul class="slides">
<li>
<div class="large-image">
<img alt="#" src="http://sale.coupsoft.com/uploads/698778/13_2.jpg">
</div>
</li>
<li>
<div class="large-image">
<img alt="#" src="http://sale.coupsoft.com/uploads/698778/5_2.jpg">
</div>
</li>
</ul>
HTML carousel code:
<div class="flexslider flexslider-thumb" id="carousel">
<ul class="previews-list slides">
<li><img alt="#" src="http://sale.coupsoft.com/uploads/698778/13_2.jpg"></li>
<li><img alt="#" src="http://sale.coupsoft.com/uploads/698778/5_2.jpg"></li>
</ul>
</div>
jQuery code:
$("#carousel").flexslider({
animation:"slide",
controlNav: false,
animationLoop: false,
slideshow: false,
asNavFor: '#slider'
})
$("#slider").flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
})
OUTPUT:
all images are displaying as vertically aligned. I want to display it as the slider. How can I do it? and thanks in advance.
$("#slider").flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
})
This snippet is not targeting any of your html elements. You've got slides and carousel but slider is not in your markup. I'd start there. If that's not it, please post a JSFiddle or Codepen for us...
$("#carousel").flexslider({
animation:"slide",
controlNav: false,
animationLoop: false,
slideshow: false
})
$("#slider").flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type='text/javascript' src="http://flexslider.woothemes.com/js/jquery.flexslider.js"></script>
<script type='text/javascript' src="http://flexslider.woothemes.com/js/jquery.easing.js"></script>
<script type='text/javascript' src="http://flexslider.woothemes.com/js/jquery.mousewheel.js"></script>
<script type='text/javascript' src="http://lab.mattvarone.com/projects/jquery/totop/js/jquery.ui.totop.js"></script>
<ul class="slides">
<li>
<div class="large-image">
<img alt="#" src="http://sale.coupsoft.com/uploads/698778/13_2.jpg">
</div>
</li>
<li>
<div class="large-image">
<img alt="#" src="http://sale.coupsoft.com/uploads/698778/5_2.jpg">
</div>
</li>
</ul>
<div class="flexslider flexslider-thumb" id="carousel">
<ul class="previews-list slides">
<li><img alt="#" src="http://sale.coupsoft.com/uploads/698778/13_2.jpg"></li>
<li><img alt="#" src="http://sale.coupsoft.com/uploads/698778/5_2.jpg"></li>
</ul>
</div>
I currently have two different javascripts running on my page. One for a slideshow and another for a timed image swap. I can only get one or the other to work, depending on which one of the scripts is lower in the code. I read many tutorials and it seemed adding <body onload="func1();func2()"> would fix the problem but it did not.
I have made two sample pages
Where image swap works but slide show does not show up
http://pancakeparadise.com/shirtswap.html
Where slide show shows up and works but images do not swap out
http://pancakeparadise.com/shirtswap1.html
Thank you for any help you can provide!
<!DOCTYPE html>
<head>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Amatic+SC:700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
<script type="text/javascript">
$(document).ready(
function func2(){
$('ul#portfolio').innerfade({
speed: 'slow',
timeout: 4000,
type: 'sequence',
containerheight: '500px'
});
}
);
</script>
</head>
<body onload="func1();func2()">
<div id="wholebody">
<section id="slideshow">
<aside id="slides">
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt ="" >
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt="">
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt="">
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt="">
</aside>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.slides.min.js"></script>
<script>
$(function func1() {
$('#slides').slidesjs({
width: 980,
height: 500,
play: {
active: true,
auto: true,
interval: 4500,
swap: true,
pauseOnHover: true
}
});
});
</script>
</section>
<aside id="frontbubbles">
<aside id="shirtswapfront">
<p id="fronttextheader">Shirt Swap!</p>
<ul id="portfolio">
<li>
<a href="">
<img src="img/1.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/2.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/3.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/4.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/5.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/6.jpg" alt="" />
</a>
</li>
</ul>
</aside>
</aside>
</div>
You have two jQuery files included in the same HTML page which is causing the conflict. Try this code.
<!DOCTYPE html>
<head>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Amatic+SC:700' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.slides.min.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('ul#portfolio').innerfade({
speed: 'slow',
timeout: 4000,
type: 'sequence',
containerheight: '500px'
});
$('#slides').slidesjs({
width: 980,
height: 500,
play: {
active: true,
auto: true,
interval: 4500,
swap: true,
pauseOnHover: true
}
});
});
</script>
</head>
<body>
<div id="wholebody">
<section id="slideshow">
<aside id="slides">
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt ="" >
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt="">
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt="">
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt="">
</aside>
</section>
<aside id="frontbubbles">
<aside id="shirtswapfront">
<p id="fronttextheader">Shirt Swap!</p>
<ul id="portfolio">
<li>
<a href="">
<img src="img/1.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/2.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/3.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/4.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/5.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/6.jpg" alt="" />
</a>
</li>
</ul>
</aside>
</aside>
</div>
I have cleaned up your code a little bit... dont use body onload both functions and then define one of the functions later in the code... well here it goes, this worked for me...
$(document).ready(function func2(){
$('ul#portfolio').innerfade({
speed: 'slow',
timeout: 4000,
type: 'sequence',
containerheight: '500px'
});
});
$(document).ready(function func1() {
$('#slides').slidesjs({
width: 980,
height: 500,
play: {
active: true,
auto: true,
interval: 4500,
swap: true,
pauseOnHover: true
}
});
});
<div id="wholebody">
<section id="slideshow">
<aside id="slides">
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt ="" />
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt=""/>
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt=""/>
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt=""/>
</aside>
</section>
<aside id="frontbubbles">
<aside id="shirtswapfront">
<p id="fronttextheader">Shirt Swap!</p>
<ul id="portfolio">
<li>
<a href="">
<img src="http://pancakeparadise.com/img/1.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="http://pancakeparadise.com/img/2.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="http://pancakeparadise.com/img/3.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="http://pancakeparadise.com/img/4.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="http://pancakeparadise.com/img/5.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="http://pancakeparadise.com/img/6.jpg" alt="" />
</a>
</li>
</ul>
</aside>
</aside>
</div>
now add your css and js files in the head like usual... it should work. here is a fiddle link for it as well http://jsfiddle.net/z5yeLq2k/
If you want both of these functions to execute, the easiest way possible is to not put them in separate functions, or to not put them in functions at all. Here is what I mean...
$(document).ready(
$('ul#portfolio').innerfade({
speed: 'slow',
timeout: 4000,
type: 'sequence',
containerheight: '500px'
});
$('#slides').slidesjs({
width: 980,
height: 500,
play: {
active: true,
auto: true,
interval: 4500,
swap: true,
pauseOnHover: true
}
});
);
Outside of functions, as soon as the document.ready executes (once the page is done loading), both of those pieces of code will be executed sequentially.
EDIT: Also, as was said in another answer, you are including jquery twice...don't do that.
Orbit doesn't show. What i have done wrong?
Note: I didn't change any documentation structure. Version 5
Code in head:
<script src="js/vendor/modernizr.js"></script>
Code in body:
<div class="row">
<div class="orbit-container">
<ul data-orbit class="example-orbit orbit-slides-container">
<li> <img src="http://placehold.it/1000x300/A92B48/fff" alt="slide 1" />
<div class="orbit-caption"> Caption One. </div>
</li>
<li class="active"> <img src="http://placehold.it/1000x300/EE964D/fff" alt="slide 2" />
<div class="orbit-caption"> Caption Two. </div>
</li>
<li> <img src="http://placehold.it/1000x300/FDC43D/fff" alt="slide 3" />
<div class="orbit-caption"> Caption Three. </div>
</li>
</ul>
<!-- Navigation Arrows --> Prev <span></span> Next <span></span> <!-- Slide Numbers -->
<div class="orbit-slide-number"> <span>1</span> of <span>3</span> </div>
<!-- Timer and Play/Pause Button -->
<div class="orbit-timer"> <span></span>
<div class="orbit-progress"></div>
</div>
</div>
<!-- Bullets -->
<ol class="orbit-bullets">
<li data-orbit-slide-number="1"></li>
<li data-orbit-slide-number="2" class="active"></li>
<li data-orbit-slide-number="3"></li>
</ol>
Code before closing body:
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation({
orbit: {
animation: 'slide',
timer_speed: 1000,
pause_on_hover: true,
animation_speed: 500,
navigation_arrows: true,
bullets: false
}
});
</script>
Please help! can some body provide me with simple working orbit code
-----------------------Update-----------
i tried this this simple code.. nothing happened
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row">
<ul class="example-orbit" data-orbit>
<li> <img src="../assets/img/examples/satelite-orbit.jpg" alt="slide 1" />
<div class="orbit-caption"> Caption One. </div>
</li>
<li> <img src="../assets/img/examples/andromeda-orbit.jpg" alt="slide 2" />
<div class="orbit-caption"> Caption Two. </div>
</li>
<li> <img src="../assets/img/examples/launch-orbit.jpg" alt="slide 3" />
<div class="orbit-caption"> Caption Three. </div>
</li>
</ul>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation({
orbit: {
animation: 'slide',
timer_speed: 1000,
pause_on_hover: true,
animation_speed: 500,
navigation_arrows: true,
bullets: false
}
});
</script>
</body>
</html>
I was having the same issue. Found the answer here: http://foundation.zurb.com/forum/posts/1635-orbit-inside-of-reveal-modal...
In your CSS file, specify a minimum height for the class "orbit-container".
.orbit-container {
min-height: 375px;
height:100%;
}
Tweak to suit your needs, in regards to height of the element, default Background color (Should an image not load) or whatever you want really.
EDIT 1: You can also wrap your in a div tag and set your desired height there, the orbit slider should inherit it's height from there.
I have my slider set up as follows. I'm using the data-options tag to customize the slider with the options on this page under the "Advanced" header. Using the syntax from the "Real World Example" header right underneath it:
<ul data-orbit data-options="pause_on_hover:false;
slide_number: false;
timer: false;
variable_height:true;">
<li><img src="http://placesheen.com/725/500" alt="sheen1"></li>
<li><img src="http://placesheen.com/725/900" alt="sheen2"></li>
<li><img src="http://placesheen.com/725/500" alt="sheen3"></li>
</ul>
If you just want to use all of the default settings, you can just get rid of data-options and set it up as follows:
<ul data-orbit>
<li><img src="http://placesheen.com/725/500" alt="sheen1"></li>
<li><img src="http://placesheen.com/725/900" alt="sheen2"></li>
<li><img src="http://placesheen.com/725/500" alt="sheen3"></li>
</ul>
Hope this helps!