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>
Related
I'm new to Javascript trying to make a image gallery.
But my code only show first pic in right div.
and it won't change though I used onmouseover.
When I try to switch picture, it doesn't has any reaction.
Could anyone help me with it? Thank you!!
<html>
<head>
<meta charset="UTF-8">
<title>Image Gallery</title>
<style>
body{
margin:0;
padding:0;
}
#menu li{
list-style-type:none;
}
#menu li img{
height:80px;
width:100px;
}
#left {
float:left;
margin:30px;
}
#right{
height:400px;
widows:600px;
float:left;
margin:30px;
}
</style>
<script>
window.onload = test;
function test (){
var right = document.getElementById("right");
var list = document.getElementsByTagName("img");
for(var i= 0;i<list.length;i++){
var img = list[i];
list[i].onmouseover = showPic(list[i]);
list[i].onmouseout = hidPic(list[i]);
}
}
function showPic(obj){
var right = document.getElementById("right");
right.appendChild(obj);
}
function hidPic(obj){
var right = document.getElementById("right");
right.removeChild(obj);
}
</script>
</head>
<body>
<div id="left">
<ul id="menu">
<li><img src="1.jpg"/></li>
<li><img src="2.jpg"/></li>
<li><img src="3.jpg"/></li>
<li><img src="4.jpg"/></li>
<li><img src="5.jpg"/></li>
</ul>
</div>
<div id="right">
</div>
</body>
</html>
Hi for JAvascript simple mouse hover change img in gallery try this
JS
function onHover(element)
{
document.getElementById("right").src= element.getAttribute('src');
}
HTML
<div id="left">
<ul id="menu">
<li><img src="http://www.w3schools.com/bootstrap/img_chania.jpg" onmouseover="onHover(this);" /></li>
<li><img src="http://www.w3schools.com/bootstrap/img_chania2.jpg" onmouseover="onHover(this);" /></li>
<li><img src="http://www.w3schools.com/bootstrap/img_flower2.jpg" onmouseover="onHover(this);" /></li>
<li><img src="http://www.w3schools.com/bootstrap/img_flower.jpg" onmouseover="onHover(this);" /></li>
<li><img src="http://www.w3schools.com/bootstrap/img_flower2.jpg" onmouseover="onHover(this);" /></li>
</ul>
</div>
<img id ="right" src="http://www.w3schools.com/bootstrap/img_chania.jpg"/>
and for Jquery
Jquery
$(document).ready(function(){
$("img").mouseout(function() {
})
.mouseover(function() {
console.log($(this))
$("#right").attr('src' , $(this).attr("src"));
});
});
HTML
<div id="left">
<ul id="menu">
<li><img src="http://www.w3schools.com/bootstrap/img_chania.jpg"/></li>
<li><img src="http://www.w3schools.com/bootstrap/img_chania2.jpg"/></li>
<li><img src="http://www.w3schools.com/bootstrap/img_flower2.jpg"/></li>
<li><img src="http://www.w3schools.com/bootstrap/img_flower.jpg"/></li>
<li><img src="http://www.w3schools.com/bootstrap/img_flower2.jpg"/></li>
</ul>
</div>
<img id ="right" src="http://www.w3schools.com/bootstrap/img_chania.jpg"/>
for refrence https://plnkr.co/edit/8zthUijUQqQqyjoR7PMw
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 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!
For some reason, I can't make my jQuery work. I've followed every step and nothing! Here's what's happening:
All the styles and JavaScript:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"> <\/script>')</script>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" type="text/css" />
And my HTML:
<ul id="bxslider">
<li><img src="1.jpg" /></li>
<li><img src="2.jpg" /></li>
<li><img src="3.jpg" /></li>
</ul>
<script type="text/javascript">
$(document).ready(function() {
$('.bxslider').bxSlider({
auto: true,
autoControls: true
});
});
</script>
You are initiating the slider using bxslider as class, but in your case you have to use as id selector like:
$(document).ready(function () {
$('#bxslider').bxSlider({
auto: true,
autoControls: true
});
});
Selectors docs: http://api.jquery.com/category/selectors/
Working fiddle: http://jsfiddle.net/IrvinDominin/UV4r4/1/
Also, you would want to load CSS first and then, the JavaScript files.
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();