i have created a jquery carousel, which has only a next/prev functionality, everything is working fine in Chrome whereas there are problems in safari. Thus the images that should be hidden in the slider are appearing at the bottom (visually hidden, i have checked with firebug).
This happens only in Safari.
<div class="slider">
<a class="prev-arrow arrow"></a>
<div class="image-container">
<img alt="" src="http://bit.ly/1Icor0I" class="active">
<img alt="" src="http://bit.ly/1Ubvzly">
<img alt="" src="http://bit.ly/1KDjkg6">
<img alt="" src="http://smu.gs/1IwVgJp">
<img alt="" src="http://bit.ly/1JV31pa">
<img alt="" src="http://bit.ly/1eFfcNZ">
<img alt="" src="http://bit.ly/1DdSEjq">
<img alt="" src="http://bit.ly/1SQshBK">
<img alt="" src="http://bit.ly/1LUnGxU">
<img alt="" src="http://bit.ly/1fO17ic">
<img alt="" src="http://bit.ly/1ha0UHb">
<img alt="" src="http://bit.ly/1IOce80">
<img alt="" src="http://bit.ly/1gsBwwf">
<img alt="" src="http://bit.ly/1LUnHBZ">
</div>
<a class="next-arrow arrow"></a>
</div>
$(document).on("click", ".prev-arrow", function () {
var imageContainer = $(this).next();
imageContainer.animate({"scrollLeft":imageContainer.scrollLeft() - 300}, 200);
});
$(document).on("click", ".next-arrow", function () {
var imageContainer = $(this).prev();
imageContainer.animate({"scrollLeft":imageContainer.scrollLeft() + 300}, 200);
});
and css
.slider .image-container {
overflow: hidden;
width:500px;
display: inline-flex;
margin-left: 25px;
height: 120px;
}
.slider .image-container img {
display: inline-block;
width:200px;
margin-left: 2px;
}
.slider .image-container img.active {
border: 6px solid #007aff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.slider {
display: inline-block;
position: relative;
width: 800px;
}
.prev-arrow {
width: 13px;
height: 23px;
display: inline-block;
position: absolute;
margin-top: 50px;
cursor: pointer;
background-image: url("/images/agency/left-arrow.jpg");
background-color:red;
}
.next-arrow {
width: 13px;
height: 23px;
display: inline-block;
position: absolute;
margin-top: 50px;
margin-left: 15px;
cursor: pointer;
background-image: url("/images/agency/right-arrow.jpg");
background-color:red;
}
https://jsfiddle.net/zzLf1pL3/
I don't want to make many changes my HTML code. Because it will make me to re-write a lot of other stuff.
Thanks for help!
Related
How do I add a previous and next function on a vertical carousel that is also compatible with Squarespace? I am trying to model a carousel around the following code I found from codepen
When I add more images to the carousel, I am unable to scroll down. Can someone help in showing me how I can add this functionality please? Thank you in advance!
Below is the code:
HTML
<div class="wrapper">
<ul class="list-reset">
<li class="active">
<span>26 JAN</span>
<a>Great win for the club</a>
<img src="https://images.unsplash.com/photo-1420316078344-6149cb82b2c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
alt="">
</li>
<li>
<span>22 JAN</span>
<a>Can they be caught?</a>
<img src="https://images.unsplash.com/photo-1517466787929-bc90951d0974?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="">
</li>
<li>
<span>17 JAN</span>
<a>League is nearly over</a>
<img src="https://images.unsplash.com/photo-1501386761578-eac5c94b800a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="">
</li>
<li class="active">
<span>26 JAN</span>
<a>Great win for the club</a>
<img src="https://images.unsplash.com/photo-1420316078344-6149cb82b2c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
alt="">
</li>
<li>
<span>22 JAN</span>
<a>Can they be caught?</a>
<img src="https://images.unsplash.com/photo-1517466787929-bc90951d0974?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="">
</li>
<li>
<span>17 JAN</span>
<a>League is nearly over</a>
<img src="https://images.unsplash.com/photo-1501386761578-eac5c94b800a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="">
</li>
<li class="active">
<span>26 JAN</span>
<a>Great win for the club</a>
<img src="https://images.unsplash.com/photo-1420316078344-6149cb82b2c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
alt="">
</li>
<li>
<span>22 JAN</span>
<a>Can they be caught?</a>
<img src="https://images.unsplash.com/photo-1517466787929-bc90951d0974?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="">
</li>
<li>
<span>17 JAN</span>
<a>League is nearly over</a>
<img src="https://images.unsplash.com/photo-1501386761578-eac5c94b800a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="">
</li>
</ul>
<div class="featured-image"></div>
</div>
CSS
body {
background: #f3f3f3;
color: #111;
padding: 20px;
display: flex;
place-items: center;
height: 100%;
justify-content: center;
align-items: center;
height: 90vh;
}
.wrapper {
width: 80%;
position: relative;
max-width: 100%;
overflow: hidden;
// border-radius: 3px;
box-shadow: 0 8px 32px rgba(0, 0, 0, .1)
}
.list-reset {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
width: calc(30% - 4px);
min-height: 350px;
height: 70vh;
flex-direction: column;
border: 2px solid #fff;
li {
padding: 20px;
border-bottom: 2px solid #fff;
transition: all 600ms ease;
cursor: pointer;
&:hover {
background: #f9f9f9;
}
img {
transition: all 600ms ease;
opacity: 0;
transform: translatey(10px);
transform-origin: bottom;
}
a {
display: block;
margin-top: 4px;
}
span {
font-size: 0.7rem;
opacity: 0.7;
}
img {
position: absolute;
top: 0;
right: 0;
width: 70%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.active {
z-index: 999;
background: #fff;
a {
color: #548AF7;
}
img {
opacity: 1;
transform: translatey(0);
}
}
}
Javascript
$('.list-reset li').on('click', function() {
$('.list-reset li').removeClass('active')
$(this).addClass('active')
})
You could just add:
.list-reset{
overflow: auto;
}
So you can scroll down the list.
I'm aware it has been months so you probably worked this out, but I'll leave this here just in case.
https://www.quackit.com/html/codes/html_scroll_box.cfm
I need your help. When I fillter my image gallery and choose image that is on the second, third ... etc position, image is static, doesn't change position to the first from the left dynamically. ( see screen )
My code:
product_gallery.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style_gallery.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/gallery/js/gallery_button.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<div class="logo">Example Page</div>
<body>
<div class="nav_buttons">
<ul class="tabs">
<a data-filter=".group-1" href="#" class="group_link">Group 1</a>
<a data-filter=".group-2" href="#" class="group_link">Group 2</a>
<a data-filter=".group-3" href="#" class="group_link">Group 3</a>
<a data-filter=".group-4" href="#" class="group_link">Group 4</a>
<a data-filter=".group-5" href="#" class="group_link">Group 5</a>
<a data-filter=".group-6" href="#" class="group_link">Group 6</a>
<a data-filter=".group-7" href="#" class="group_link">Group 7</a>
<a data-filter=".group-8" href="#" class="group_link">Group 8</a>
</ul>
</div>
<div class="thumbnails grid" id="portfolio">
<img src="gallery/M01.jpg" alt="" class="group-1">
<img src="gallery/M01.jpg" alt="" class="group-2">
<img src="gallery/M01.jpg" alt="" class="group-3">
<img src="gallery/M01.jpg" alt="" class="group-4">
<img src="gallery/M01.jpg" alt="" class="group-5">
<img src="gallery/M01.jpg" alt="" class="group-6">
<img src="gallery/M01.jpg" alt="" class="group-7">
<img src="gallery/M01.jpg" alt="" class="group-8">
<img src="gallery/M01.jpg" alt="" class="group-1">
<img src="gallery/M01.jpg" alt="" class="group-2">
<img src="gallery/M01.jpg" alt="" class="group-3">
<img src="gallery/M01.jpg" alt="" class="group-4">
<img src="gallery/M01.jpg" alt="" class="group-5">
<img src="gallery/M01.jpg" alt="" class="group-6">
<img src="gallery/M01.jpg" alt="" class="group-7">
<img src="gallery/M01.jpg" alt="" class="group-8">
<img src="gallery/M01.jpg" alt="" class="group-1">
<img src="gallery/M01.jpg" alt="" class="group-2">
<img src="gallery/M01.jpg" alt="" class="group-3">
<img src="gallery/M01.jpg" alt="" class="group-4">
</div>
</body>
</html>
style_gallery.css
#font-face {font-family: "ISOCT3"; src: url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.eot"); src: url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.eot?#iefix") format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.woff2") format("woff2"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.woff") format("woff"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.ttf") format("truetype"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.svg#ISOCT3") format("svg"); }
body {
}
/** RESET **/
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
/** THUMBNAILS GLOBALS **/
.thumbnails {
display: flex;
flex-wrap: wrap;
}
.thumbnails a {
height: 300px;
margin: 2px;
border-radius: 2px;
overflow: hidden;
}
.thumbnails img {
height: 100%;
object-fit: cover;
transition: transform .3s;
}
.thumbnails a:hover img {
transform: scale(1.05);
}
/** THUMBNAILS GRID **/
.thumbnails.grid a {
width: calc(25% - 4px);
}
.thumbnails.grid a.double{
width: calc(50% - 4px);
}
.thumbnails.grid img {
width: 100%;
}
/** RESPONSIVENESS **/
#media (max-width: 1500px) {
.thumbnails.grid a {
width: calc(33.33% - 4px);
}
}
#media (max-width: 1000px) {
.thumbnails.grid a {
width: calc(50% - 4px);
}
.thumbnails.grid a.double{
width: calc(100% - 4px);
}
}
#media (max-width: 500px) {
.thumbnails.grid a {
width: calc(100% - 4px);
}
}
.logo {
font-family: ISOCT3;
font-size: 38px;
font-weight: bolder;
margin:auto;
padding-top: 28px;
padding-bottom:20px;
max-width: 80%;
color: #b8860b;
text-align: center;
letter-spacing: 3px;
}
#media only screen and (max-width: 800px) {
.logo {
font-family: ISOCT3;
font-size: 24px;
font-weight: bolder;
display: block;
color: #b8860b;
padding-top:25px;
margin: 0px auto 15px auto;
max-width: 90%;
height: auto !important;
letter-spacing: 2px;
}
}
.logo_link {
color: inherit; /* blue colors for links too */
text-decoration: inherit; /* no underline */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.group_link {
background-color: #D29990;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
text-shadow: 0 -1px 1px saturate( darken($pink, 20%), 20%);
text-decoration: none;
color: #fff;
padding: 5px 20px;
line-height: 50px;
#include border-radius(50%);
display: inline-block;
#include transition( all .2s ease-in-out);
&:hover {
background-color: saturate( $pink, 20%);
}
}
.nav_buttons{
margin: 0 auto;
padding-left: 20px;
}
gallery_button.js
$(document).ready( function () {
$('.tabs').find('a').click( function (e) {
var theFilter = $(this).data('filter');
e.preventDefault();
$('.tabs').find('a').removeClass('active');
$(this).addClass('active');
$('#portfolio').find('img').show(); $('#portfolio').find('img').not(theFilter).hide();
});
});
And here is the screen showing what's wrong :
Your code is pretty close to working, if I remove the grid class (on the thumbnails div) it would produce your desired behavior without any additional modifications, but you most likely want the grid behavior.
Even though you're hiding the img elements, their parent elements (a anchor elements) are not hidden. You should be able to hide/show the parent elements of the images (the a anchor elements) to get your desired behavior.
As you can see from the modified js below, it's just one extra .parent() call that was adjusted on your show/hide selectors:
$('#portfolio').find('img').parent().show();
$('#portfolio').find('img').not(theFilter).parent().hide();
Just one additional suggestion for future questions: typically it's a lot easier for people to answer you question + see what you're seeing by using the built in Javascript/HTML/CSS snippet tool built into StackOverflow (for images you can use something like the placeholder site I used below).
$(document).ready( function () {
$('.tabs').find('a').click( function (e) {
var theFilter = $(this).data('filter');
e.preventDefault();
$('.tabs').find('a').removeClass('active');
$(this).addClass('active');
$('#portfolio').find('img').parent().show();
$('#portfolio').find('img').not(theFilter).parent().hide();
});
});
#font-face {
font-family: "ISOCT3";
src: url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.eot");
src: url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.eot?#iefix") format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.woff2") format("woff2"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.woff") format("woff"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.ttf") format("truetype"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.svg#ISOCT3") format("svg");
}
body {}
/** RESET **/
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
/** THUMBNAILS GLOBALS **/
.thumbnails {
display: flex;
flex-wrap: wrap;
}
.thumbnails a {
height: 300px;
margin: 2px;
border-radius: 2px;
overflow: hidden;
}
.thumbnails img {
height: 100%;
object-fit: cover;
transition: transform .3s;
}
.thumbnails a:hover img {
transform: scale(1.05);
}
/** THUMBNAILS GRID **/
.thumbnails.grid a {
width: calc(25% - 4px);
}
.thumbnails.grid a.double {
width: calc(50% - 4px);
}
.thumbnails.grid img {
width: 100%;
}
/** RESPONSIVENESS **/
#media (max-width: 1500px) {
.thumbnails.grid a {
width: calc(33.33% - 4px);
}
}
#media (max-width: 1000px) {
.thumbnails.grid a {
width: calc(50% - 4px);
}
.thumbnails.grid a.double {
width: calc(100% - 4px);
}
}
#media (max-width: 500px) {
.thumbnails.grid a {
width: calc(100% - 4px);
}
}
.logo {
font-family: ISOCT3;
font-size: 38px;
font-weight: bolder;
margin: auto;
padding-top: 28px;
padding-bottom: 20px;
max-width: 80%;
color: #b8860b;
text-align: center;
letter-spacing: 3px;
}
#media only screen and (max-width: 800px) {
.logo {
font-family: ISOCT3;
font-size: 24px;
font-weight: bolder;
display: block;
color: #b8860b;
padding-top: 25px;
margin: 0px auto 15px auto;
max-width: 90%;
height: auto !important;
letter-spacing: 2px;
}
}
.logo_link {
color: inherit;
/* blue colors for links too */
text-decoration: inherit;
/* no underline */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.group_link {
background-color: #D29990;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
text-shadow: 0 -1px 1px saturate(darken($pink, 20%), 20%);
text-decoration: none;
color: #fff;
padding: 5px 20px;
line-height: 50px;
#include border-radius(50%);
display: inline-block;
#include transition(all .2s ease-in-out);
&:hover {
background-color: saturate($pink, 20%);
}
}
.nav_buttons {
margin: 0 auto;
padding-left: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style_gallery.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<div class="logo">Example Page</div>
<body>
<div class="nav_buttons">
<ul class="tabs">
<a data-filter=".group-1" href="#" class="group_link">Group 1</a>
<a data-filter=".group-2" href="#" class="group_link">Group 2</a>
<a data-filter=".group-3" href="#" class="group_link">Group 3</a>
<a data-filter=".group-4" href="#" class="group_link">Group 4</a>
<a data-filter=".group-5" href="#" class="group_link">Group 5</a>
<a data-filter=".group-6" href="#" class="group_link">Group 6</a>
<a data-filter=".group-7" href="#" class="group_link">Group 7</a>
<a data-filter=".group-8" href="#" class="group_link">Group 8</a>
</ul>
</div>
<div class="thumbnails grid" id="portfolio">
<img src="https://via.placeholder.com/150" alt="" class="group-1">
<img src="https://via.placeholder.com/150" alt="" class="group-2">
<img src="https://via.placeholder.com/150" alt="" class="group-3">
<img src="https://via.placeholder.com/150" alt="" class="group-4">
<img src="https://via.placeholder.com/150" alt="" class="group-5">
<img src="https://via.placeholder.com/150" alt="" class="group-6">
<img src="https://via.placeholder.com/150" alt="" class="group-7">
<img src="https://via.placeholder.com/150" alt="" class="group-8">
<img src="https://via.placeholder.com/150" alt="" class="group-1">
<img src="https://via.placeholder.com/150" alt="" class="group-2">
<img src="https://via.placeholder.com/150" alt="" class="group-3">
<img src="https://via.placeholder.com/150" alt="" class="group-4">
<img src="https://via.placeholder.com/150" alt="" class="group-5">
<img src="https://via.placeholder.com/150" alt="" class="group-6">
<img src="https://via.placeholder.com/150" alt="" class="group-7">
<img src="https://via.placeholder.com/150" alt="" class="group-8">
<img src="https://via.placeholder.com/150" alt="" class="group-1">
<img src="https://via.placeholder.com/150" alt="" class="group-2">
<img src="https://via.placeholder.com/150" alt="" class="group-3">
<img src="https://via.placeholder.com/150" alt="" class="group-4">
</div>
</body>
</html>
I'm currently working on a little photo album. My plan is if I click the little thumbnail image a border should appear and stay until I click another image. In other words: The hover should stay active when I clicked it.
Here is my Code:
.images {
float: left;
margin-right: 10px;
border: 1px solid silver;
width: 100px;
height: 100px;
overflow: hidden;
margin-bottom: 50px;
border: 4px solid transparent;
}
.images img {
height: 100px;
width: auto;
}
.images:hover,
.images:target {
border: 4px solid #009EE0;
}
.table {
width: 40%;
height: 100%;
border-right: 1px solid silver;
float: left;
}
<div class="table">
<div class="images" id="image_first">
<img src="http://budapesttimes.hu/wp-content/themes/newsroom14/img/placeholder.png" alt="DK_2014_MFK_Radtour_0168.jpg, 241kB" title="DK 2014 MFK Radtour 0168" height="auto" width="300">
</div>
<div class="images">
<img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png" alt="DK_2014_MFK_Radtour_0168.jpg, 241kB" title="DK 2014 MFK Radtour 0168" height="auto" width="300">
</div>
</div>
Hope you can help me!
Thanks in advance, jan
Use :focus and give tabindex="1" attribute.
.images {
float: left;
margin-right: 10px;
border: 1px solid silver;
width: 100px;
height: 100px;
overflow: hidden;
margin-bottom: 50px;
border: 4px solid transparent;
}
.images img {
height: 100px;
width: auto;
}
.images:hover,
.images:active,
.images:focus,
.images:target {
border: 4px solid #009EE0;
}
.table {
width: 40%;
height: 100%;
border-right: 1px solid silver;
float: left;
}
<div class="table">
<div class="images" id="image_first" tabindex="1">
<img src="http://budapesttimes.hu/wp-content/themes/newsroom14/img/placeholder.png" alt="DK_2014_MFK_Radtour_0168.jpg, 241kB" title="DK 2014 MFK Radtour 0168" height="auto" width="300">
</div>
<div class="images" tabindex="1">
<img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png" alt="DK_2014_MFK_Radtour_0168.jpg, 241kB" title="DK 2014 MFK Radtour 0168" height="auto" width="300">
</div>
</div>
Update: Thanks to Ivan Karaman for pointing this out. One thing I noticed is, you are using .images as a <div>. While this may perfectly work, it is always better to use <a> for generating the #hash-values, by giving them in a link. So, it would be better if you replace the below code:
<div class="images" id="image_first" tabindex="1">
With this:
<a class="images" id="image_first">
And also you don't need the "hack" tabindex="1" as well, as links always have the :target, :focus, and :active states by default. :)
.images {
float: left;
margin-right: 10px;
border: 1px solid silver;
width: 100px;
height: 100px;
overflow: hidden;
margin-bottom: 50px;
border: 4px solid transparent;
}
.images img {
height: 100px;
width: auto;
}
.images:hover,
.images:target {
border: 4px solid #009EE0;
}
.table {
width: 40%;
height: 100%;
border-right: 1px solid silver;
float: left;
}
<div class="table">
<a class="images" href="#image_first" id="image_first">
<img src="http://budapesttimes.hu/wp-content/themes/newsroom14/img/placeholder.png" alt="DK_2014_MFK_Radtour_0168.jpg, 241kB" title="DK 2014 MFK Radtour 0168" height="auto" width="300">
</a>
<a class="images" href="#image_second" id="image_second">
<img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png" alt="DK_2014_MFK_Radtour_0168.jpg, 241kB" title="DK 2014 MFK Radtour 0168" height="auto" width="300">
</div>
</a>
To do this, you should use jQuery.
Try a little code of jQuery.
$(document).ready(function(){
$("img").click(function(){
$(this).css({'border':'3px solid gren'});
});
})
active and focus might do the trick
.images:hover,
.images:focus,
.images:target
{
border: 4px solid #009EE0;
}
It seems you can use :focus on div, but maybe not :active
https://css-tricks.com/almanac/selectors/f/focus/
$('img').click(function() {
$('.selected').removeClass('selected');
$(this).addClass('selected');
});
img {
border: solid 1px red;
margin: 10px;
}
.selected {
background-color: yellow;
box-shadow: 0px 12px 22px 1px #333;
}
.image-rounded {
border-radius: 6px;
width: 140px;
height: 140px;
}
.well {
width: 100%;
}
.scroll {
width: 100%;
overflow: auto;
white-space: nowrap;
}
.scroll a {
display: inline-block;
width: 140px;
margin: 10px;
}
.scroll a img {
width: 100%;
}
.scroll a:focus {
border: 1px solid yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="well">
<div class="scroll">
<img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
<img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
<img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
<img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
<img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
<img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
<img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
<img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
</div>
</div>
I have multiple images in a page that is select-able by user. User can select any image by simply click on that image. How can i highlight that image after selection.so how can i highlight selected image using css or jquery
I am getting a yellow outline when i am clicking on the image. And on click image should be shown selected with a shadow till i shift to next image.
Use toggleClass('className') function to highlight the selected images. Below is the working version.
$('img').click(function() {
//New Code replaced here
$(this).toggleClass('selected');
});
img {
border: solid 1px red;
margin: 10px;
}
.selected {
background-color: yellow;
box-shadow: 0px 12px 22px 1px #333;
}
.image-rounded {
border-radius: 6px;
width: 140px;
height: 140px;
}
.well {
width: 100%;
}
.scroll {
width: 100%;
overflow: auto;
white-space: nowrap;
}
.scroll a {
display: inline-block;
width: 140px;
margin: 10px;
}
.scroll a img {
width: 100%;
}
.scroll a:focus {
border: 1px solid yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="well">
<div class="scroll">
<img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
<img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
<img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
<img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
<img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
<img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
<img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
<img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
</div>
</div>
At my home page in slider code i want to fix width for first image. Is it possible from css or html. Because i tried but not work. My current slider css code are bellow.
#slider {
background-attachment: scroll;
background-color: #FFFFFF;
background-image: url("http://silverharmony.in/wp-content/uploads/2012/10/Slider_bg.png");
background-position: 50% 0;
background-repeat: repeat;
display: block;
float: left;
width: 100%;
}
.inner, .wrapper {
display: block;
height: 100%;
margin: 0 auto;
position: relative;
width: 960px;
z-index: 0;
}
ul.kwicks {
background-color: #333333;
border-radius: 3px 3px 3px 3px;
list-style: none outside none;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
}
ul.kwicks li {
background: url("../images/icons/ajax_loader.gif") no-repeat scroll 50% 50% transparent;
display: block;
overflow: hidden;
padding: 0;
}
.kw_img {
display: block;
}
.kw_img img {
vertical-align: middle;
}
.kw_shadow {
background: url("../images/icons/overlay.png") repeat-y scroll 0 0 transparent;
border-right: 1px solid rgba(255, 255, 255, 0.3);
height: 100%;
position: absolute;
right: 0;
width: 40px;
z-index: 2;
}
.last .kw_shadow {
background: none repeat scroll 0 0 transparent !important;
border-right: 0 none;
}
My current Slider HTML Code Bellow.
<div id="slider">
<div class="inner">
<ul style="width:960px; height:400px; margin:15px 0;" data-width="960" data-max="660" class="kwicks" id="kwicks-1">
<li class="kwick" style="left: 0px; width: 192px; margin: 0px; position: absolute;">
<div class="kw_shadow"></div>
<div class="kw_img">
<img width="960" height="400" alt="" src="http://silverharmony.in/wp-content/themes/cstardesign/cache/timthumb.php?src=http://silverharmony.in/wp-content/uploads/2012/10/2.jpg&h=400&w=960&zc=1&q=100">
</div>
</li>
<li class="kwick" style="left: 192px; width: 192px; margin: 0px; position: absolute;">
<div class="kw_shadow"></div>
<div class="kw_img">
<img width="960" height="400" alt="" src="http://silverharmony.in/wp-content/themes/cstardesign/cache/timthumb.php?src=http://silverharmony.in/wp-content/uploads/2012/10/Image-2.jpg&h=400&w=960&zc=1&q=100">
</div>
</li>
<li class="kwick" style="left: 384px; width: 192px; margin: 0px; position: absolute;">
<div class="kw_shadow"></div>
<div class="kw_img">
<img width="960" height="400" alt="" src="http://silverharmony.in/wp-content/themes/cstardesign/cache/timthumb.php?src=http://silverharmony.in/wp-content/uploads/2012/10/3.png&h=400&w=960&zc=1&q=100">
</div>
</li>
<li class="kwick" style="left: 576px; width: 192px; margin: 0px; position: absolute;">
<div class="kw_shadow"></div>
<div class="kw_img">
<img width="960" height="400" alt="" src="http://silverharmony.in/wp-content/themes/cstardesign/cache/timthumb.php?src=http://silverharmony.in/wp-content/uploads/2012/10/Image-1.jpg&h=400&w=960&zc=1&q=100">
</div>
</li>
<li class="kwick last" style="right: 0px; width: 192px; margin: 0px; position: absolute;">
<div class="kw_shadow"></div>
<div class="kw_img"><img width="960" height="400" alt="" src="http://silverharmony.in/wp-content/themes/cstardesign/cache/timthumb.php?src=http://silverharmony.in/wp-content/uploads/2012/10/1.jpg&h=400&w=960&zc=1&q=100"></div>
</li>
</ul>
</div>
Currently my slider looking like this. http://silverharmony.in/
And i actual want to like below link.
http://silverharmony.in/wp-content/uploads/2012/10/slider-screenshoot.png
Slider is using Kwicks jQuery plugin. I added first li item .kwicks-selected class to achive what you are looking for.
Example here jsFiddle