I need to create a slider in which the images moves continuous.
I have used flexslider but it moves from first page to next, instead i need it to be continuous.
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide", // set animation to slide
animationLoop: true,
itemWidth: 120,
itemMargin: 20,
minItems: 1,
maxItems: 5,
smoothheight: true,
directionNav: true,
});
});
</script>
<style type="text/css">
.flexslider{
background:none;
border:none;
box-shadow:none;
margin:10px;
}
</style>
<div class="flexslider">
<ul class="slides">
<li><img alt="" src="images/1.jpg" /></li>
<li><img alt="" src="images/2.jpg" /></li>
<li><img alt="" src="images/3.jpg" /></li>
<li><img alt="" src="images/4.jpg" /></li>
<li><img alt="" src="images/5.jpg" /></li>
<li><img alt="" src="images/6jpg" /></li>
<li><img alt="" src="images/7.jpg" /></li>
<li><img alt="" src="images/8.jpg" /></li>
<li><img alt="" src="images/9.jpg" /></li>
</ul>
</div>
If you want a slider that will continuously move your images in a loop, I recommend downloading the jQuery Anything Slider from here: http://css-tricks.com/anythingslider-jquery-plugin/
After you download it, use the following code:
jQuery:
<script src="_js/jquery-1.7.2.min.js"></script>
<script src="_js/jquery.anythingslider.min.js"></script>
<script>
$(document).ready(function() {
$('#slider').anythingSlider({
buildArrows : true,
autoPlay : true, // THIS MUST BE SET TO TRUE FOR YOUR SLIDER TO LOOP
buildStartStop : false,
resizeContents: false
});
}); // end ready
</script>
HTML:
<div id="slider">
<div class="slidePanel"><a href ='#'>
// YOU CAN ADJUST THE WIDTH AND HEIGHT OF YOUR IMAGES
<p>
<img src="INSERT IMAGE SOURCE 1" alt="SomePic1" width="120" height="150" class="imgLeft"> INSERT INFORMATION ABOUT IMAGE HERE
</p>
</a></div>
<div class="slidePanel"><a href ='#'>
<p>
<img src="INSERT IMAGE SOURCE 2" alt="SomePic2" width="120" height="150" class="imgLeft"> INSERT INFORMATION ABOUT IMAGE HERE
</p>
</a></div>
</div>
You can insert the number of images that you need but I usually stick with 4 or 5.
Don't forget to download the CSS File from the link above. You will need 'anythingslider.css'!!!
Hope this helps!
Related
I have a set width/height div with an unordered list with 10 li tags, an img tag per li.
I have the images scrolling through vertically using Javascript Scrollbox.
When you land on the page I need to randomize which logo appears in the box first instead of the first li always showing first (and scrolling can continue as normal in order)
Is this possible? If so, can you point me in the right direction?
Here is my code:
HTML inside head:
<script type="text/javascript" src="js/jquery.scrollbox.min.js"></script>
HTML inside body:
<div id="buslogos">
<p>Some of our participating businesses:</p>
<div id="buslogoscroll" class="scroll-img">
<ul>
<li><img src="images/part-bus-logos/abshair-sm.gif" alt="Absolute Hair Inc"></li>
<li><img src="images/part-bus-logos/arena-sm.gif" alt="Arena Tavern"></li>
<li><img src="images/part-bus-logos/davebusters-sm.jpg" alt="Dave & Buster's"></li>
<li><img src="images/part-bus-logos/dunkin-sm.gif" alt="Dunkin' Donuts"></li>
<li><img src="images/part-bus-logos/lazercity-sm.jpg" alt="Lazer City"></li>
<li><img src="images/part-bus-logos/marcos-sm.gif" alt="Marco's Pizza"></li>
<li><img src="images/part-bus-logos/mtimes-sm.gif" alt="Medieval Times"></li>
<li><img src="images/part-bus-logos/stars-sm.gif" alt="Stars and Strikes"></li>
<li><img src="images/part-bus-logos/tomchee-sm.gif" alt="Tom + Chee"></li>
<li><img src="images/part-bus-logos/totalhealth-sm.jpg" alt="Total Health Spa"></li>
</ul>
</div>
</div>
<script>
$(function () {
$('#buslogoscroll').scrollbox({
linear: true,
step: 1,
delay: 0,
speed: 40
});
});
</script>
The jquery.scrollbox.min.js was downloaded from here:
https://github.com/wmh/jquery-scrollbox
Thanks in advance!
Check this out, Let me know if you didn't understand anything.
Live demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript" src="https://rawgit.com/wmh/jquery-scrollbox/master/jquery.scrollbox.min.js"></script>
<script>
$(function () {
var arrSrc=["http://placehold.it/350x50",
"http://placehold.it/350x60",
"http://placehold.it/350x70",
"http://placehold.it/350x80",
"http://placehold.it/350x90"
];
$('.first img').attr('src',arrSrc[Math.floor((Math.random() * 5) + 0)]);
$('#buslogoscroll').scrollbox({
linear: true,
step: 1,
delay: 0,
speed: 40
});
});
</script>
</head>
<body>
<div id="buslogos">
<p>Some of our participating businesses:</p>
<div id="buslogoscroll" class="scroll-img">
<ul>
<li class="first"><img src=""></li>
<li><img src="http://placehold.it/350x60"></li>
<li><img src="http://placehold.it/350x70"></li>
<li><img src="http://placehold.it/350x80"></li>
<li><img src="http://placehold.it/350x90"></li>
</ul>
</div>
</div>
</body>
</html>
I am trying to implement jQuery hoverZoom in my project. It works fine in a normal html jquery app but when i try to run it in angular app using ng-repeat it breaks.
My guess is due to DOM & jQuery. I think I have to create a directive or something.
The working code is:
HTML
<link rel="stylesheet" href="assets/css/zoom_style.css?v=2">
<link rel="stylesheet" href="assets/css/jquery.hoverZoom.css">
<ul class="thumb">
<li><img alt="Images can have captions" src="../api/uploads/bjaim/1_thumb.jpg" /></li>
<li class="noborder"><img alt="zoomContainer can be styled with CSS" src="../api/uploads/bjaim/2_thumb.jpg" /></li>
<li class="redshadow"><img src="../api/uploads/bjaim/3_thumb.jpg" alt="Images are scaled and centered to the viewport" /></li>
<li><img src="../api/uploads/bjaim/bigimage_thumb.jpg" alt="Images are preloaded and then the animation starts"/></li>
<li><img src="../api/uploads/bjaim/5_thumb.jpg" /></li>
<li><img src="../api/uploads/bjaim/6_thumb.jpg" /></li>
<li><img src="../api/uploads/bjaim/7_thumb.jpg" /></li>
</ul>
Javascript
<script src="assets/js/modernizr-1.6.min.js"></script>
<script src="assets/js/jquery.hoverZoom.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.thumb img').hoverZoom({speedView:600, speedRemove:400, showCaption:true, speedCaption:600, debug:true, hoverIntent: true, loadingIndicatorPos: 'center'});
});
</script>
But when I chnage the HTML to:
<ul class="thumb">
<li ng-repeat="image in images">
<a ng-href="../api/uploads/{{job}}/{{image}}"><img alt="Images can have captions" ng-src="../api/uploads/{{job}}/{{image}}" /></a>
</li>
</ul>
It displays the images but hover effect is gone.
Please guide.
Not: Tried to replicate the code on jsFiddle
Yes you need to create a directive,
.directive('hoverZoom', function() {
return {
link: function(scope, element){
$(element).hoverZoom({speedView:600, speedRemove:400, showCaption:true, speedCaption:600, debug:true, hoverIntent: true, loadingIndicatorPos: 'center'});
}
};
});
And in HTML,
<a hover-zoom ng-href="../api/uploads/{{job}}/{{image}}"><img alt="Images can have captions" ng-src="../api/uploads/{{job}}/{{image}}" /></a>
Depending on your requirement you can try to improve this directive to pass the options for hoverZoom as well. https://docs.angularjs.org/guide/directive
I needs to use Jquery simplyScroll plugging few times on my page like few scrollers Here i am posting the code please help. I tried to do that my self with this code but i am unable to complete it.
<script type="text/javascript" src="./jQuery simplyScroll - Logicbox_files/jquery.min.js">
</script>
<!--<script type="text/javascript" src="/js/common.js"></script>-->
<script type="text/javascript" src="./jQuery simplyScroll - Logicbox_files/jquery.simplyscroll-1.0.4.min.js"></script>
<link rel="stylesheet" href="./jQuery simplyScroll - Logicbox_files/jquery.simplyscroll-1.0.4.css" media="all" type="text/css">
<script type="text/javascript">
(function($) {
$(function() {
$("#scroller").simplyScroll({
autoMode: 'loop'
});
});
})(jQuery);
</script>
</head>
<div class="simply-scroll simply-scroll-container"><div class="simply-scroll-back"></div><div class="simply-scroll-forward"></div><div class="simply-scroll-clip">
<ul id="scroller" class="simply-scroll-list" style="width: 2895px; ">
<li><img src="./jQuery simplyScroll - Logicbox_files/20080608_9N3H5GYL_tb.jpg" width="290" height="200" alt="Firehouse"></li>
<li><img src="./jQuery simplyScroll - Logicbox_files/20080513_4D3SD1BQ_tb.jpg" width="290" height="200" alt="Chloe nightclub"></li>
<li><img src="./jQuery simplyScroll - Logicbox_files/20080513_VPJWVQRW_tb.jpg" width="290" height="200" alt="Firehouse bar"></li>
<li><img src="./jQuery simplyScroll - Logicbox_files/20080514_B1YJ08B6_tb.jpg" width="290" height="200" alt="Firehouse chloe club fishtank"></li>
<li><img src="./jQuery simplyScroll - Logicbox_files/20080514_JYW68XPT_tb.jpg" width="290" height="200" alt="Firehouse restaurant"></li>
<li><img src="./jQuery simplyScroll - Logicbox_files/20080608_38CG51J2_tb.jpg" width="290" height="200" alt="Firehouse"></li>
<li><img src="./jQuery simplyScroll - Logicbox_files/20080608_9N3H5GYL_tb.jpg" width="290" height="200" alt="Firehouse"></li><li><img src="./jQuery simplyScroll - Logicbox_files/20080513_4D3SD1BQ_tb.jpg" width="290" height="200" alt="Chloe nightclub"></li></ul></div></div>
<div class="simply-scroll simply-scroll-container"><div class="simply-scroll-back"></div><div class="simply-scroll-forward"></div><div class="simply-scroll-clip">
<ul id="scroller" class="simply-scroll-list" style="width: 2895px; ">
<li><img src="./jQuery simplyScroll - Logicbox_files/20080608_9N3H5GYL_tb.jpg" width="290" height="200" alt="Firehouse"></li>
<li><img src="./jQuery simplyScroll - Logicbox_files/20080513_4D3SD1BQ_tb.jpg" width="290" height="200" alt="Chloe nightclub"></li>
<li><img src="./jQuery simplyScroll - Logicbox_files/20080513_VPJWVQRW_tb.jpg" width="290" height="200" alt="Firehouse bar"></li>
<li><img src="./jQuery simplyScroll - Logicbox_files/20080514_B1YJ08B6_tb.jpg" width="290" height="200" alt="Firehouse chloe club fishtank"></li>
<li><img src="./jQuery simplyScroll - Logicbox_files/20080514_JYW68XPT_tb.jpg" width="290" height="200" alt="Firehouse restaurant"></li>
<li><img src="./jQuery simplyScroll - Logicbox_files/20080608_38CG51J2_tb.jpg" width="290" height="200" alt="Firehouse"></li>
<li><img src="./jQuery simplyScroll - Logicbox_files/20080608_9N3H5GYL_tb.jpg" width="290" height="200" alt="Firehouse"></li><li><img src="./jQuery simplyScroll - Logicbox_files/20080513_4D3SD1BQ_tb.jpg" width="290" height="200" alt="Chloe nightclub"></li></ul></div></div>
Thanks
You can not use one and the same id multiple times. and before it does not work
something lik this
(function($) {
$(function() {
$("#scroller").simplyScroll({
autoMode: 'loop'
});
$("#scroller1").simplyScroll({
autoMode: 'loop'
});
$("#scroller2").simplyScroll({
autoMode: 'loop'
});
});
})(jQuery);
You can use class instead of id for multiple scroller. I hope it will help you.
(function($) {
$(function() {
$(".scroller").simplyScroll({
autoMode: 'loop'
});
});
})(jQuery);
Don't use id and use class some thing like this
<ul class="scroller simply-scroll-list" style="width: 2895px; ">....</ul>
<ul class="scroller simply-scroll-list" style="width: 2895px; ">....</ul>
i have a slideshow that is using the cycle plugin and for some reason i cant select or target the correct elements see the code below:
HTML
<div id="slider">
<div id="slideshow">
<ul>
<li><img src="images/slider-one.png" height="380" width="960" alt="AquaPure Traveller" /></li>
<li><img src="images/slider-one.png" height="380" width="960" alt="AquaPure Traveller" /></li>
<li><img src="images/slider-one.png" height="380" width="960" alt="AquaPure Traveller" /></li>
<li><img src="images/slider-one.png" height="380" width="960" alt="AquaPure Traveller" /></li>
<li><img src="images/slider-one.png" height="380" width="960" alt="AquaPure Traveller" /></li>
</ul>
</div> <!-- End Slideshow -->
<div id="prev">PREVIOUS</div>
<div id="next">NEXT</div>
</div> <!-- End Slider -->
and the javascript
$(document).ready(function() { // Document Ready
$('#slideshow ul li').cycle({
'fx': 'scrollHorz',
'timeout': 8000,
'prev': '#prev',
'next': '#next',
'pause': true
});
}); // End Document Ready
what am i missing is it something simple or is it an issue with the plugin?
Thanks
You are using the jQuery Cycle Plugin right?
As far as I know you have to select the container / parent of the items. Try this:
$(document).ready(function() {
$('#slideshow ul').cycle({
'fx': 'scrollHorz',
'timeout': 8000,
'prev': '#prev',
'next': '#next',
'pause': true
});
});
Change the JavaScript so that the cycle is applied to the ul element not the individual li:-
$('#slideshow ul').cycle();
I am creating a simple image gallery, and I would like to create multiple sets of images. On the click of a link all of the images in the link's given set will change.
Here is my current code:
<ul>
<li><img src="image01.jpg" width="500" height="450"></li>
<li><img src="image02.jpg" width="200" height="450"></li>
<li><img src="image03.jpg" width="530" height="450"></li>
<li><img src="image04.jpg" width="500" height="450"></li>
<li><img src="image05.jpg" width="178" height="340"></li>
<li><img src="image06.jpg" width="400" height="450"></li>
<li><img src="image07.jpg" width="300" height="220"></li>
<li><img src="image08.jpg" width="400" height="450"></li>
<li><img src="image09.jpg" width="500" height="450"></li>
<li><img src="image10.jpg" width="400" height="450"></li>
<li><img src="image11.jpg" width="300" height="450"></li>
<li><img src="image12.jpg" width="300" height="450"></li>
<li><img src="image13.jpg" width="178" height="340"></li>
<li><img src="image14.jpg" width="500" height="450"></li>
<li><img src="image15.jpg" width="200" height="220"></li>
<li><img src="image16.jpg" width="100" height="450"></li>
</ul>
For example, on the click of link1 the sources would all be changed to setA01.jpg, setA02.jpg, and on the click of link2 the souces would become setB01.jpg, and so on. Any help would be over-gratefully appreciated.
If your numbers will always be "01, 02, 03, etc" you could use a function like the following:
function setBase(baseval) {
var images = document.getElementById("mylist").getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
images[i].src = baseval + ((i<9)?0+i:i) + ".jpg";
}
}
Using that against this list:
Set A
<ul id="mylist">
<li><img src="image01.jpg" /></li>
<li><img src="image02.jpg" /></li>
</ul>
Would create the following (assuming 'setA' were passed in as an argument):
<ul id="mylist">
<li><img src="setA01.jpg" /></li>
<li><img src="setA02.jpg" /></li>
</ul>