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>
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'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 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 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();