Continuous scrolling slider in a same direction using jquery - javascript

I am using jquery Tiny Carousel for sliding images but our client asks for continuous scrolling in a same direction i searching it for a day and i cant found the exact thing... Did anyone here came across it?
Now i am using this plugin for tinycarousel
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#slider").tinycarousel({ axis: 'x', display: 1, interval: true })
});
</script>
and i found that with this the looping is not possible anyone know how to loop this? or point me an another slider jquery control....

I do this
in jquery.tinycarousel.js Search for function initialize () and replace
iSteps = Math.max(1, Math.ceil(oPages.length / options.display) - iLeftover);
with
iSteps = 9999999999999999999999999;
OR
in jquery.tinycarousel.min.js Search for
u=Math.max(1,Math.ceil(k.length/e.display)-x);
and replace with u = 9999999999999999999999999;
Then
put this code in document ready
$('#slider1').tinycarousel({'display':3});
var SliderLength = $('#slider1 .viewport li').length;//set li or img or what ever
var append = $('#slider1 .viewport > ul').html();//grab the curent items
$('.buttons.next').mouseup(function()
{//next button click event
$('#slider1 ul').append(append);//append those item
var sliderWidth = parseInt($('#slider1 .overview').width());
var curLength = parseInt($('#slider1 li').length);
$('#slider1 .overview').width((sliderWidth * (curLength / SliderLength) ));//update content width
});
Demo

Here is a demo using the jQuery.carouFredSel-plugin
HTML
<div id="wrapper">
<div id="carousel">
<div>
<img src="img/fruit1.png" alt="fruit1" width="200" height="200" />
<span>Apple</span>
</div>
<div>
<img src="img/fruit2.png" alt="fruit2" width="200" height="200" />
<span>Mandarin</span>
</div>
<div>
<img src="img/fruit3.png" alt="fruit3" width="200" height="200" />
<span>Banannas</span>
</div>
<div>
<img src="img/fruit4.png" alt="fruit4" width="200" height="200" />
<span>Cherries</span>
</div>
<div>
<img src="img/fruit5.png" alt="fruit5" width="200" height="200" />
<span>Orange</span>
</div>
<div>
<img src="img/fruit6.png" alt="fruit6" width="200" height="200" />
<span>Melon</span>
</div>
<div>
<img src="img/fruit7.png" alt="fruit7" width="200" height="200" />
<span>Lemon</span>
</div>
<div>
<img src="img/fruit8.png" alt="fruit8" width="200" height="200" />
<span>Grapes</span>
</div>
<div>
<img src="img/fruit9.png" alt="fruit9" width="200" height="200" />
<span>Peach</span>
</div>
<div>
<img src="img/fruit10.png" alt="fruit10" width="200" height="200" />
<span>Pear</span>
</div>
<div>
<img src="img/fruit11.png" alt="fruit11" width="200" height="200" />
<span>Strawberry</span>
</div>
<div>
<img src="img/fruit12.png" alt="fruit12" width="200" height="200" />
<span>Melon</span>
</div>
</div>
</div>
JavaScript
$(function() {
var $c = $('#carousel'),
$w = $(window);
$c.carouFredSel({
align: false,
items: 10,
scroll: {
items: 1,
duration: 2000,
timeoutDuration: 0,
easing: 'linear',
pauseOnHover: 'immediate'
}
});
$w.bind('resize.example', function() {
var nw = $w.width();
if (nw < 990) {
nw = 990;
}
$c.width(nw * 3);
$c.parent().width(nw);
}).trigger('resize.example');
});
CSS
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background-color: #eee;
position: relative;
min-height: 300px;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #333;
line-height: 22px;
}
#wrapper {
background-color: #fff;
border-top: 1px solid #ccc;
width: 100%;
height: 50%;
margin-top: -1px;
position: absolute;
left: 0;
top: 50%;
}
#carousel {
margin-top: -100px;
}
#carousel div {
text-align: center;
width: 200px;
height: 250px;
float: left;
position: relative;
}
#carousel div img {
border: none;
}
#carousel div span {
display: none;
}
#carousel div:hover span {
background-color: #333;
color: #fff;
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
line-height: 22px;
display: inline-block;
width: 100px;
padding: 2px 0;
margin: 0 0 0 -50px;
position: absolute;
bottom: 30px;
left: 50%;
border-radius: 3px;
}

Try this one
$(function(){
var current = 1;
var totalImages = $("#slider-code li").size();
var oSlider = $('#slider-code').tinycarousel({
animation:false,
controls: false
});
$('#nextButton').click(function(){
current += 1;
if(current > totalImages){
current = 1;
}
oSlider.tinycarousel_move(current);
});
});​
and here is the demo in jsfiddler

This is what I coded in a situation like yours. This scrolls up, but you can easily modify it to scroll in any direction. Change the algorithm from marginTop modification to:
marginTop increase by 1, for up to down scroll
marginLeft increase by 1, for left to right scroll
marginLeft decrease by 1, for right to left scroll
(function($)
{
var ScrollMe = function(element)
{
var elem = $(element);
var obj = this;
elem.wrapInner("<div class='mbui_scrollable'></div>");
var scr=elem.children("div.mbui_scrollable");
setInterval($(this).scrollUp,130); //CHANGE HERE FOR SPEED
};
$.fn.scrollme = function()
{
return this.each(function()
{
var element = $(this);
// Return early if this element already has a plugin instance
if (element.data('scrollme')) return;
// pass options to plugin constructor
var myplugin = new ScrollMe(this);
// Store plugin object in this element's data
element.data('scrollme', myplugin);
});
};
$.fn.scrollUp = function(elem)
{
var allObj=$(".mbui_scrollable");
for(i=0;i<allObj.length;i++)
var s=$(allObj[i]).css('marginTop');
var n=parseInt(s)-1; //CHANGE HERE TO CHANGE DIRECTION AND SPEED
var h=$(allObj[i]).css('height');
if((n*-1)>=parseInt(h))
n=$(allObj[i]).parent().css('height');
$(allObj[i]).css('marginTop',n);
};})(jQuery);
Apply to elements like:
$(".scroll").scrollme();

For my iPhone app's website (niwuzzles.com) I used Alen Grakalic's jQuery plugin EasySlider to accomplish this.
Project Description:
http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider
Continuous Slide demo:http://cssglobe.com/lab/easyslider1.7/01.html
Code Example:
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
</script>
</head>
<body>
<div id="slider">
<ul>
<li><img src="img1.png" /></li>
<li><img src="img2.png" /></li>
<li><img src="img3.png" /></li>
<li><img src="img4.png" /></li>
</ul>
</div>
</body>

I made some changes to Tiny Carousel to add looping. I just picked up on some stuff from the timed sliding function.
http://pastebin.com/3M3akv9r

i think it must work
$('#slider1').tinycarousel({start: 2,
interval: true
});

Finally i found the slider here
http://javascript.about.com/library/blcmarquee1.htm

Related

appendTo adds element to another one, but it does not show on the website

I am trying to add arrows to my simple lightbox. The arrows are simple symbols "<" and ">. I have created them with jquery and when I try to add them to the image, they show up in the developer tools but not in the website for whatever reason. Can you tell me what's the problem please?
Here is the screenshot of the issue, if you did not understand my poor english. As you can see, the arrows are created in developer tools, but they cannot be found on the website. https://prnt.sc/26lyfbc
//Gallery Lightbox made with Jquery
let gallery = $('#gallery'),
overlay = $('<div = id = "overlay"></div>').appendTo('body').hide();
//Opens the lightbox with chosen image
gallery.find('a').on("click", function(event){
event.preventDefault();
let href = $(this).attr('href'),
image = $('<img>', {src: href}),
larrow = $('<div = id = "larrow"> < </div>'); //LEFT ARROW
rarrow = $('<div = id = "rarrow"> > </div>'); //RIGHT ARROW
image.appendTo(overlay);
larrow.appendTo(image);
overlay.show();
//Closes the Lightbox with the image, by clicking on the overlay
$(document).on("click", "#overlay", function(){
overlay.hide();
image.remove();
})
})
.gallery {
display: none;
opacity: 0;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width: 1004px;
margin: 0 auto;
}
.gallery img {
position: relative;
top: 100px;
height: 200px;
width: 300px;
margin: 0 1em;
}
#overlay {
background: rgba(0, 0, 0, .7);
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
text-align: center;
z-index: 10;
}
#overlay img {
margin-top: 5%;
border: solid 5px white;
border-radius: 5px;
}
//Dont mind these, the silly values are just for testing purposes
#larrow {
font-size: 500px;
color: red;
z-index: 2000;
}
#rarrow {
font-size: 500px;
color: red;
z-index: 2000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery" id="gallery">
<img src="img\placeholder1.jpg" alt="">
<img src="img\placeholder2.jpg" alt="">
<img src="img\placeholder3.jpg" alt="">
<img src="img\placeholder4.jpg" alt="">
<img src="img\placeholder5.jpg" alt="">
<img src="img\placeholder6.jpg" alt="">
</div>
</body>
You have a few errors in your code. Instead of
larrow = $('<div = id = "larrow"> < </div>'); //LEFT ARROW
rarrow = $('<div = id = "rarrow"> > </div>'); //RIGHT ARROW
You should write it like this. There is no need for the '=' between div and id.
larrow = $('<div id = "larrow"> < </div>'); //LEFT ARROW
rarrow = $('<div id = "rarrow"> > </div>'); //RIGHT ARROW
The same goes for the following tags:
overlay = $('<div id = "overlay"></div>').appendTo('body').hide();
Putting the div tags in the image will also not work. Instead you should put the image and the arrows in a container together like this:
<div id="overlay">
<img src ... </img>
<div id = "larrow"> < </div>
<div id = "rarrow"> > </div>
</div>
Refer to Floating Div Over An Image to see the needed css.

jQuery enlarge image map on mouse over

I have an image over which I created hotspots for hyperlinks using image map. Now I need to enlarge/zoom over the images on mouse over. I have this so far
<script type="text/javascript">
$(document).ready(function () {
$('.mapping').mouseover(function() {
$(this).animate({
width: "110%",
height: "50%"
}, 'slow');
});
});
</script>
</head>
<body>
<p>
<map id="ImgMap0" name="ImgMap0">
<area alt="" coords="4, 14, 67, 34" id="a" class="mapping"
href="#" shape="rect" />
<area alt="" coords="5, 55, 70, 74" id="b" class="mapping"
href="# shape="rect" />
....
<img alt="" class="auto-style1" height="529" src="Tools.jpg"
width="800" usemap="#ImgMap0" /></p>
</p></body>
But the animate () is not working. Alert is being called so I know mouseover() is working. Any ideas for enlarging the area in image map?
JS Fiddle link
https://jsfiddle.net/z2Lkf8p0/
You cannot enlarge image's map in any way.
You can do this with another way. I'd created a fiddle for it.
http://jsfiddle.net/ebilgin/141bkx84/
HTML
<div class="container">
<img src="http://dummyimage.com/600x400/000/fff" alt="" />
<div class="map1 map"></div>
<div class="map2 map"></div>
</div>
CSS
.container {
position: relative;
width: 600px;
}
.container img {
position: absolute;
z-index: 1;
}
.map {
position: absolute;
background: #F0F;
z-index: 2;
}
.map1 {
left: 10px;
top: 10px;
width: 100px;
height: 100px;
}
.map2 {
right: 10px;
top: 10px;
width: 100px;
height: 100px;
}
JS
$(".map").on("mouseenter", function () {
$(this).animate({
width: "200px",
height: "200px"
});
});
Area to CSS convert
If all areas types are rectangle its easy. n1,n2,n3,n4
n1: y beginning
n2: x beginning
n3: y ending
n4: x ending
You can convert it.
left: n2;
top: n1;
width: n3 - n1;
height: n4 - n2;
Try this,
<script type="text/javascript">
$(document).ready(function () {
$('.mapping').hover(function() {
alert('Mouse Hovered');
//some statements
});
});
</script>
Good Luck.. ['}

Calculating multiple elements' position in order to .offset() it

Where I'm At
I've managed to get the location of all of the headshots of politicans in index.html using jQuery's .offset()
Where I'm Stuck
I'm looking to get each individual image's location on the page (using their class or id) and then change the current top and left values of the tooltip (which contains info about each of the politicians), using .offset() so it's appears near/above where the corresponding image of that politician is on the page.
UPDATE #1
#Roko: Can you elaborate on why the positioning needs to be fixed in this case. Likewise, with your suggested change, I can see the HTML for div class="tooltip" style="display: block; top: ... px; left ... px;"></div> but the numbers seem to have shifted the tooltip too much.
Tried:
$('img').each(function(){
var img = $(this);
img.click(function(){
$('.tooltip')
.show(100)
.text(img.attr('alt'))
.offset({
top : img.offset().top + img.height(),
left : img.offset().left
});
});
});
AND
var position = $el.data('.elem'),
ImagePosition = $el.offset(),
ImageSize = {
'width': $el.outerWidth(),
'height': $el.outerHeight()
};
'top': ImagePosition.top - el.outerHeight()
'left': ImagePosition.left - (elelment.outerWidth()/2) + (elementSize.width/2)
scripts.js
// Positioning of the tooltips
$(".headshot").click(function(){
// Fades in the tooltip
$(".tooltip").fadeIn("fast");
// This is the coordinates for current position of a tooltip
var coords = $(".tooltip").offset();
var height = $(".tooltip").height();
console.log(height);
var width = $(".tooltip").width();
console.log(width);
// How do I figure out how much top or left I need to move it?
alert("Top: " + coords.top + " Left: " + coords.left);
console.log(coords);
});
index.html
<div class="tooltip">
<div class="info">
<p class="tooltipName"></p>
<p class="tooltipParty"></p> <p class="tooltipConstuency"></p>
<p class="tooltipEthnicity"></p> <p class="tooltipAge"></p>
</div><!-- /.info -->
<div class="arrow-down">
</div><!-- /.arrow-down -->
</div><!-- /.tooltip -->
<img src="assets/img/headshots/allan.jpg" alt="" id="0" class="headshot NDP Female White">
<img src="assets/img/headshots/allum.jpg" alt="" id="1" class="headshot NDP Male White">
<img src="assets/img/headshots/altemeyer.jpg" alt="" id="2" class="headshot NDP Male White">
tooltip.scss
/*----------------------------------
TOOLTIP
----------------------------------*/
.tooltip {
display: none;
position: relative;
left: -12px;
top: -5px;
}
.info {
#include serifLight;
background: $yellow;
color: $black;
font-size: 1.4rem;
padding: 10px;
width: 9%;
text-align: center;
p {
margin: 0px;
}
}
.tooltipName, {
font-family: 'Roboto Slab',serif;
font-weight: 700;
}
.tooltipEthnicity, .tooltipAge {
display: inline;
}
.arrow-down {
width: 0;
height: 0;
border-left: 15px solid transparent;
jsBin demo
$('img').click(function(){
var img = $(this);
$('.tooltip')
.show(100)
.text( this.alt )
.css({
top : img.offset().top + img.height(),
left : img.offset().left
});
});
and
.tooltip {
display: none;
position: absolute; /* set to absolute */
left: -12px;
top: -5px;
}
also make sure to actually have some value inside the alt="" attribute!

Hero Carousel Auto Navigation

I have a carousel Item Implemented by some one in a Webcenter Portal. I have the HTML code, CSS file of it and the JS.
The issue I have now occurs when the carousel has 5 Images and is auto sliding. Wait for the carousel to get to the fifth item and watch it scroll back to the first one. When it scrolls back, it cycles through all the Images rather than directly going to first.
The expected behavior is that it has to scroll from the 5th slide directly to 1st slide. I have no much experience with this particular JS and I would like to know where exactly I need to check for this particular behaviour and where exactly to do the changes.
Your question is simple. After 5 th slide next slide should be 1 st with continuation. Now it goes to 1 st but with reverse order and then cont. normally.
In this code you will get your solution.
Please try this code. jsfiddle
jquery code
$('document').ready(function () {
var width = 750;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
var $slider = $('.slider');
var $slideContainer = $slider.find('ul');
var $slides = $slideContainer.find('li');
setInterval(function () {
$slideContainer.animate({
'margin-left': '-=' + width + 'px'
}, animationSpeed, function () {
currentSlide++;
if (currentSlide >= $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
});
html
<body>
<div id="container">
<div id="header">
<h3>J-Slider</h3>
</div>
<div class="slider">
<ul>
<li>
<img width="750px" height="400px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpapers-1.jpg">
</li>
<li>
<img width="750px" height="400px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpapers-13.jpg">
</li>
<li>
<img width="750px" height="400px" src="http://th08.deviantart.net/fs70/PRE/f/2014/071/5/5/blue_space_by_whendell-d79zabi.jpg">
</li>
<li>
<img width="750px" height="400px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpapers-1.jpg">
</li>
</ul>
</div>
</div>
</body>
css
body {
font-family:Gerogia;
font-size:15px;
}
#container {
width:930px;
margin:50px auto 10px auto;
border-left:#666 solid 3px;
border-right:#666 solid 3px;
background:#f5f5f5;
padding:20px 30px;
}
#header {
padding:10px 0;
border-bottom:#ccc solid 1px;
overflow:hidden;
text-align:center;
}
h3 {
font-size: 30px;
text-transform: uppercase;
letter-spacing: 2px;
}
.slider {
width: 750px;
height: 400px;
padding-top: 10px;
margin-left: 75px;
overflow: hidden;
}
.slider ul {
width:8000px;
list-style-type:none;
}
.slider li {
float: left;
}

JS/jQuery code works in chrome but not IE/FF

I've only been coding a couple of months and I'm struggling to figure out why this JS/jQuery wont run on a simple website I've been trying to create. I'm using Adobe Brackets and the live preview uses Chrome. Everything runs smoothly in Chrome, but when I open the index file with IE/FF JS/jQuery doesn't run at all.
Code as follows:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"> </script>
<script src="modernizr.custom.55043.js"></script>
<script type="text/javascript">
function testimonialcontainer() {
$(".testimonialcontainer #1").show("fade", 500);
$(".testimonialcontainer #1").delay(5500).hide("slide", {direction: 'left'}, 500);
var sc=$(".testimonialcontainer img").size();
var
count=2;
setInterval(function() {
$(".testimonialcontainer #" + count).show("slide", {direction: 'right'}, 500);
$(".testimonialcontainer #" + count).delay(5500).hide("slide", {direction:'left'}, 500);
if(count == sc) {
count = 1;
} else {
count = count + 1;
}
}, 6500);
};
</script>
HTML
<div class="testimonialcontainer">
<img src="testimonials/test1.png" id="1" />
<img src="testimonials/test2.png" id="2" />
<img src="testimonials/test3.png" id="3" />
</div>
CSS
.testimonialcontainer {
width: 795px;
height:175px;
position: absolute;
margin-top: 1000px;
margin-left: 102px;
border-top: 4px solid black;
border-bottom: 2px dotted black;
}
.testimonialcontainer img {
width: 756px;
height: 155px;
display: none;
padding: 10px;
}
Thanks in advance!
N
Numbers alone do not work as names for div's in IE/FF.

Categories

Resources