Adding Next and Prev button to my slide

Adding Next and Prev button to my slide - javascript

I would like to add a next and previous button to my image slider, but I don't know how to do.
Plz help. I have a basic structure..?
Here is my code..
HTML
<div class="large-photo">
<img src="images/large-photo/photo1.jpg" class="active">
<img src="images/large-photo/photo2.jpg">
</div>
<div class="small-photo">
<img src="images/small-photo/photo1.jpg" class="thumb selected">
<img src="images/small-photo/photo2.jpg" class="thumb">
</div>
<div class="arrow">
<div class="left-arrow"></div>
<div class="right-arrow"></div>
</div>
CSS
.large-photo img {
display: none;
}
.large-photo img.active {
display:block;
}
.small-photo img.selected {
border: 3px solid red;
}
JAVASCRIPT
function loadPhoto() {
$('.small-photo img').click(function() {
$('.selected').removeClass('selected');
var index = $(this).index();
$('.large-photo img.active').removeClass('active');
$('.large-photo img').eq(index).addClass('active');
$(this).addClass('selected');
});

it was some difficult for me to understand what you want as preer according to your code but however you will under stand how this sytem works and also how to use it differently. CODE:
<style type="text/css">
#container{
width: 266px ;
height:128px ;
overflow: hidden;
}
</style>
<script type="text/javascript" src="jquery-2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#left-arrow").click(function(){
$(".small-photo").fadeIn();
$(".large-photo").fadeOut();
});
$("#right-arrow").click(function(){
$(".small-photo").fadeOut();
$(".large-photo").fadeIn(1000);
});
});
</script>
<div id="container">
<div class="large-photo">
<img src="images/1395924816_personal-information.png">
<img src="images/1395938204_lock.png">
</div>
<div class="small-photo">
<img src="images/1395939936_application-pgp-signature.png" >
<img src="images/1396010974_button-cross_basic_red.png" >
</div>
</div>
<div class="arrow">
<-
->
</div>
and yes i had to do some of the major chages such as removing CSS but you can add but for my convinence i removed it just to show you how to do what you want i also change some of the class to id.. etc and also change pictures and you replace all thos pictures to your pictures..
working demo

Related

On Scroll change color of menu HTML

First of all I'm as newbie in this area. I tried to search about this but nothing fits on what I want.
So I have this html:
<aside>
<div align="center">
<img src="images/teste.jpg" style="width:200px;height:200px;">
</div>
...
<div id="disciplinas">
<h3>Disciplinas:</h3>
<li>x</span></li>
<li>y</span></li>
<li>z</span></li>
<li>w</span></li>
<br/>
</div>
</aside>
<div id="main">
<section id="x">
<div>
<img src="images/teste.jpg">
</div>
</section>
<section id="y">
<div>
<img src="images/teste.jpg">
</div>
</section>
...
I tried this code but didn't work:
<script type="text/javascript">
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 210) {
$("li").css('background-color', 'blue');
} else {
$("li").css('background-color', 'red');
}
});
});
</script>
I would like to know how can i change the color of the <li> on scroll, when they get to the correct section (or maybe i need to use a div instead).
Thanks
If it helps, the css of div disciplinas and li:
#disciplinas {
border: 1px solid;
margin-top: 5%;
margin-bottom: 5%;
text-align: center;
box-shadow: 10px 10px 5px #DCDCDC;
background-color: white;
}
li {
text-align: center;
list-style-type: none;
}

Try using this code,
$(window).scroll(function () {
var scroll_pos= $(window).scrollTop();
if(scroll_pos > 210) {
$("li").css('background-color', 'blue');
} else {
$("li").css('background-color', 'red');
}
});
hope it helps.

Add jquery library js file
Remove unnecessary html tag
<aside>
<div align="center">
<img src="images/teste.jpg" style="width:200px;height:200px;">
</div>
...
<div id="disciplinas">
<h3>Disciplinas:</h3>
<li>x</li>
<li>y</li>
<li>z</li>
<li>w</li>
<br/>
</div>
</aside>
<div id="main">
<section id="x">
<div>
<img src="images/teste.jpg">
</div>
</section>
<section id="y">
<div>
<img src="images/teste.jpg">
</div>
</section>
https://jsfiddle.net/rq6rgrcj/

Check this codepen:
http://codepen.io/yuki-san/pen/eJqLNO
You can see the idea and how the sections are tied to the scrolling event.
Now use that and just change the li background color instead of underline
Create a css class lets say - scrollColor and add it using jQuery
.addClass(".scrollColor")
when the window scrolled to the right place and remove it when scrolled away

Same javascript event for different images?

I have an image that when hover, a div with an overlay will fade in and out.
<div id="img-one">
<div id="overlay-one">
<div class="card-overlay-text">
<p>Enlarge Image<p></div>
</div>
<img src="assets/img/card_one.jpg" alt="" />
</div>
However, I have multiple images and I need to repeat this code for each of these images (assigned with different div's id). How can I get, when hover on specific image.
The code only run on individual image only?
$(function() {
$('#img-one').hover(function() {
$('#overlay-one').stop(true,true).fadeIn();
}, function() {
$('#overlay-one').stop(true,true).fadeOut();
});
});

Use general class in all the image containers div's and overlay div's, like :
<div id="img-one" class='img-container'>
<div id="overlay-one" class='overlay'>
...
</div>
</div>
Then adjust you JS code to invoke just related overlay :
$(function() {
$('.img-container').hover(function() {
$('.overlay', this).stop(true,true).fadeIn();
}, function() {
$('.overlay', this).stop(true,true).fadeOut();
});
});
Hope this helps.
$(function() {
$('.img-container').hover(function() {
$('.overlay', this).stop(true,true).fadeIn();
}, function() {
$('.overlay', this).stop(true,true).fadeOut();
});
});
.img-container{
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='img-container'>
<div class='overlay'>
<div class="card-overlay-text">
<p>Enlarge Image 1<p></div>
</div>
</div>
<div class='img-container'>
<div class='overlay'>
<div class="card-overlay-text">
<p>Enlarge Image 2<p></div>
</div>
</div>
<div class='img-container'>
<div class='overlay'>
<div class="card-overlay-text">
<p>Enlarge Image 3<p></div>
</div>
</div>

You'll better use classes. Then do something like this:
$('.main-container').find('.div-class-name').forEach(function(el) {
<bind a handler for each consequent element here>
});
You'll end up with a bunch of handlers that are bound to each individual ".div-class-name" element.

It is recommended to use classes because that is what classes are for and id's are not.
If your case demands some situation where you have no control over the HTML part, you can use wildcards in attribute selectors in some cases. Like div[id^=overlay] to selects all div with id starting with overlay
$(function() {
$('div[id^=img]').hover(function() {
$('div[id^=overlay]',this).stop(true,true).fadeIn();
}, function() {
$('div[id^=overlay]',this).stop(true,true).fadeOut();
});
});
div[id^=img]{
position: relative;
height:100px;
width:100px;
border:1px solid black;
margin:2px;
}
div[id^=img] > div[id^=overlay]{
position:absolute;
background:rgba(0,0,0,.2);
top:0;
left:0;
right:0;
bottom:0;
display:none;
width:100px;
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="img-one">
<div id="overlay-one">
<div class="card-overlay-text">
<p>Enlarge Image 1<p></div>
</div>
<img width="100" src="https://upload.wikimedia.org/wikipedia/commons/e/ed/Raff_House.jpg" alt="" />
</div>
<div id="img-two">
<div id="overlay-two">
<div class="card-overlay-text">
<p>Enlarge Image 2<p></div>
</div>
<img width="100" src="https://upload.wikimedia.org/wikipedia/commons/e/ed/Raff_House.jpg" alt="" />
</div>

You can try with the jQuery Easy Overlay Plugin
http://eivissapp.github.io/jquery-easy-overlay/
In the code, you should assign a class to the images, and call this statement (that will work for each image):
jQuery("img.yourclass").hover(function(){
jQuery(this).easyOverlay("start");
}, function(){
jQuery(this).easyOverlay("stop");
});
If you have fontawesome in the page, then execute this before the code above (otherwhise the plugin will use the fontawesome spinner inside the overlay div):
jQuery.fn.easyOverlay.options = { spin: false }

How to make multiple divs slidetoggle with changing arrow

I'm very new to javascript and jQuery and has now got completely stuck despite trying various options. I'm trying to create a expand/collapse section with multiple divs. I would like each div to open and close seperately, with an arrow at the side pointing up or down, depending whether the content is expanded or collapsed.
From the code I have written below, only the first div works correctly. The only thing which happen When you click on the two other divs, is that the arrow in the first div change.
Any help will be greatly appreciated.
Following is the CSS:
#header_background {
background-image: url(header-background.png);
width:748px;
height:43px;
margin-left: -17px;}
#expand_arrow {
display: inline-block;
width: 17px;
height: 18px;
float:left;
margin-left:20px;
padding-left:0px;
padding-top:11px;
background-repeat:no-repeat; }
.sub_header {
color:#204187;
font-weight:bold;
font-size:16px;
vertical-align:middle;
padding-left:4px;
padding-top:12px;
float:left;
text-decoration:none;
}
Here's the attempted javascript and jQuery:
function chngimg() {
var img = document.getElementById('expand_arrow').src;
if (img.indexOf('expand-arrow.png')!=-1) {
document.getElementById('expand_arrow').src = 'images/collapse-arrow.png';
}
else {
document.getElementById('expand_arrow').src = 'images/expand-arrow.png';
}
}
$(document).ready(function(){
$("#header_background").click(function(){
$("#section").slideToggle("slow");
});
});
And here's the HTML
<div id="header_background" >
<img id="expand_arrow" alt="" src="images/collapse-arrow.png" onclick="chngimg()">
<div class="sub_header" onclick="chngimg()">header 1</div>
</div>
<div id="section" style="display:none">
text 1
</div>
<div id="header_background" >
<img id="expand_arrow" alt="" src="images/collapse-arrow.png" onclick="chngimg()">
<div class="sub_header" onclick="chngimg()">header 2</div>
</div>
<div id="section" style="display:none">
text 2
</div>
<div id="header_background" >
<img id="expand_arrow" alt="" src="images/collapse-arrow.png" onclick="chngimg()">
<div class="sub_header" onclick="chngimg()">header 3</div>
</div>
<div id="section" style="display:none">
text 3
</div>

It's only working for the first set of elements because you're using IDs, and IDs have to be unique within the document (page). You could change to using classes and perform some simple DOM traversal to get the corresponding section based on the header that was clicked. Something like this:
$(document).ready(function() {
$('.header_background').click(function(e) {
$(this).next('.section').slideToggle('slow');
var img = $(this).find('img.expand_arrow')[0]; // the actual DOM element for the image
if (img.src.indexOf('expand-arrow.png') != -1) {
img.src = 'images/collapse-arrow.png';
}
else {
img.src = 'images/expand-arrow.png';
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header_background" >
<img class="expand_arrow" alt="" src="images/collapse-arrow.png">
<div class="sub_header">header 1</div>
</div>
<div class="section" style="display:none">
text 1
</div>
<div class="header_background" >
<img class="expand_arrow" alt="" src="images/collapse-arrow.png">
<div class="sub_header">header 2</div>
</div>
<div class="section" style="display:none">
text 2
</div>
<div class="header_background" >
<img class="expand_arrow" alt="" src="images/collapse-arrow.png">
<div class="sub_header">header 3</div>
</div>
<div class="section" style="display:none">
text 3
</div>

Look for your next section of the header clicked like so. And change your id for class because ID need to be unique
$(".header_background").click(function(){
$(this).nextAll(".section:first").slideToggle("slow");
});

Cannot display multiple instances of Java/CSS image gallery on single HTML page

JavaScript - I am aware that this is where I need to add something to enable multiple instances to run, however I really have no idea of how to code this correctly.
<script type="text/javascript" src="kuttinew/jquery-1.10.2.js"></script>
<script>
$('#images_thumbnails a').click(function () {
var newImageSrc = $(this).attr('href');
$('#images_full img').attr({
'src': newImageSrc
});
return false;
});
</script>
CSS - This was simple enough
#images_full img,
#images_thumbnails img {
padding: 3px;
border: 1px solid #CCC;
}
#images_thumbnails img {
margin: 4px;
width: 40px;
height: 40px;
}
HTML - Finally the HTML elements
<div id="images_full">
<img src="kuttinew/images/full_image/kuttison-complete-set01.jpg" />
</div>
<div id="images_thumbnails">
<a href="kuttinew/images/full_image/kuttison-complete-set01.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set01.jpg" />
</a>
<a href="kuttinew/images/full_image/kuttison-complete-set02.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set02.jpg" />
</a>
<a href="kuttinew/images/full_image/kuttison-complete-set03.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set03.jpg" />
</a>
</div>
It works perfectly fine until I add a second instance on same HTML page, the second set just open in own window like they have almost by-passed the Java commands.

I'm going to take a stab in the dark and say that your problem is that you are just using ids (#) instead of classes (.) to represent your multiple photo galleries. If you want similar behavior among multiple "instances," your jQuery script should be acting upon a class instead of an id. For example:
http://jsbin.com/otiTOyU/1/edit?html,css,js,output
Script:
<script type="text/javascript" src="kuttinew/jquery-1.10.2.js"></script>
<script>
$('.images_thumbnails a').click(function () {
var newImageSrc = $(this).attr('href');
// Traverse the DOM to change this's respective '.images_full img'
$(this).parent().prev().children().first().attr('src', newImageSrc);
return false;
});
</script>
CSS:
.images_full img,
.images_thumbnails img {
padding: 3px;
border: 1px solid #CCC;
}
.images_thumbnails img {
margin: 4px;
width: 40px;
height: 40px;
}
HTML:
<div id="gallery1">
<div class="images_full">
<img src="kuttinew/images/full_image/kuttison-complete-set01.jpg" />
</div>
<div class="images_thumbnails">
<a href="kuttinew/images/full_image/kuttison-complete-set01.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set01.jpg" />
</a>
<a href="kuttinew/images/full_image/kuttison-complete-set02.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set02.jpg" />
</a>
</div>
</div>
<div id="gallery2">
<div class="images_full">
<img src="kuttinew/images/full_image/kuttison-complete-set01.jpg" />
</div>
<div class="images_thumbnails">
<a href="kuttinew/images/full_image/kuttison-complete-set01.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set01.jpg" />
</a>
<a href="kuttinew/images/full_image/kuttison-complete-set02.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set02.jpg" />
</a>
</div>
</div>
There are different ways you could go about optimizing the code. However, I'll leave that to you as an exercise. Be sure to check out the link I gave near the beginning of my post for a live demo.

clickable image within a div

I have a swipe gesture working the way I would like, when the user swipes from right/left the images toggle. Now I just want to add a different link to each img src, so slider1 has a different link associated to it then slider2, etc. Can someone please help me figure this out?
<pre>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='swipe.js'></script>
<title>Presentation</title>
<style>
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float:left;
width:100%;
position: relative;
}
#mySwipe div b {
display:block;
margin:0px;
margin-top:240px;
background:url("");
height:1280px;
width:720px;
}
</style>
<script type="text/javascript">
// When the DOM is ready, initialize the scripts.
jQuery(function( $ ){
// Get a reference to the container.
var container = $( ".container" );
// Bind the link to toggle the slide.
$( "a" ).click(
function( event ){
// Prevent the default event.
event.preventDefault();
// Toggle the slide based on its current
// visibility.
if (container.is( ":visible" )){
// Hide - slide up.
container.slideUp(500, function(){ $('').show(); });
} else {
// Show - slide down.
container.slideDown(300, function(){ $('').hide(); });
}
}
);
});
</script>
</head>
<body>
<img src="../question_header/question.png" />
<div class="nfooter"></div>
<div id='mySwipe' style='width:720px; height:981px; margin-top:55px;' class='swipe'>
<div class='swipe-wrap'>
<div><img src="../slider/slider1.png" /></div>
<div><img src="../slider/slider2.png" /></div>
<div><img src="../slider/slider3.png" /></div>
<div><img src="../slider/slider4.png" /></div>
</div>
</div>
<script>
// pure JS
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
// transitionEnd: function(index, element) {}
});
// with jQuery
// window.mySwipe = $('#mySwipe').Swipe().data('Swipe');
</script>
<div class='container'>
<div class='inner'>
</div>
</div>
</body>
</html>
</pre>

THIRD ANSWER:Change image DEMO HERE
jQuery(document).ready(function($) {
$('img[slideurl]').click(function(){
if($(this).is(':last-child')){
$(this).insertBefore($('img[slideUrl]').first());
}
else {
$(this).next('img[slideUrl]').insertBefore($(this));
}
});
});
SECOND ANSWER:
After i read your comments ,i suggest using jQuery,to add a click event to every img that has a custo attribute , for example slideUrl='http://stackoverflow.com' :
HTML:
<div class='swipe-wrap'>
<div><img src="../slider/slider1.png" slideUrl='http://link1.com' /></div>
<div><img src="../slider/slider2.png" slideUrl='http://link2.com'/></div>
<div><img src="../slider/slider3.png" slideUrl='http://link3.com'/></div>
<div><img src="../slider/slider4.png" slideUrl='http://link4.com'/></div>
</div>
JS code:
$('img[slideUrl]').click(function(){
window.location.href = $(this).attr('slideUrl');
});
CSS:
img[slideUrl]{
cursor:pointer;
}
FIRST ANSWER:
You can do it using <a> element with href attribute like this :
<div><a href='link1'><img src="../slider/slider1.png" /></a></div>

Try like this:-
<div>
<a href='link1' style="display: block; height: 100%">
<img src="../slider/slider1.png" alt=".." />
</a> </div>
This will make the entire <div> clickable.

Develop Reference

JavaScript is the programming language of the Web.

Adding Next and Prev button to my slide - javascript

Related

On Scroll change color of menu HTML

Same javascript event for different images?

How to make multiple divs slidetoggle with changing arrow

Cannot display multiple instances of Java/CSS image gallery on single HTML page

clickable image within a div

Categories

Resources