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
Related
I'm fairly new to javascript and jQuery and don't understand why only one of the two scripts in my head section is working.
I have the following code in the head of my page:
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="../../js/jquery.slicknav.min.js"></script>
<script type="text/javascript">
$(document).ready(function menu(){
$('#nav_menu') .slicknav({prependTo:"#mobile_menu"});
});
</script>
<link rel="stylesheet" href="../../styles/jquery.bxslider.css">
<script src="./js/jquery.bxslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function slideshow(){
$('#slider') .bxSlider({
auto: true,
autoControls: true,
minSlides: 1,
maxSlides: 10,
slideWidth: 650,
});
});
</script>
And in my body I have the following elements:
<nav id="mobile_menu"></nav>
<nav id="nav_menu">
<ul>
<li><a class="current" href="#">Home</a></li>
<li>About Us</li>
<li>Products</li>
<li>Promotions
<ul>
<li>Back-To-School</li>
</ul>
</li>
<li> What's New
<ul>
<li>Latest News</li>
</ul>
</li>
<li>Our Team</li>
<li>Contact Us</li>
</ul>
</nav>
and,
<ul id="slider">
<li><img src="./images/1.png" alt="Parrot Products"></li>
<li><img src="images/2.png" alt="Office Machines"></li>
<li><img src="images/3.png" alt="Labelling"></li>
<li><img src="images/4.png" alt="Paper"></li>
<li><img src="images/5.png" alt="Files & filing"></li>
<li><img src="images/6.png" alt="Office Accessories"></li>
<li><img src="images/7.png" alt="Toners & Cartridges"></li>
<li><img src="images/8.png" alt="Art Supplies"></li>
<li><img src="images/9.png" alt="Colouring In"></li>
<li><img src="images/10.png" alt="Gifts"></li>
<li><img src="images/11.png" alt="Office Furniture"></li>
<li><img src="images/12.png" alt="Bibles"></li>
<li><img src="images/13.png" alt="Bible Repairs & Indexing"></li>
<li><img src="images/14.png" alt="Bible Verse"></li>
</ul>
With only one of the two scripts in my head (either the slicknav or the bxslider) it works perfectly. If I have both though only the lowest one in the head code works.
I have tried moving them around to change the order, placing the scripts in my html below the elements instead of using $(document).ready() and placing both into one $(document).ready() section.
Any advice on how to get these two to work together would be greatly appreciated, or even just an explanation as to what the issue is to try and avoid it in the future.
Try this,
I replaced all the references to your Scripts with scripts stored on CDN's (Content Delivery Networks) this ensures that the scripts are definitely being referenced correctly.
I also swapped some of your code around to make more sense i.e.
$(document).ready(function menu() {
$('#nav_menu').slicknav({
prependTo: "#mobile_menu"
});
});
became:
$(document).ready(function menu() {
$('#mobile_menu').slicknav({
prependTo: "#nav_menu"
});
});
I added the hidden attribute to your <nav id="mobile_menu" hidden="hidden"> tag so that it hides on default.
Finally I just added some links to images on Google images to test your slider.
and it seems to work as expected.
$(document).ready(function menu() {
$('#mobile_menu').slicknav({
prependTo: "#nav_menu"
});
});
$(document).ready(function slideshow() {
$('#slider').bxSlider({
auto: true,
autoControls: true,
minSlides: 1,
maxSlides: 10,
slideWidth: 650,
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SlickNav/1.0.10/jquery.slicknav.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/SlickNav/1.0.10/slicknav.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.css" rel="stylesheet" />
<nav id="nav_menu"></nav>
<nav id="mobile_menu" hidden="hidden">
<ul>
<li><a class="current" href="#">Home</a></li>
<li>About Us</li>
<li>Products</li>
<li>Promotions
<ul>
<li>Back-To-School</li>
</ul>
</li>
<li> What's New
<ul>
<li>Latest News</li>
</ul>
</li>
<li>Our Team</li>
<li>Contact Us</li>
</ul>
</nav>
<ul id="slider">
<li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Parrot Products"></li>
<li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Office Machines"></li>
<li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Labelling"></li>
<li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Paper"></li>
<li><img src="images/5.png" alt="Files & filing"></li>
<li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Office Accessories"></li>
<li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Toners & Cartridges"></li>
<li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Art Supplies"></li>
<li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Colouring In"></li>
<li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Gifts"></li>
<li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Office Furniture"></li>
<li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Bibles"></li>
<li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Bible Repairs & Indexing"></li>
<li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Bible Verse"></li>
</ul>
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 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!
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>