JS IMAGE SCROLLER

Wednesday 15 February 2017

JS IMAGE SCROLLER

<!DOCTYPE HTML>

<head>

<title>any list scroller demo - jQuery scrolling plugin by musings.it to scroll any kind of list with any content - musings.it web design and development</title>

$(document).ready(function()

{

$("#lista1").als({

visible_items: 4,

scrolling_items: 2,

orientation: "horizontal",

circular: "yes",

autoscroll: "no",

interval: 5000,

direction: "right"

});

$("#lista2").als({

visible_items: 2,

scrolling_items: 1,

orientation: "vertical",

circular: "no",

autoscroll: "no"

});

//logo hover

$("#logo_img").hover(function()

{

$(this).attr("src","images/als_logo_hover212x110.png");

},function()

{

$(this).attr("src","images/als_logo212x110.png");

});

//logo click

$("#logo_img").click(function()

{

location.href = "http://www.jqueryscript.net/";

});

$("a[href^='http://']").attr("target","_blank");

$("a[href^='http://als']").attr("target","_self");

});

</script>

</head>

<body>

<h1>Any List Scroller <span>demo</span></h1>

<h2>Do you want to scroll a list? ALS it!</h2>

</div>

</header>

<p>This list is composed by classical list elements <ul> e <li></p>

<li class="als-item"><img src="http://www.jqueryscript.net/demo/ALS-Content-Scrolling-Plugin/images/als-images/calculator.png" alt="calculator" title="calculator" />calculator</li>

<li class="als-item"><img src="http://www.jqueryscript.net/demo/ALS-Content-Scrolling-Plugin/images/als-images/light_bulb.png" alt="light bulb" title="light bulb" />light bulb</li>

<li class="als-item"><img src="http://www.jqueryscript.net/demo/ALS-Content-Scrolling-Plugin/images/als-images/chess.png" alt="chess" title="chess" />chess</li>

<li class="als-item"><img src="http://www.jqueryscript.net/demo/ALS-Content-Scrolling-Plugin/images/als-images/clock.png" alt="alarm clock" title="alarm clock" />alarm clock</li>

<li class="als-item"><img src="http://www.jqueryscript.net/demo/ALS-Content-Scrolling-Plugin/images/als-images/cut.png" alt="scissors" title="scissors" />scissors</li>

<li class="als-item"><img src="http://www.jqueryscript.net/demo/ALS-Content-Scrolling-Plugin/images/als-images/heart.png" alt="heart" title="heart" />heart</li>

<li class="als-item"><img src="http://www.jqueryscript.net/demo/ALS-Content-Scrolling-Plugin/images/als-images/mobile_phone.png" alt="mobile phone" title="mobile phone" />mobile phone</li>

<li class="als-item"><img src="http://www.jqueryscript.net/demo/ALS-Content-Scrolling-Plugin/images/als-images/camera.png" alt="camera" title="camera" />camera</li>

<li class="als-item"><img src="http://www.jqueryscript.net/demo/ALS-Content-Scrolling-Plugin/images/als-images/music_note.png" alt="music note" title="music note" />music note</li>

<li class="als-item"><img src="http://www.jqueryscript.net/demo/ALS-Content-Scrolling-Plugin/images/als-images/protection.png" alt="umbrella" title="umbrella" />umbrella</li>

<li class="als-item"><img src="http://www.jqueryscript.net/demo/ALS-Content-Scrolling-Plugin/images/als-images/television.png" alt="television" title="television" />television</li>

</ul>

</div>

</div>

<p>This list is composed by generic <div> elements</p>

<div class="als-item"><img src="http://www.jqueryscript.net/demo/ALS-Content-Scrolling-Plugin/images/als-images/calculator.png" alt="calculator" title="calculator" />calculator</div>

<div class="als-item"><img src="http://www.jqueryscript.net/demo/ALS-Content-Scrolling-Plugin/images/als-images/light_bulb.png" alt="light bulb" title="light bulb" />light bulb</div>

<div class="als-item"><img src="http://www.jqueryscript.net/demo/ALS-Content-Scrolling-Plugin/images/als-images/chess.png" alt="chess" title="chess" />chess</div>

<div class="als-item"><img src="http://www.jqueryscript.net/demo/ALS-Content-Scrolling-Plugin/images/als-images/clock.png" alt="alarm clock" title="alarm clock" />alarm clock</div>

<div class="als-item"><img src="http://www.jqueryscript.net/demo/ALS-Content-Scrolling-Plugin/images/als-images/cut.png" alt="scissors" title="scissors" />scissors</div>

<div class="als-item"><img src="http://www.jqueryscript.net/demo/ALS-Content-Scrolling-Plugin/images/als-images/heart.png" alt="heart" title="heart" />heart</div>

<div class="als-item"><img src="http://www.jqueryscript.net/demo/ALS-Content-Scrolling-Plugin/images/als-images/mobile_phone.png" alt="mobile phone" title="mobile phone" />mobile phone</div>

<div class="als-item"><img src="http://www.jqueryscript.net/demo/ALS-Content-Scrolling-Plugin/images/als-images/camera.png" alt="camera" title="camera" />camera</div>

<div class="als-item"><img src="http://www.jqueryscript.net/demo/ALS-Content-Scrolling-Plugin/images/als-images/music_note.png" alt="music note" title="music note" />music note</div>

<div class="als-item"><img src="http://www.jqueryscript.net/demo/ALS-Content-Scrolling-Plugin/images/als-images/protection.png" alt="umbrella" title="umbrella" />umbrella</div>

<div class="als-item"><img src="http://www.jqueryscript.net/demo/ALS-Content-Scrolling-Plugin/images/als-images/television.png" alt="television" title="television" />television</div>

</div>

</div>

</section>

<p>© 2012 Made with &hearts; by <a href="http://www.musings.it/en">musings.it</a> - VAT IT 03611740162 - <a class="__cf_email__" href="/cdn-cgi/l/email-protection" data-cfemail="264b53554f484155664b53554f484155084f52">[email protected]</a><script data-cfhash='f9e31' type="text/javascript">/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-cfhash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-cfemail')){for(e='',r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2)e+='%'+('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */</script> - <a href="http://www.twitter.com/musingspuntoit">@musingspuntoit</a> <span>---- don't try to sell <a href="http://als.musings.it">als</a>, it's not nice!</span></p>

<p class="ultimo">Thanks to: wonderful icons by <a href="http://dryicons.com">DryIcons</a> -- background texture by <a href="http://subtlepatterns.com/">Subtle Patterns</a></p>

</div>

</footer>

</body>

</html>

---------------------------------------------------------------------------------------------------------------

SIMPLE CSS SLIDER WITHOUT JS
https://codepen.io/IsoLennox/pen/cJfBj
VIEW FRAME SOUCE:
https://s.codepen.io/boomerang/iFrameKey-03ad9dad-73ce-34fd-0c25-face76f55cb3/index.html
-----------------------------------------------------------------------------------------------------------------

<html>

<style>

.container {

background:#000;

width:500px;

margin: 0 auto;

padding: 10px 10px 0 10px;

}

.slideshow_wrapper {

width:500px;

height:280px;

overflow: hidden;

}

.slideshow {

width:1500px;

height:280px;

margin: 0 0 0 -1000px;

position: relative;

-webkit-animation-name: slide_animation;

-webkit-animation-duration:10s;

-webkit-animation-iteration-count:infinite;

-webkit-animation-direction:alternate;

-webkit-animation-play-state: running;

}

.slide {

width:500px;

height: 270px;

position:relative;

float:left;

overflow:hidden;

}

.slideshow img{

width:500px; height:270px;

}@-webkit-keyframes slide_animation {

0% {left:0px;}

10% {left:500px;}

20% {left:500px;}

30% {left:500px;}

40% {left:500px;}

50% {left:500px;}

60% {left:500px;}

70% {left:1000px;}

80% {left:1000px;}

90% {left:1000px;}

100% {left:1000px;}

}

</style>

<body>

</div>

</div>

</div>

</div></div></div></div>

</body>

</html>

-----------------------------------------------------------------------------------------------------------------

AUTO IMAGE THUMBNAIL SLIDER
http://www.menucool.com/jquery-slider
-----------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>

<html>

<head>

<title>AUTO IMAGE THUMBNAIL SLIDER </title>

.c1 {float:left;width:108px;padding:4px;}

.c2 {float:left;width:200px;padding:4px;}

.c1 input, .c2 input {width:14px;color:#666;font-size:12px;}

.rig-img {

padding-top:50%;

background-image:url(/Content/img/thumbnail-slider-demos.jpg);

}

</style>

var thumbnailSliderOptions =

{

sliderId: "thumbnail-slider",

orientation: "horizontal",

thumbWidth: "120px",

thumbHeight: "auto",

showMode: "1",

autoAdvance: true,

selectable: true,

slideInterval: 3000,

transitionSpeed: 1500,

shuffle: false,

startSlideIndex: 0, //0-based

pauseOnHover: true,

initSliderByCallingInitFunc: false,

rightGap: 0,

keyboardNav: true,

mousewheelNav: false,

before: null,

license: "b2e98"

};

var mcThumbnailSlider = new ThumbnailSlider(thumbnailSliderOptions);

</script>

</head>

<body>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

</body>

</html>

------------------------------------------------------------------------------------------------------------------
Bootstrap Thumbnail Slider
http://www.bootply.com/d1xV5UTiqv
https://www.google.co.uk/search?q=responsive+carousel+slider+bootstrap&rlz=1C1CHBD_en-GBGB722GB722&espv=2&biw=1280&bih=670&source=lnms&tbm=isch&sa=X&ved=0ahUKEwif-ImYw5_SAhUlCMAKHTIODLIQ_AUICCgB#imgrc=1gtrlw_Nid86jM:

-----------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>

<html lang="en">

<!-- https://www.google.co.uk/search?q=responsive+carousel+slider+bootstrap&rlz=1C1CHBD_en-GBGB722GB722&espv=2&biw=1280&bih=670&source=lnms&tbm=isch&sa=X&ved=0ahUKEwif-ImYw5_SAhUlCMAKHTIODLIQ_AUICCgB#imgrc=1gtrlw_Nid86jM:

-->

<head>

<title>Bootply snippet - Bootstrap Bootstrap Thumbnail Slider</title>

<!--[if lt IE 9]>

<![endif]-->

<!-- CSS code from Bootply.com editor -->

.carousel {

margin-bottom: 0;

padding: 0 40px 30px 40px;

}

.carousel-control {

left: -12px;

}

.carousel-control.right {

right: -12px;

}

.carousel-indicators {

right: 50%;

top: auto;

bottom: 0px;

margin-right: -19px;

}

.carousel-indicators li {

background: #c0c0c0;

}

.carousel-indicators .active {

background: #333333;

}

</style>

</head>

<!-- HTML code from Bootply.com editor -->

<body >

<h1>Bootstrap Thumbnail Slider</h1>

</ol>

<!-- Carousel items -->

<div class="carousel-inner">

<div class="item active">

<div class="row-fluid">

<div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>

</div><!--/row-fluid-->

</div>

<div class="item">

<div class="row-fluid">

<div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>

</div><!--/row-fluid-->

</div>

<div class="item">

<div class="row-fluid">

<div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>

</div><!--/row-fluid-->

</div>

</div>

<a class="left carousel-control" href="#myCarousel" data-slide="prev"></a>

</div><!--/myCarousel-->

</div>

</div>

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- JavaScript jQuery code from Bootply.com editor -->

$(document).ready(function() {

$('#myCarousel').carousel({

interval: 10000

})

});

</script>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-40413119-1', 'bootply.com');

ga('send', 'pageview');

</script>

</body>

</html>

-----------------------------------------------------------------------------------------------------------------

http://source.zuimoban.com/prestashop/nav.html?themes/default/js/product.js.source.html
http://demos.flesler.com/jquery/serialScroll/
------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jQuery.serialScroll</title>

</head>

<body>

<h1>jQuery.serialScroll <strong>by Ariel Flesler</strong></h1>

<h3>Links</h3>

<ul>

<li><a target="_blank" href="https://github.com/flesler/jquery.serialScroll">Github</a></li>

<li><a target="_blank" href="https://github.com/flesler/jquery.serialScroll/releases">Downloads</a></li>

<li><a target="_blank" href="http://flesler.blogspot.com/2008/02/jqueryserialscroll.html">Documentation</a></li>

<li><a href="../scrollTo/">jQuery.scrollTo's Demo</a></li>

</ul>

</div>

<ul>

<li><a href="#">Section 1</a></li>

<li><a href="#">Section 3</a></li>

<li><a href="#">Section 5</a></li>

</ul>

</div>

<div id="sections">

<ul>

<li>

<h2>Section 1</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et turpis sed metus fermentum pellentesque. Vestibulum auctor neque ac nunc elementum malesuada. Praesent non est sed libero vestibulum consectetuer. Sed vehicula. Vivamus quis tellus sit amet erat ultrices luctus. Fusce a ligula. Fusce viverra libero vitae velit. Aenean bibendum nibh non lorem. Suspendisse quis velit. Integer sit amet lacus. Curabitur tristique. Morbi eu lectus. Vestibulum tristique aliquam quam. Sed neque.</p>

<p>Nulla facilisi. Quisque eleifend libero. Sed eros. Morbi vel leo. Morbi varius tincidunt sem. Nam sodales volutpat velit. Suspendisse potenti. Duis vehicula pede non nisi. Proin elit pede, ultrices non, ultrices quis, vulputate sit amet, magna. Praesent sodales pellentesque justo. Donec blandit, augue id convallis congue, magna libero hendrerit erat, id blandit est lorem a tellus. Vestibulum tincidunt lectus quis metus. Pellentesque placerat lacus in urna.</p>

</li>

<li>

<h2>Section 2</h2>

</li>

<li class="fallen">

<h2>Section 3</h2>

</li>

<li>

<h2>Section 4</h2>

<p>Nullam et sem eget massa pellentesque dapibus. Nulla sollicitudin enim quis odio. Quisque ipsum lorem, volutpat eget, condimentum ac, posuere id, risus. Suspendisse tortor metus, aliquet in, varius nec, hendrerit a, libero. Suspendisse iaculis. Fusce commodo urna ut enim. Fusce tempus eros. Phasellus sodales tellus id dolor. Integer sollicitudin, turpis ac interdum condimentum, enim enim tempus metus, sed imperdiet massa diam nec elit. Mauris ante augue, hendrerit non, commodo ac, porttitor eu, turpis.</p>

<p>In fermentum nibh ut diam. Mauris sagittis, tellus ac molestie fermentum, arcu orci pharetra mi, id vehicula massa leo vel pede. Nullam semper tincidunt lorem. Proin arcu libero, auctor sed, interdum egestas, ullamcorper et, lacus. Donec id lectus eget diam accumsan ullamcorper. Donec at urna et lacus condimentum pellentesque. Phasellus dapibus hendrerit massa. Sed sed ipsum. Quisque venenatis. Donec vel turpis.</p>

</li>

<li>

<h2>Section 5</h2>

</li>

</ul>

</div>

<img class="next" src="http://demos.flesler.com/jquery/serialScroll/img/next.gif" alt="next" width="42" height="53" />

</div>

<p class="separator message">

This plugin can be used for navigation purposes. You decide how many to show at a time with CSS.<br />

The items don't need to be aligned, you can spread them as much as you want, it will always find them :)<br />

Check jQuery.ScrollTo's demo if you want to create the perfect animation. You can use its settings too!

</p>

<div id="screen2">

<div id="buttons">

<a class="prev" href="#">Previous</a>

<a class="next" href="#">Next</a>

<br class="clear" />

</div>

<div id="slideshow">

<ul>

<li><img width="225" height="300" src="http://lorempixel.com/225/300/abstract" /></li>

<li><img width="225" height="300" src="http://lorempixel.com/225/300/animals" /></li>

<li><img width="225" height="300" src="http://lorempixel.com/225/300/business" /></li>

<li><img width="225" height="300" src="http://lorempixel.com/225/300/cats" /></li>

<li><img width="225" height="300" src="http://lorempixel.com/225/300/city" /></li>

<li><img width="225" height="300" src="http://lorempixel.com/225/300/food" /></li>

<li><img width="225" height="300" src="http://lorempixel.com/225/300/nightlife" /></li>

<li><img width="225" height="300" src="http://lorempixel.com/225/300/fashion" /></li>

<li><img width="225" height="300" src="http://lorempixel.com/225/300/people" /></li>

<li><img width="225" height="300" src="http://lorempixel.com/225/300/nature" /></li>

<li><img width="225" height="300" src="http://lorempixel.com/225/300/sports" /></li>

<li><img width="225" height="300" src="http://lorempixel.com/225/300/technics" /></li>

<li><img width="225" height="300" src="http://lorempixel.com/225/300/transport" /></li>

</ul>

</div>

<p class="separator message">

You can also build slideshows with it. In this case, I centered the photos and made them clickable.<br />

I set this one to cycle, try going over the last photo. I'm using a special easing equation.<br />

You are allowed to interrupt the animation by clicking again. You can't do that in the first one.

</p>

<div id="ticker-container">

<button id="add-news">Append 2 Items</button>

<button id="shuffle-news">Shuffle</button>

<div id="news-ticker">

<div class="first">

<h4>News 1</h4>

<p>Nullam a leo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas mollis vestibulum purus, rutrum sed.</p>

</div>

<div>

<h4>News 2</h4>

<p>Phasellus nunc ipsum, faucibus non, iaculis ac, sagittis malesuada, augue. Aliquam sollicitudin. Cras iaculis lorem sit amet.</p>

</div>

<div>

<h4>News 3</h4>

<p>Morbi condimentum. Sed id nunc eu arcu aliquet bibendum. Maecenas vestibulum eros fringilla tortor. Nunc purus.</p>

</div>

<div>

<h4>News 4</h4>

<p>Sed condimentum. Duis orci. Ut odio leo, dapibus pretium, rhoncus a, sodales eu, nibh. Vivamus consectetuer vestibulum.</p>

</div>

<div>

<h4>News 5</h4>

<p>Pellentesque varius ligula et enim. Nulla ut purus vel magna ullamcorper vestibulum. Aliquam at enim at ligula bibendum.</p>

</div>

<div>

<h4>News 6</h4>

<p>Suspendisse id quam at lectus placerat dignissim. Praesent nulla urna, rutrum sed. Maecenas vitae libero ac elit.</p>

</div>

<div>

<h4>News 7</h4>

<p>Etiam aliquet. Nulla consectetuer, nibh ut gravida consectetuer, nisl enim vestibulum nibh. Suspendisse potenti.</p>

</div>

<div>

<h4>News 8</h4>

<p>Aliquam porta, nisi id aliquam posuere, enim mi bibendum tellus, non venenatis nisi orci at mi. Curabitur placerat.</p>

</div>

<p class="separator message">

It can be used for news tickers as well. The plugin is not restricted to clicks or buttons.<br />

Here the option 'lazy' is used and it works, click the buttons on the right if you don't trust me :)<br />

You can also specify an interval for auto scrolling. To stop the animation, use $().stop() on the container.

</p>

<p id="general" class="side message">

This demo shows 3 different uses of this plugin. It can certainly be used for others purposes as well.<br />

Note that it can be used with any html. This is not a widget and the examples are just improvised.<br />

Use "View source" to see the different calls and markup. All the settings are commented.

</p>

<p id="extra" class="side message">

This plugin won't modify your html at all, won't even touch a single style.<br />

It gives you full control over the markup and the look, that's your part of the job :)<br />

You can control the animation from outside with the 3 exposed events (prev, next, goto).<br />

Guess what ? If you manage to show them scrollbars, users with no javascript can still navigate your content!

</p>

</body>

</html>

------------------------------------------------------------------------------------------------------------
SLIPPRY CSS VS JS SLIDER
THIS IS NOT COMPLETE CSS SLIDER
IT WORKS WITH CSS AND JS FILES
http://slippry.com/examples/css-vs-jquery/
------------------------------------------------------------------------------------------------------------

<!doctype html>

<head>

<title>Examples - CSS vs jQuery transitions</title>

</head>

<h1 id="site-name"><a href="/" id="logo-link">Slippry</a></h1>

<li><a href="/settings" class="button-link">Settings</a></li>

<li><a href="/examples" class="button-link">Examples</a></li>

<li><a href="https://github.com/booncon/slippry/archive/v1.4.0.zip

" title="Download this repository as a zip file" rel="nofollow" class="button-link download">Download</a></li>

</nav>

</div>

</header>

<h2 class="slider-title">CSS vs jQuery</h2>

<p>This demo shows the differences between using CSS transitions and jQuery transitions. What's the difference? In a nutshell, CSS uses your graphic card to process the transition, where as using jQuery uses your main processor. However jQuery is generally more backwards compatible than CSS. That said, CSS transitions will revert to jQuery if the browser doesn't support CSS transitions.</p>

<li><a href="#slide1"><img src="http://slippry.com/assets/img/image-1.jpg" alt="This is caption 1 <a href='#link'>Even with links!</a>"></a></li>

</ul>

<h3>jQuery</h3>

<li><a href="#slide1"><img src="http://slippry.com/assets/img/image-1.jpg" alt="This is caption 1 <a href='#link'>Even with links!</a>"></a></li>

</ul>

</section>

</body>

</html>

-----------------------------------------------------------------------------------------------------------------
PRESTASHOP BX SILDER WEBKUL
http://demo.prestashop.com
-----------------------------------------------------------------------------------------------------------------

<html>

<head>

<title>PRESTASHOP WEBKUL</title>

</head>

</div><a href="http://prestashop.webkul.com/ps-jsmodules/?name=psproductslide" class="bx-prev">prev</a>

</ul>

$(document).ready(function() {

$('#product_slider').bxSlider1({

displaySlideQty: "3",

auto: "true",

mode: "horizontal",

moveSlideQty: 1

});

</script>

</body>

</html>

-----------------------------------------------------------------------------------------------------------------

FbGadgets

Wednesday 15 February 2017

JS IMAGE SCROLLER

0 comments:

Post a Comment

SPONSORS ❤ ☕ ❀ ✿ ❁ ✾ ✽ ❃ ❋

RANDOM POST

RANDOM

RECENT POST MULTI COLOR

Learning Codes

Labels

RECENT COMMENTS AVATAR