JQuery slide effect with mouseclick - javascript

I want to create a simple slideshow with JavaScript. I found this link Page
and I want the last slideshow. The slideshow with the header 'scrollRight (click)'. But it doesn't work on my page. The problem is when I press sometimes on the picture, then its away. Here is my page
MyPage and here the code:
*{
padding: 0px;
margin: 0px;
font-family: Raleway;
line-height: 20px;
}
body{
background-image: url(images/hintergrund.png);
}
section{
margin-top: 20px;
width: 1100px;
background: white;
border: 2px solid black;
box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);
margin-left: auto;
margin-right: auto;
padding: 20px;
}
article{
width: 100%;
background-color: red;
overflow: hidden;
}
.one{
height: 200px;
width: 200px;
float: left;
}
.two{
float: right;
width: 860px;
word-wrap: break-word;
background-color: blue;
height: 200px;
}
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" href="index.css">
<link href='http://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet' type='text/css'>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.one').cycle({
fx: 'scrollRight',
next: '.one',
timeout: 0,
easing: 'easeInOutBack'
});
});
</script>
</head>
<body>
<section>
<article>
<div class="one">
<img src="http://placehold.it/200x200" width="200" height="200" />
<img src="http://placehold.it/200x200" width="200" height="200" />
<img src="http://placehold.it/200x200" width="200" height="200" />
<img src="http://placehold.it/200x200" width="200" height="200" />
</div>
<div class="two">
<h1>Ansteckbutton</h1>
<br>
<p>
Groesse: 30cm Durchmesser
<br>
Farbe: Rot
<br>
Material: Metall
<br>
Form: Rund
</p>
</div>
</article>
<br>
<hr>
<br>
<article>
<div class="one">
</div>
<div class="two">
exampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexamleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampampleexampleexampleexampleexampleexamleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexamleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexamleexample
</div>
</article>
</section>
</body>
</html>
<!-- article mehrfach verwenden

Working Fiddle
There is something wrong with the parameters you are providing.
Just try this;
$(document).ready(function() {
$('.one').cycle();
});
Without parameters working fine.
Updated Working Fiddle
$(document).ready(function() {
$('.one').cycle({
fx: 'scrollRight',
next: '.one',
timeout: 0
});
});
Issue:
It was issue with applying easing: 'easeInOutBack' and it was throwing below error on the console. Removing attribute fixed the issue.
TypeError: d.easing[(intermediate value)] is not a function
For further investigation of this issue check this stackoverflow answer.

Related

Customized bxSlider next button changes weirdly when it's hovered

I'm practicing customizing bxSlider direction buttons.
As you can see, I changed .bx-controls-direction a's width & height to put different background images.
prev button works well, but next button seems weird. When I hover on it, it appears two different size same icons. How can I fix this?
the image is here: https://i.postimg.cc/5NdXKznk/2.png
HTML/JS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bxSlider</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h1>my beautiful moments</h1>
<div class="slider">
<div class="slide"><img src="./img/a.jpg" alt=""></div>
<div class="slide"><img src="./img/b.jpg" alt=""></div>
<div class="slide"><img src="./img/c.jpg" alt=""></div>
<div class="slide"><img src="./img/d.jpg" alt=""></div>
<div class="slide"><img src="./img/e.jpg" alt=""></div>
<div class="slide"><img src="./img/f.jpg" alt=""></div>
</div>
<script>
$(document).ready(function() {
$('.slider').bxSlider({
mode: 'fade',
slideWidth: 500,
auto: true,
pause: 1800
});
});
</script>
</body>
</html>
CSS:
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400;600&display=swap');
body {
font-family: 'Open Sans', sans-serif;
}
h1 {
text-align: center;
text-transform: uppercase;
}
.bx-wrapper {
box-shadow: none;
border: none;
margin: 1rem auto;
}
.bx-wrapper .bx-controls-direction a {
width: 90px;
height: 90px;
}
.bx-wrapper .bx-prev {
left: -10rem;
background: url('../img/arrow_t3_prev.png');
}
.bx-wrapper .bx-next {
background: url('../img/arrow_t3_next.png');
right: -10rem;
}
I figured it out myself.
I had to specify classes more in css.
CSS:
.bx-wrapper .bx-controls-direction .bx-prev {
background: url('../img/arrow_t3_prev.png') no-repeat;
left: -10rem;
}
.bx-wrapper .bx-controls-direction .bx-next {
background: url('../img/arrow_t3_next.png') no-repeat;
right: -10rem;
}
Now it works perfectly.

How to get elevateZoom to work with Two div

sorry for my English.. I'm very new to javascript...
My code for small gallery build with ekko-lightbox and the Zoom with elevatezoom.
Here can show all my code.
Javascript
<!--- open window small image gallery --->
$(document).on("click", '[data-toggle="lightbox"]', function(event) {
event.preventDefault();
$(this).ekkoLightbox({alwaysShowClose: true});
});
<!--- hover small image gallery and display on big window --->
var thumbSelect = document.querySelectorAll('.thumb'),
windowSelect = document.querySelector('.window'), thumbCount;
for (thumbCount = 0; thumbCount < thumbSelect.length; thumbCount++) {
thumbSelect[thumbCount].onmouseover = function() {
windowSelect.src = this.src;
};
};
<!--- zoom window --->
$('#zoom_05').elevateZoom({
zoomType: 'inner',
cursor: 'crosshair',
});
.grosse-bild { padding: 40px; background-color: #dedee0; width: 53.7%; }
#lalo {width: 5%; margin-right: 10px; margin-right: 7px;}
.kleine-fenster{
width: 50%;
border: none;
padding-top: 5px;
display: block;
margin-left: auto;
margin-right: auto;
}
.row {
margin: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"> </script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/elevatezoom/3.0.8/jquery.elevatezoom.min.js"></script>
<div class="container">
<div class="grosse-bild">
<div class="kleine-fenster" >
<img id="zoom_05" src="https://i.imgur.com/51pNImi.png" width="200" height="200" class="window" data-zoom-image="https://i.imgur.com/rt5G4Ol.jpg" >
</div>
</div>
<div class="row">
<a href="https://i.imgur.com/51pNImi.png" data-toggle="lightbox" data-gallery="gallery" class="kleine-bild" id="lalo" style="border-style: solid; border: 1px solid #b3b3b3; width: 5.2%;" >
<img src="https://i.imgur.com/rt5G4Ol.jpg" class="img-fluid thumb" >
</a>
<a href="https://i.imgur.com/S94Kz2A.png" data-toggle="lightbox" data-gallery="gallery" class="kleine-bild" style="border-style: solid; border: 1px solid #b3b3b3; width: 10%;">
<img src="https://i.imgur.com/cneOtx6.jpg" class="img-fluid thumb" >
</a>
</div>
</div>
My question, how does that zoom display on the grosse-bild Div, because now it displays only on kleine-fenster Div.
Can please someone explain with easy words how to solve this problem ?
This solution is similar to what you want:
var zoomConfig = {cursor: 'crosshair', zoomType: "inner" };
var image = $('#gallery_01 a');
var zoomImage = $('img#zoom_03');
zoomImage.elevateZoom(zoomConfig);//initialise zoom
image.hover(function(){
// Remove old instance od EZ
$('.zoomContainer').remove();
zoomImage.removeData('elevateZoom');
// Update source for images
zoomImage.attr('src', $(this).data('image'));
zoomImage.data('zoom-image', $(this).data('zoom-image'));
// Reinitialize EZ
zoomImage.elevateZoom(zoomConfig);
});
.grosse-bild { position: relative;margin-left: 0;width: 70%; display: block;
float: left; box-sizing: border-box;
}
.grosse-bild > img{ position:relative; max-height:100%; max-width: 100%;
vertical-align: middle;
border: 0;}
#lalo {width: 5%; margin-right: 10px; margin-right: 7px;}
.kleine-fenster{
display: block;
overflow: hidden;
height: 350px;
margin-bottom: 1em;
border: 1px solid #d8d8d8;
text-align: center;
line-height: 350px;
cursor: pointer;
}
#gallery_01{
position: relative;
float:left;
display: table;
line-height: 0;
content: '';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/elevatezoom/3.0.8/jquery.elevatezoom.min.js"></script>
<div class="container">
<div class="grosse-bild">
<div class="kleine-fenster" >
<img style="border:1px solid #e8e8e6;" id="zoom_03" src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png"
data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image3.jpg"
width="100%" />
</div>
</div>
<div id="gallery_01">
<a href="#" class="elevatezoom-gallery active" data-update="" data-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image1.jpg" data-zoom-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image1.jpg">
<img src="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image1.jpg" width="100" />
</a>
<a href="#" class="elevatezoom-gallery" data-update="" data-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image2.jpg" data-zoom-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image2.jpg">
<img src="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image2.jpg" width="100" />
</a>
<a href="#" class="elevatezoom-gallery" data-update="" data-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image3.jpg" data-zoom-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image3.jpg">
<img class="window" src="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image3.jpg" width="100" />
</a>
</div>
</div>
Just adjust style you want.

Responsive jQuery photo gallery with some features

I need your help with creating jquery photo gallery. I need to make this page responsive. I need to add next and previous buttons. I also need to add stop and resume buttons. But most important, I need to make it responsive.
Thanks for any feedback.
Thank you very much.
My code by far is below.
$(".thumb").click(function () {
$("#large img").attr("src", $(this).children("img").attr("src"));
$(".active").removeClass("active");
$(this).addClass("active");
});
setInterval(function () {
var $dalsi = $(".active").next();
if($dalsi.length == 1) {
$dalsi.click();
}
else {
$("#thumbnails .thumb:first-child").click();
}
}, 1000);
main {
max-width: 1024px;
margin: 0 auto;
}
#large {
width: 100%;
height: 400px;
overflow: hidden;
}
#thumbnails {
width: 100%;
}
#large img {
height: 100%;
display: block;
margin: 0 auto;
}
.thumb {
height: 200px;
width: 24%;
box-sizing: border-box;
display: inline-block;
overflow: hidden;
}
.thumb img {
height: 100%;
width: auto;
margin: 0 auto;
}
.thumb.active {
border: solid 1px red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<div id="large">
<img src="http://w03000.mycloudware.net/wp-content/uploads/2014/08/Brambora.jpg">
</div>
<div id="thumbnails">
<div class="thumb active">
<img src="http://w03000.mycloudware.net/wp-content/uploads/2014/08/Brambora.jpg">
</div>
<div class="thumb">
<img src="http://wiki.rvp.cz/#api/deki/files/12941/=brambora_hliza.jpg">
</div>
<div class="thumb">
<img src="http://instory.cz/content/images/59/9d/599d2fbda3daf-985.jpg">
</div>
<div class="thumb">
<img src="http://www.bonella.cz/public/userfiles/obrazky-clanky/hubnuti/diety/brambora.jpg">
</div>
</div>
</main>
<script src="jquery-3.3.1.js"></script>
<script src="script.js"></script>
</body>
</html>
Thanks for help.

How to make a gallery

I've made a photo gallery by HTML and CSS. I want, when I'll click on in, my image will display in full size slowly in a box. But I don't know how can I make it. Can you help me to solve this? If possible, please give me full code. My code is:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> My gallery</title>
<style type="text/css">
.gallery {
border: 1px solid #000;
width: 160px;
}
.img_head {
border-bottom: 1px solid #000;
text-align: center;
}
img {
height: 150px;
width: 150px;
margin: 5px;
}
img:hover {
height: 158px;
width: 158px;
margin: 1px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="gallery">
<div class="img_head">
<h3>My Image</h3>
</div>
<img src="http://i.imgur.com/jnMGOR9.jpg?1" alt="image" />
</div>
</body>
</html>
Here is an example that might work for you:
jsFiddle Demo
HTML:
<div id="overlay" class="abs"></div>
<div id="lb" class="abs">
<div id="lbHead">
<div id="lbTitle">Your image</div><div id="lbX">X</div>
</div>
<div id="lbBody">
</div>
</div>
<div class="gallery">
<div class="img_head">
<h3>My Image</h3>
</div>
<img src="http://i.imgur.com/jnMGOR9.jpg?1" width="50" height="50" alt="image" />
</div>
js/jQuery:
$('img').click(function(){
var tmp = $(this).attr('src');
$('#lbBody').html('<img src="'+tmp+'" />');
$('#overlay, #lb').fadeIn(1800);
});
$('#lbX').click(function(){
$('#overlay, #lb').fadeOut(800);
});
CSS:
.abs {position:absolute}
#overlay{top:0;left:0;right:0;bottom:0;background:black;opacity:0.5;}
#lb{top:5%;left:3%;width:94%;height:50%;overflow:hidden;}
#lbHead{height:40px;width:100%;background:darkcyan;}
#lbTitle{float:left;width:70%;height:30px;color:white;}
#lbX{float:right;width:30px;height:30px;padding:10px;text-align:center;}
#lbX:hover{background:white;color:darkcyan;cursor:pointer;}
img:hover{cursor:pointer;}
#overlay, #lb{display:none;}
You can use these type of gallery
http://www.jqueryscript.net/demo/Responsive-Photo-Gallery-with-jQuery-and-Bootstrap-3/
https://blueimp.github.io/Bootstrap-Image-Gallery/
http://ironsummitmedia.github.io/startbootstrap-thumbnail-gallery/#

Image carousel breaks pushing image out of slider when adding href

I added an image carousel to my site and everything worked great until I tried to add a href tag around the img scr link. it pushes the image out of the slider I have put a link to what it looks like below. I did think it was some css pushing it out but after removing all the surrounding tags the image just stayed the same. I need this so i can add a lightbox to the image when clicked.
Link to image of slider
https://dl.dropboxusercontent.com/u/9833562/caratest.png
I couldn't get it to work on JSFiddle so here is a link to download my files
http://jonathanlowe.co.uk/ws/download/carousel_file.zip
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<title>TEST</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/queries.css">
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/chgrid.css" />
<!-- Fonts -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Sintony:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
CSS
<style media="screen">
.containerslide {
width: 90%;
height: auto;
position: relative;
margin: 0 auto;
}
.roundabout-holder {
padding: 0px;
margin: 0 auto;
height: 310px;
width: 100%;
}
.roundabout-moveable-item {
height: 350px;
width: 380px;
cursor: pointer;
display:block;
}
.roundabout-moveable-item img {
height: 100%;
width: 100%;
}
.roundabout-in-focus {
cursor: auto;
}
#carousel-descriptions {
list-style:none;
display:block;
width:850px;
padding:0;
}
#carousel-descriptions li {
font-size:24px;
font-weight:bold;
text-align:center;
display:none;
}
#carousel-descriptions li.current {
display:block;
}
#carousel-controls2 {
max-width:920px;
margin:25px auto;
overflow:auto;
}
#carousel-controls2 span {
width:100px;
font-size:14px;
text-align:center;
margin:0 5px;
cursor:pointer;
background:#fff;
}
#carousel-controls {
width: 320px;
margin:25px auto;
overflow:auto;
border-collapse:collapse;
text-align:center;
margin-top: -20px;
}
#carousel-controls span {
height: 13px;
width: 13px;
display:inline-block;
font-size:14px;
text-align:center;
margin:0 5px;
padding:1px;
cursor:pointer;
border:0.5px solid black;
background:#c6c6c6;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px; /* future proofing */
-khtml-border-radius: 6px; /* for old Konqueror browsers */
}
#carousel-controls .current {
background:#000;
color:;
}
#carousel {
margin-bottom:-25px;
}
#carousel img{
padding: 30px;
}
#carousel img:hover {
padding:0px;
}
.prev-button{
padding-bottom:3px;
font-size: 22px;
background:#333;
width:100px;
height: 30px;
color:#fff;
float: left;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; /* future proofing */
-khtml-border-radius: 5px; /* for old Konqueror browsers */
}
.next-button{
padding-bottom:3px;
font-size: 22px;
background:#333;
width:100px;
height: 30px;
color:#fff;
float: right;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; /* future proofing */
-khtml-border-radius: 5px; /* for old Konqueror browsers */
}
}
</style>
</head>
HTML
<body>
<div class="text-inter">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1></h1>
<section class="containerslide">
<div id="carousel">
<a href="#">
<img src="img/mactest.png" alt="" class="slide" style="" />
</a>
<img src="img/mactest.png" height="50px" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
<img src="img/mactest.png" alt="" class="slide" />
</div>
</section>
<div id="carousel-controls2" >
<span><div class="prev-button" style=""><<</div></span>
<span><div class="next-button" style="">>></div></span>
<div id="carousel-controls" >
<span class="control current"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
</div>
</div>
</div> <!-- col-md-12 End -->
JAVASCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js">\x3C/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
<script src="js/jquery.roundabout.min.js"></script> <!-- Roundabout Link -->
<!-- Roundabout Script Start -->
<script type="text/javascript">
(function($) {
var $descriptions = $('#carousel-descriptions').children('li'),
$controls = $('#carousel-controls').find('span'),
$carousel = $('#carousel')
.roundabout({childSelector:"img",
minOpacity:1,
autoplay:false,
autoplayDuration:50000000,
btnNext: true,
btnPrev: true,
maxZ:380,
minZ:200,
maxScale: 0.99,
responsive:true,
clickToFocus: false,
autoplayPauseOnHover:true })
.on('focus', 'img', function() {
var slideNum = $carousel.roundabout("getChildInFocus");
$descriptions.add($controls).removeClass('current');
$($descriptions.get(slideNum)).addClass('current');
$($controls.get(slideNum)).addClass('current');
});
$controls.on('click dblclick', function() {
var slideNum = -1,
i = 0, len = $controls.length;
for (; i<len; i++) {
if (this === $controls.get(i)) {
slideNum = i;
break;
}
}
if (slideNum >= 0) {
$controls.removeClass('current');
$(this).addClass('current');
$carousel.roundabout('animateToChild', slideNum);
}
});
}(jQuery));
</script>
<script>
$('.next-button').on('click', function() {
$('#carousel').roundabout("animateToNextChild")
});
$('.prev-button').on('click', function() {
$('#carousel').roundabout("animateToPreviousChild")
});
</script> <!-- Roundabout Slider End -->
</body>
</html>
You could use data-attributes and set up your links with jQuery (to avoid having to edit your roundabout.js implementation. JSFiddle DEMO
<img src="http://lorempixel.com/200/200"
class="slide"
data-link="http://www.google.com" />
// this function should be in your page load function
$('.slide').click(function(){
window.open($(this).attr("data-link"), "_blank");
// you can use "_self" to open it in the same tab (the jsfiddle wont allow that though)
});
// and this little bit of CSS with give you the pointer clickable link
.slide[data-link] {
cursor: pointer;
}

Categories

Resources