I need some help when showing an image in a modal, I want the image to scale up and down maintaining its ratio.
If the image is smaller than the window then show it all
If the image is larger than the window enlarge it as much as possible to fill the window maintaining scale (no scrolling)
Also I'd like to have the body of the website darker and unable to scroll when a modal is opened, but I can't figure how to do so. Here's my HTML and CSS code (I know it doesn't work well when on small resolutions but it's not my requirement for now):
html, body {
width: 100%;
height: 100%;
margin: 0;
}
h1, h4{
color:#0B486B;
}
#container {
margin: 0;
padding: 0 3% 0 3%;
width: 100%;
height: 100%;
background-color: #E0E4CC;
}
#footer {
text-align: center;
padding: 10px;
width: 100%;
height: 100px;
background-color: #E0E4CC;
}
#sidebar {
padding-top: 10%;
height: 100%;
background-color: #69D2E7;
text-align: center;
}
#btngroup {
padding-top: 20%;
}
#grid {
padding: 0 2% 2% 2%;
height: 100%;
background-color: #A7DBD8;
}
#gridrow {
padding: 3% 0 0 0;
height:50%;
}
#gridcol {
height:100%;
position: relative;
}
img {
opacity: 1;
cursor: pointer;
max-width: 92%;
max-height: 92%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
img:hover {
opacity: 0.8;
}
#myModal {
display: none;
}
#modalDialog {
margin: auto;
}
#modalContent {
height: 100%;
width: 100%;
}
#modalBody {
padding:3px;
}
#imgModal {
max-width: 100%;
max-height: 100%;
cursor: default;
opacity: 1;
position: relative;
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>MyBootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="container" class="row">
<div id="sidebar" class="col-md-3 sidenav">
<h1>HELLO<br>WORLD</h1>
<ul id="btngroup" class="nav nav-stacked">
<li><h4>Pictures</h4></li>
<li><h4>Music</h4></li>
<li><h4>About me</h4></li>
</ul><br>
</div>
<div id="grid" class="col-md-9">
<div id="gridrow" class="row">
<div id="gridcol" class="col-md-4">
<img src="http://www.avionslegendaires.net/wp-content/uploads/images/dossier/F-15-leurre-thermique.jpg" class="img-rounded" onclick="onClick(this)"/>
</div>
<div id="gridcol" class="col-md-4">
<img src="https://www.w3schools.com/css/img_fjords.jpg" class="img-rounded" onclick="onClick(this)"/>
</div>
<div id="gridcol" class="col-md-4">
<img src="https://photos.smugmug.com/Landscapes/i-mjXhFCT/0/c99cf534/XL/IMG_7608-Edit-XL.jpg" class="img-rounded" onclick="onClick(this)"/>
</div>
</div>
<div id="gridrow" class="row">
<div id="gridcol" class="col-md-4">
<img src="http://img.171u.com/image/1609/2607005498770.jpg" class="img-rounded" onclick="onClick(this)"/>
</div>
<div id="gridcol" class="col-md-4">
<img src="https://photos.smugmug.com/Landscapes/i-mjXhFCT/0/c99cf534/XL/IMG_7608-Edit-XL.jpg" class="img-rounded" onclick="onClick(this)"/>
</div>
<div id="gridcol" class="col-md-4">
<img src="http://www.tappingforabundance.com/wp-content/uploads/slider1.jpg" class="img-rounded" onclick="onClick(this)"/>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal" onclick="this.style.display='none'">
<div id="modalDialog" class="modal-dialog">
<!-- Modal content-->
<div id="modalContent" class="modal-content" style="background-color:#000000">
<div id="modalBody" class="modal-body">
<img id="imgModal" class="img-rounded" />
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
<script>
// Modal Image Gallery
function onClick(element) {
document.getElementById("imgModal").src = element.src;
document.getElementById("myModal").style.display = "flex";
}
</script>
</body>
</html>
.doNotScroll{
overflow: hidden;
height: 100%;
}
....
$(document).on('click', '.img-rounded', function(){
$('BODY, HTML').addClass('doNotScroll');
})
...
$(document).on('click', '#myModal', function(){
$('BODY, HTML').removeClass('doNotScroll');
})
disable scrolling Body:
BODY,HTML{
overflow: hidden;
height: 100%;
}
For dark Background place a div directly in body:
DIV.cover.inactiv{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 10 // play with it
}
DIV.cover.activ{
display: block;
}
Related
In the snippet provided, I have 3 sections: The first contains a single image, the second has two images, and the last one has no images.
I would like for the .image class within the first section to be 100% in width only if there is no other .image div present.
However, once there is another .image div present, (as shown in the second section), I would like it to default back to 50% width.
How should I execute this?
$(function() {
$('.container > .section').each(function() {
if (!$(this).find(".image").length) {
$(this).before('<div class="noimage">No images to display.</div>');
}
});
});
body {
font-size: 16px;
margin: 0;
padding: 0;
border: 0;
}
h1 {
font-size: 22px;
margin-top: 0;
margin-bottom: 10px;
}
.container {
box-sizing: border-box;
overflow: auto;
}
.image {
float: left;
display: block;
width: 50%;
line-height: 0;
}
.image img {
width: 100%;
height: auto;
}
.container {
margin: 0 auto;
max-width: 300px;
border: 1px solid lightgrey;
padding: 10px;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 1 Image -->
<div class="container">
<h1>Section With 1 Image:</h1>
<div class="section">
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/pear-flat.png"></div>
</div>
</div>
<!-- 2 Images -->
<div class="container">
<h1>Section With 2 Images:</h1>
<div class="section">
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/ice-cream-cone-flat.png"></div>
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/orange-flat.png"></div>
</div>
</div>
<!-- No Images -->
<div class="container">
<h1>Section With No Images:</h1>
<div class="section"></div>
</div>
You could display the section as a table and the div.image as a table-cell. Then the image would resize according to the number of "cell's" (div.image's) present.
div.container{
display: 100%;
}
div.section{
width: 100%;
display: table;
}
div.section div.image{
display: table-cell;
}
div.section div.image img{
width: 100%;
height: auto;
}
Here's a JSFiddle:
https://jsfiddle.net/ColiniloC/Lnnkpx6L/
Figured out a simpler solution with flexbox:
$(function() {
$('.container > .section').each(function() {
if (!$(this).find(".image").length) {
$(this).before('<div class="noimage">No images to display.</div>');
}
});
});
body {
font-size: 16px;
margin: 0;
padding: 0;
border: 0;
}
h1 {
font-size: 22px;
margin-top: 0;
margin-bottom: 10px;
}
.container {
box-sizing: border-box;
margin: 0 auto;
max-width: 300px;
border: 1px solid lightgrey;
padding: 10px;
display: block;
}
.section {
display: flex;
flex-wrap: wrap;
overflow: hidden;
align-items: center;
margin: 0 -5px;
}
.image {
flex: 1 1 50%;
line-height: 0;
width: 100%;
padding: 0 5px;
box-sizing: border-box;
}
.container .image:nth-of-type(n+3) {
padding-top: 10px;
}
.image img {
width: 100%;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 1 Image -->
<div class="container">
<h1>Section With 1 Image:</h1>
<div class="section">
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/pear-flat.png"></div>
</div>
</div>
<!-- 2 Images -->
<div class="container">
<h1>Section With 2 Images:</h1>
<div class="section">
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/pear-flat.png"></div>
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/ice-cream-cone-flat.png"></div>
</div>
</div>
<!-- 4 Images -->
<div class="container">
<h1>Section With 4 Images:</h1>
<div class="section">
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/pear-flat.png"></div>
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/ice-cream-cone-flat.png"></div>
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/orange-flat.png"></div>
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/burger-flat.png"></div>
</div>
</div>
<!-- No Images -->
<div class="container">
<h1>Section With No Images:</h1>
<div class="section"></div>
</div>
Currently I have a javascript search bar on my site to search images based on a div classed text which acts as their name.
However I plan on having several hundred images which would not be suitable for one page, which is why I added pages to my site, which brings me to my question.
How would I allow for a user regardless of what page they are on to use the search bar to search images from other pages and have that data displayed on their current page
I would like to try and do this without setting up a back end database which is where I feel this is headed, if anyone has any solutions please shoot them my way.
Below will be the html and css of my index as the second page is identical to the first other than the images. All my images are locally hosted, so if you want a running example on codepen, just comment and I will set that up.
<script>
$("#myinput").keyup(function() {
var val = $.trim(this.value);
if (val === "")
$('img').show();
else {
$('img').hide();
val = val.split(" ").join("\\ ");
console.log(val)
$("img[alt*=" + val + " i]").show();
}
});
$(".img").wrap('<div class="alt-wrap"/>');
$(".img").each(function() {
$(this).after('<p class="alt">' + $(this).attr('alt') + '</p>');
})
</script>
/* Website Title */
h1 {
color: red;
}
/* Website desciption */
h2 {
color:red;
}
/* Text */
p {
font-family: Arial;
}
/* Website body */
body {
background-color: grey;
}
/*Navigation Bar */
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: black;
}
li {
float: left;
border-right: 1px solid white;
padding: 10px;
}
li a {
display: block;
color: white;
text-align: center;
padding-right: 10px;
padding-bottom: 5px;
text-decoration: none;
text-transform: upercase;
font-size: 30px;
}
li:last-child {
border-right: none;
}
ul li:hover:not(.active) {
background-color: #555;
color: white;
}
.active {
background-color: red;
}
/* Search Bar */
input[type=text] {
width: 200px;
height: 50px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
font-size: 30px;
}
/* Cool code but not needed atm
input[type=text]:focus {
width: 100%;
float: left;
}
*/
/* Keeps images inline */
.alt-wrap {
display: block;
position: relative;
margin: 20px;
color: whitesmoke;
border: 1px solid mediumorchid;
}
/*Puts overlay on images */
.alt-wrap p.alt {
position: absolute;
opacity: 0; /* hide initially */
left: 0; right: 0; bottom: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 22px;
background-color: rgba(0,0,0,0.8);
transition: all 300ms ease;
transition-delay: 300ms;
}
.alt-wrap:hover > p.alt {
opacity: 1;
transition-delay: 0s;
}
.imgContainer{
float:left;
}
img {
width: 200px !important;
}
body {
background: white !important;
}
.imgContainer {
position: relative;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.imgContainer:hover .overlay {
width: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.dl {
margin-top: 400px;
}
/* For links for the pages */
.pagination a {
color: black;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
/* Styling current page buttons */
.pagination a.active {
background-color: #4CAF50;
color: white;
}
/* Styling on mouse-over background color for page buttons */
.pagination a:hover:not(.active) {background-color: #ddd;}
/*Forcing footer to the bottom*/
html, body, #wrap { height: 100%; }
body > #wrap { height: auto; min-height: 100%;}
#main { padding-bottom: 10px; } /* Must equal the height of the footer */
#footer {
position: relative;
margin-top: -10px; /*Must equal negative value of the footer height */
height: 10px;
clear: both;
padding-top: 20px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* End of forcing footer to the bottom*/
<html>
<title>Cryptos Explained</title>
<head>
<!-- Links to my CSS document -->
<link href="style.css" type="text/css" rel="stylesheet" />
<!-- My main heading -->
<h1 align=center>Cryptos Explained</h1>
<!-- My Sub-heading -->
<h2 align=center>Explainations, Prices, WhitePapers and more</h2>
<!-- Allows me to have jquery code at the bottom of the page -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Kind of makes it mobile friendly -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<header>
<!-- Navigation bar -->
<ul>
<li class="active">Home</li>
<li>Vocabulary</li>
<input type="text" id="myinput" name="search" placeholder="Search..." style="border-radius: 4px;">
</ul>
</header><br>
<body>
<!--Lots of Div classes so I can seperate the main and the footer -->
<div id="wrap">
<div id="main" class="clearfix">
<!-- All my images -->
<div class="image123">
<div class="imgContainer">
<img src="img/btc.png" alt="Bitcoin"><div class="overlay"><div class="text">Bitcoin</div></div>
</div>
<div class="imgContainer">
<img src="img/ethereum.png" alt="Ethereum"><div class="overlay"><div class="text">Ethereum</div></div>
</div>
<div class="imgContainer">
<img src="img/ripple.png" alt="Ripple"><div class="overlay"><div class="text">Ripple</div></div>
</div>
<div class="imgContainer">
<img src="img/Bitcoin_Cash.png" alt="Bitcoin Cash"><div class="overlay"><div class="text">Bitcoin Cash</div></div>
</div>
<div class="imgContainer">
<img src="img/ada.png" alt="Cardano"><div class="overlay"><div class="text">Cardano</div></div>
</div>
<div class="imgContainer">
<img src="img/NEM.png" alt="NEM"> <div class="overlay"><div class="text">NEM</div></div>
</div>
<div class="imgContainer">
<img src="img/Litecoin.png" alt="LiteCoin"><div class="overlay"><div class="text">LiteCoin</div></div>
</div>
<div class="imgContainer">
<img src="img/stellar.png" alt="Stellar Lumens"><div class="overlay"><div class="text">Stellar Lumens</div></div>
</div>
<div class="imgContainer">
<img src="img/iota.png" alt="IOTA"><div class="overlay"><div class="text">IOTA</div></div>
</div>
<div class="imgContainer">
<img src="img/dash.png" alt="Dash"><div class="overlay"><div class="text">Dash</div></div>
</div>
<div class="imgContainer">
<img src="img/neo.png" alt="NEO"><div class="overlay"><div class="text">NEO</div></div>
</div>
<div class="imgContainer">
<img src="img/tron.png" alt="Tron"><div class="overlay"><div class="text">Tron</div></div>
</div>
<div class="imgContainer">
<img src="img/monero.png" alt="Monero"><div class="overlay"><div class="text">Monero</div></div>
</div>
<div class="imgContainer">
<img src="img/eos.png" alt="EOS"><div class="overlay"><div class="text">EOS</div></div>
</div>
<div class="imgContainer">
<img src="img/icon.png" alt="ICON"><div class="overlay"><div class="text">ICON</div></div>
</div>
<div class="imgContainer">
<img src="img/bitcoingold.png" alt="Bitcoin Gold"><div class="overlay"><div class="text">Bitcoin Gold</div></div>
</div>
<div class="imgContainer">
<img src="img/qtum.svg" alt="QTUM"><div class="overlay"><div class="text">QTUM</div></div>
</div>
<div class="imgContainer">
<img src="img/ethereum_classic.png" alt="Ethereum Classic"><div class="overlay"><div class="text">Ethereum Classic</div></div>
</div>
<div class="imgContainer">
<img src="img/raiblocks.png" alt="RaiBlocks"><div class="overlay"><div class="text">RaiBlocks</div></div>
</div>
<div class="imgContainer">
<img src="img/lisk.png" alt="Lisk"><div class="overlay"><div class="text">Lisk</div></div>
</div>
<div class="imgContainer">
<img src="img/verge.png" alt="Verge"><div class="overlay"><div class="text">Verge</div></div>
</div>
</div>
<!-- Pages -->
<div id="footer">
<div class="pagination" align="center">
«
<a class="active" href="#">1</a>
2
3
4
»
</div>
</div>
</div>
</body>
</html>
How do I add text in the left border of the image?
css:
.container {
position: relative;
width: 100%;
}
.summary-screen .thumbnail {
height: 100%;
width: 100%;
margin: auto;
border: 1px solid #cbcbcb;
display: block;
margin-top: 109px;
position: relative;
}
.summary-screen .primary-text {
background:lightblue;
height: 5%;
opacity: 0.5;
position: absolute;
top: 85%;
/* width: 80%; */
text-align: left;
font-size: 20px;
color: black;
}
html:
<div class="summary-screen">
<div class="container">
<div layout="row" layout-align="center">
<md-content>
<img ng-show="$ctrl.package.image" flex="85" class="thumbnail" ng-src="{{ $ctrl.package.image }}" />
</md-content>
</div>
<div layout="row" layout-align="left">
<h4 class="primary-text" flex style="text-align: left;">{{ $ctrl.package.name }}</h4>
</div>
</div>
</div>
this is how it works now ( its too much left as u can see, i want it exactly at the right place and i want that the background will be along all the pic to the right
When you wrap your text and image you're able to "stick" the text to the bottom.
HTML/CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.container_relative {
position: relative;
width: 100%;
max-width: 500px;
}
.container_relative .text {
position: absolute;
bottom: 0;
background-color: rgba(0,0,255,0.5);
width: 100%;
}
.container_relative img {
width: 100%;
display: block;
}
</style>
</head>
<body>
<div class="container_relative">
<img src="https://dummyimage.com/500x400/c9c9c9/00000">
<div class="text">
<p>Lorem Ipsum</p>
</div>
</div>
</body>
</html>
so I found this cool JQuery fader which does exactly what I wanted. The background fades, but when the transistion from image to image occurs all my other divs hide and then show basically.
I want to make it so only the background image will fade and the divs won't essentially flicker. I can produce a short video if need be.
HTML and JQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function fader() {
$("img").first().appendTo('#wrap').fadeOut(3000);
$("img").first().fadeIn(3000);
setTimeout(fader, 4200);
}
</script>
</head>
<body onLoad="fader();">
<div id="wrap">
<img src="images/Blue.png">
<img src="images/Green.png">
<img src="images/Orange.png">
<img src="images/Pink.png">
<img src="images/Purple.png">
<img src="images/Red.png">
<img src="images/Yellow.png">
<div id="wrapper">
<div id="header">
<div id="sv_title">Title</div>
<div id="sv_subtitle">Subtitle</div>
</div>
<div id="content_left">
<div id="text">
Lorem ipsum
</div>
</div>
<div id="content_right">
<div id="text">
Lorem ipsum
</div>
</div>
<div id="footer">
</div>
</div>
</div>
</body>
CSS:
html { overflow-x: hidden; overflow-y: hidden; }
img{
position:absolute;
top:0;
display:none;
width:1920px;
height:1080px;
border: none;
}
body{
margin: 0;
padding: 0;
}
#wrap {
margin: 0;
padding: 0;
}
/* End Setup */
/* Detail */
#wrapper {
height: 700px;
width: 900px;
opacity: 1.0;
bottom: 0;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
}
#header {
height: 100px;
width: 900px;
background-color: #000000;
opacity: 0.7;
}
#content_left {
height: 500px;
width: 445px;
background-color: #000000;
opacity: 0.7;
display: inline;
float: right;
margin-top: 10px;
}
#content_right {
height: 500px;
width: 445px;
background-color: #000000;
opacity: 0.7;
display: inline;
float: left;
margin-top: 10px;
}
#footer {
height: 50px;
width: 900px;
background-color: #000000;
opacity: 0.7;
position: absolute;
bottom: 0;
margin-bottom: 30px;
}
this should do the job:
function fader() {
$("#background img:first").appendTo('#background').fadeOut(3000);
$("#background img:first").fadeIn(3000);
setTimeout(fader, 4200);
}
and the fix in the html
<div id="wrap">
<span id="background">
<img src="images/Blue.png">
<img src="images/Green.png">
<img src="images/Orange.png">
<img src="images/Pink.png">
<img src="images/Purple.png">
<img src="images/Red.png">
<img src="images/Yellow.png">
</span>
<div id="wrapper">
<!-- and the rest of the markup -->
it's not tested, I'm to lazy at the moment to create a fiddle and mock your images.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
So I have a long list of <div> tags that I want to stack side by side without any vertical scrolling. I want them to stack horizontally like a slider.
An example is the parent container has a height of 500px, and there are 25 Divs that are 500x500 squares that will sit side by side and scroll horizontally.
I'm trying to create a slider that will sit at the top of a webpage and scroll continuously.
Thanks!
----- EDIT 8/24/15 #2:22pm -----
What I have so far is :
<style type="text/css">
div.table {display:table; width:100%;}
div.table-row {display:table-row;}
div.table-cell {display:table-cell; width:500px; height:500px; margin:0px 5px; background:#1996e6; color:#fff;}
</style>
<div class="table">
<div class="table-row">
<div class="table-cell">Content</div>
<div class="table-cell">Content</div>
<div class="table-cell">Content</div>
<div class="table-cell">Content</div>
<div class="table-cell">Content</div>
<div class="table-cell">Content</div>
<div class="table-cell">Content</div>
<div class="table-cell">Content</div>
</div>
</div>
Something like this?
CSS
#container {
overflow-x: scroll;
white-space: nowrap;
}
.child {
display: inline-block;
width: 500px;
height: 500px;
border: 1px solid black;
}
HTML
<div id="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
https://jsfiddle.net/0bgqgkbL/
You can play with the size of the container but all you have to do is add the images (captions optional) http://jsfiddle.net/b7so9870/
$(document).ready(function() {
$('#rotator > a.arrow.left').click(function(e) {
e.preventDefault;
var rotator = $('#rotator .images');
rotator.children('.imageHolder').first().animate({
marginLeft: "-=310px"
}, function() {
$(this).appendTo(rotator).removeAttr("style");
});
});
$('#rotator > a.arrow.right').click(function(e) {
e.preventDefault;
var rotator = $('#rotator .images');
rotator.children('.imageHolder').last().prependTo(rotator).removeAttr("style").css("margin-left", "-310px").animate({
marginLeft: "0"
});
});
});
#rotator {
width: 500px;
height: 500px;
position: relative;
overflow: hidden;
position: relative;
}
#rotator .images {
width: 100%;
position: relative;
z-index: -5;
}
#rotator a.arrow {
width: 18px;
height: 41px;
display: block;
text-indent: -50000em;
position: absolute;
top: 220px;
z-index: 50;
}
#rotator a.arrow.left {
left: 0; background-image:url("http://findicons.com/files/icons/2166/oxygen/48/arrow_left.png");
background-size: contain;
background-repeat: no-repeat;
}
#rotator a.arrow.right {
right: 0; background-image:url("http://findicons.com/files/icons/2166/oxygen/48/arrow_right.png");
background-size: contain;
background-repeat: no-repeat;
}
#rotator .images .imageHolder {
width: 500px;
float: left;
height: 500px;
position: relative;
}
#rotator .images .imageHolder span {
width: 480px;
margin: 10px;
color: #FFF;
font-size: 18px;
position: absolute;
top: 0;
left: 0;
z-index: -3;
}
#rotator .images .imageHolder img {
width: 500px;
height: 500px;
position: absolute;
display: block;
top: 0;
left: 0;
z-index: -4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
<div id="rotator">
<div class="images">
<div class="imageHolder">
<span>Daisies</span>
<img src="http://www.rachelgallen.com/images/daisies.jpg" alt="" />
</div>
<div class="imageHolder">
<span>Whole choir</span>
<img src="http://www.musicmatters.ie/images/bara2.jpg" />
</div>
<div class="imageHolder">
<span>Choir</span>
<img src="http://www.musicmatters.ie/images/bara4.jpg" alt="" />
</div>
</div>
<a href="#" class="arrow right">
<img src="http://findicons.com/files/icons/2166/oxygen/48/arrow_right.png">
</a>
</div>
</body>