I have some movies I want to display on my website within a horizontal, scrollable div.
Because I removed the scrollbar, the user can not scroll anymore, which is why I added two buttons. One button to move right and one button to move left.
The problem is, the buttons can be pressed as often as desired. So the movies won't get displayed anymore, because of the through Javascript added margin.
How can I resolve this issue?
I want to disable the left-button, when the start is reached and I want to disable the right-button, when the end is reached.
$('#right-button').click(function() {
event.preventDefault();
$('.movie-scroll').animate({
marginLeft: "-=200px"
}, "fast");
});
$('#left-button').click(function() {
event.preventDefault();
$('.movie-scroll').animate({
marginLeft: "+=200px"
}, "fast");
});
::-webkit-scrollbar {
display: none;
}
.sc_content {
overflow-y: scroll;
}
.title_home {
font-size: 18px;
margin: 30px 0px -10px 30px;
}
.movie-scroll {
height: 300px;
white-space: nowrap;
overflow-x: scroll;
margin-right: 30px;
}
.thumbnail-movie-box {
width: 130px;
margin: 30px 0px 0px 30px;
display: inline-block;
}
.thumbnail-movie-content {
display: block;
position: relative;
}
.thumbnail-movie-poster {
width: 130px;
height: 195px;
}
.thumbnail-movie-title {
font-size: 12px;
font-weight: bold;
margin: 5px 0px 10px 0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.thumbnail-movie-year {
font-size: 12px;
margin: -5px 10px 10px 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="sc_content">
<h1 class="title_home">Movies</h1>
Left
<div class="movie-scroll">
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
</div>
Right
Fiddle: https://jsfiddle.net/zbavtpj4/
Change your javascript to the following:
var index = 0;
$('#right-button').click(function() {
event.preventDefault();
if(index <= 7){
$('.movie-scroll').animate({
marginLeft: "-=200px"
}, "fast");
index++;
}
});
$('#left-button').click(function() {
event.preventDefault();
if(index >= -2){
$('.movie-scroll').animate({
marginLeft: "+=200px"
}, "fast");
index--;
}
});
Uses an index to track position and doesn't change the margin if the index isn't in range. Boundaries are manually defined in this example. It is possible define the boundaries programmatically, but I don't have the time to do that.
Before animating, you should check .movie-scroll current margin-left.
If it's >= 0, the #left-button action shouldn't happen.
If it's bigger than .movie-scroll width, the #right-button action shouldn't happen.
This is all about width calculation and comparison.
Here is your updated Fiddle.
console.clear();
var movieWidth = $('.movie-scroll').outerWidth();
console.log(movieWidth);
var viewportWidth = $(window).outerWidth();
console.log(viewportWidth);
var moviePosterWidth = $(".thumbnail-movie-poster").outerWidth();
console.log(moviePosterWidth);
var leftBoundReached = false;
var rightBoundReached = false;
$('#right-button').click(function() {
event.preventDefault();
if(!rightBoundReached){
$('.movie-scroll').animate({
marginLeft: "-=200px"
}, "fast");
}
checkScrolling("right");
});
$('#left-button').click(function() {
event.preventDefault();
if(!leftBoundReached){
$('.movie-scroll').animate({
marginLeft: "+=200px"
}, "fast");
}
checkScrolling("left");
});
function checkScrolling(direction){
setTimeout(function(){
var scrolled = parseInt($('.movie-scroll').css("marginLeft"));
console.log(scrolled);
leftBoundReached = false;
rightBoundReached = false;
if(scrolled>viewportWidth-2*moviePosterWidth && direction=="left"){
console.log("left "+scrolled);
leftBoundReached = true;
}
if(-scrolled>=viewportWidth+movieWidth+0.10*moviePosterWidth && direction=="right"){
console.log("right "+scrolled);
rightBoundReached = true;
}
},300);
}
I left a lot console logs for you to get what is going on...
I might be super late in posting my answer, but this solution is scalable and hope works as you wish.
/* JS */
var scrollWidth = parseInt($('.movie-scroll .thumbnail-movie-box').first().next().position().left) - parseInt($('.movie-scroll .thumbnail-movie-box').first().position().left);
var noOfItems = $('.movie-scroll .thumbnail-movie-box').length;
var count = 0;
$('#right-button').click(function() {
event.preventDefault();
var movieScroll = $('.movie-scroll');
movieScroll.filter(function() {
if (count == (noOfItems - 1))
return false;
count++;
return true;
}).animate({
marginLeft: "-=" + scrollWidth + "px"
}, "fast");
});
$('#left-button').click(function() {
event.preventDefault();
var movieScroll = $('.movie-scroll');
movieScroll.filter(function() {
if (count == 0)
return false;
count--;
return true;
}).animate({
marginLeft: "+=" + scrollWidth + "px"
}, "fast");
});
/* CSS */
::-webkit-scrollbar {
display: none;
}
.sc_content {
overflow-y: scroll;
}
.title_home {
font-size: 18px;
margin: 30px 0px -10px 30px;
}
.movie-scroll {
height: 300px;
white-space: nowrap;
overflow-x: scroll;
margin-right: 30px;
}
.thumbnail-movie-box {
width: 130px;
margin: 30px 0px 0px 30px;
display: inline-block;
}
.thumbnail-movie-content {
display: block;
position: relative;
}
.thumbnail-movie-poster {
width: 130px;
height: 195px;
}
.thumbnail-movie-title {
font-size: 12px;
font-weight: bold;
margin: 5px 0px 10px 0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.thumbnail-movie-year {
font-size: 12px;
margin: -5px 10px 10px 0px;
}
<!-- HTML -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sc_content">
<h1 class="title_home">Movies</h1>
Left
<div class="movie-scroll">
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
<div class="thumbnail-movie-box">
<a href="">
<div class="thumbnail-movie-content">
<img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
</div>
</a>
<a href="">
<p class="thumbnail-movie-title">Split</p>
</a>
<p class="thumbnail-movie-year">2016</p>
</div>
</div>
Right
Related
Hello i want to select the first item in a list by default.So when i open the view i want the item Plafond sécurité sociale under Général to be selected by default.
$("#général").val($("#général a:first").selectedIndex());
<div class="col-12">
<div class="container">
<div class="row">
<div class="col-12">
<a class="mdc-list-item" style="width:100%;margin-right:3px;margin-left:3px;">
<div class="col-sm">
<div class="row" data-toggle="collapse" data-target="#général" style="cursor:pointer">
<span class="user" style="font-weight:bold">Général</span>
</div>
</div>
<div class="col-sm">
<div class="col-md-1 chevron-down" data-toggle="collapse" data-target="#général" style="float:right;margin-right:0px">
<i class="général_arrow material-icons float-right material-expand ripple" style="color: #0047FD !important;">
expand_more
</i>
</div>
</div>
</a>
</div>
</div>
</div>
<div id="général" class="collapse">
<div class="container">
<div class="row">
<div class="col-12">
<a class="mdc-list-item" tauxPlafonds="PSS" data-toggle="tooltip" data-placement="top" style="cursor:pointer;">
Plafond sécurité sociale
</a>
<a class="mdc-list-item" tauxPlafonds="SMIC" data-toggle="tooltip" data-placement="top" style="cursor:pointer;">
Smic
</a>
<a class="mdc-list-item" tauxPlafonds="CSG" data-toggle="tooltip" data-placement="top" style="cursor:pointer;">
CSG CRDS
</a>
<a class="mdc-list-item" tauxPlafonds="AGM" data-toggle="tooltip" data-placement="top" style="cursor:pointer">
Abattement gérant majoritaire
</a>
</div>
</div>
</div>
</div>
</div>
How can i add modify my function to have a good result.
Not really sure what you are asking for, but the select the item you want and add styling of your choice.
$('.mdc-list-item')[0]
$('.mdc-list-item:first-child()')[0]
$('.mdc-list-item:first')[0]
Not sure if this is what you are looking for.
$(document).ready(function() {
$("#item1").addClass("selected");
$(".list-item").click(function() {
$(".list-item").removeClass("selected");
$(this).addClass("selected");
});
});
a {
max-width: 100px;
display: block;
margin: 5px;
padding: 5px 10px;
text-align: center;
}
a,
a:hover {
color: inherit;
text-decoration: none;
}
a:hover {
background-color: #eee;
}
a.selected {
background-color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="item1" href="#" class="list-item">Item 1</a>
<a id="item2" href="#" class="list-item">Item 2</a>
<a id="item3" href="#" class="list-item">Item 3</a>
Disclaimer: I'm using the flickity-slider library to achieve the basic slideshow effect.
I have created a slideshow of various <div> elements, that all contain a picture element, a title and some content. Using the following mock up HTML structure:
.b-slider__slides {
display: flex;
flex-flow: row nowrap;
width: 100%;
overflow: hidden;
}
.b-slider__slide {
margin: 0 2.5rem;
text-align: center;
}
a {
color: #000;
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="b-slider__slides js-main-slider">
<div class="b-slider__slide">
<a href="#" class="b-slider__ref">
<picture class="b-slider__picture">
<img src="https://via.placeholder.com/350x150" alt="Couple in car">
</picture>
<span class="b-slider__date">29/01/1993</span>
<h3 class="b-slider__subtitle">Lorem ipsum</h3>
</a>
</div>
<div class="b-slider__slide">
<a href="#" class="b-slider__ref">
<picture class="b-slider__picture">
<img src="https://via.placeholder.com/350x150" alt="Couple in car">
</picture>
<span class="b-slider__date">29/01/1993</span>
<h3 class="b-slider__subtitle">Lorem ipsum</h3>
</a>
</div>
<div class="b-slider__slide">
<a href="#" class="b-slider__ref">
<picture class="b-slider__picture">
<img src="https://via.placeholder.com/350x150" alt="Couple in car">
</picture>
<span class="b-slider__date">29/01/1993</span>
<h3 class="b-slider__subtitle">Lorem ipsum</h3>
</a>
</div>
<div class="b-slider__slide">
<a href="#" class="b-slider__ref">
<picture class="b-slider__picture">
<img src="https://via.placeholder.com/350x150" alt="Couple in car">
</picture>
<span class="b-slider__date">29/01/1993</span>
<h3 class="b-slider__subtitle">Lorem ipsum</h3>
</a>
</div>
</div>
Using the flickity-slider (version 2.1.2) and jQuery, I can generate a slideshow based on this structure:
$(document).ready(() => {
const mainTicker = new Flickity('.js-main-slider', {
accessibility: true,
wrapAround: true,
prevNextButtons: true,
pageDots: false,
autoPlay: true
});
});
#import url('https://unpkg.com/flickity#2.1.2/dist/flickity.min.css');
.b-slider__slides {
width: 100%;
background: blue;
overflow: hidden;
}
.b-slider__slide {
margin: 0 2.5rem;
text-align: center;
background: red;
width: 30rem;
height: 20rem;
}
a {
display: flex;
flex-flow: column nowrap;
background: red;
color: #000;
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity#2.1.2/dist/flickity.pkgd.min.js"></script>
<div class="b-slider__slides js-main-slider">
<div class="b-slider__slide">
<a href="#" class="b-slider__ref">
<picture class="b-slider__picture">
<img src="https://via.placeholder.com/350x150">
</picture>
<span class="b-slider__date">29/01/1993</span>
<h3 class="b-slider__subtitle">Lorem ipsum</h3>
</a>
</div>
<div class="b-slider__slide">
<a href="#" class="b-slider__ref">
<picture class="b-slider__picture">
<img src="https://via.placeholder.com/350x150">
</picture>
<span class="b-slider__date">29/01/1993</span>
<h3 class="b-slider__subtitle">Lorem ipsum</h3>
</a>
</div>
<div class="b-slider__slide">
<a href="#" class="b-slider__ref">
<picture class="b-slider__picture">
<img src="https://via.placeholder.com/350x150">
</picture>
<span class="b-slider__date">29/01/1993</span>
<h3 class="b-slider__subtitle">Lorem ipsum</h3>
</a>
</div>
<div class="b-slider__slide">
<a href="#" class="b-slider__ref">
<picture class="b-slider__picture">
<img src="https://via.placeholder.com/350x150">
</picture>
<span class="b-slider__date">29/01/1993</span>
<h3 class="b-slider__subtitle">Lorem ipsum</h3>
</a>
</div>
</div>
My question is, how can I create a continuous marquee/ticker like effect using slides, that pause as soon as you hover over them?
There's been a lot of debate going on regarding this subject, the original author has chosen not to implement a functionality like this because horizontal infinite scrolling is not worth the additional complexity.
However...
After some playing around with the above code, and working on a partial solution provided by koraysels, I came up with the following (working!) snippet:
const mainTicker = new Flickity('.js-main-slider', {
accessibility: true,
resize: true,
wrapAround: true,
prevNextButtons: false,
pageDots: false,
percentPosition: true,
setGallerySize: true,
});
// Set initial position to be 0
mainTicker.x = 0;
// Start the marquee animation
play();
// Main function that 'plays' the marquee.
function play() {
// Set the decrement of position x
mainTicker.x -= 1.5;
// Settle position into the slider
mainTicker.settle(mainTicker.x);
// Set the requestId to the local variable
requestId = window.requestAnimationFrame(play);
}
// Main function to cancel the animation.
function pause() {
if(requestId) {
// Cancel the animation
window.cancelAnimationFrame(requestId)
// Reset the requestId for the next animation.
requestId = undefined;
}
}
// Pause on hover/focus
$('.js-main-slider').on('mouseenter focusin', e => {
pause();
})
// Unpause on mouse out / defocus
$('.js-main-slider').on('mouseleave', e => {
play();
})
#import url('https://unpkg.com/flickity#2.1.2/dist/flickity.min.css');
.b-slider__slides {
width: 100%;
background: blue;
overflow: hidden;
}
.b-slider__slide {
margin: 0 2.5rem;
text-align: center;
background: red;
width: 30rem;
height: 20rem;
}
a {
display: flex;
flex-flow: column nowrap;
background: red;
color: #000;
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity#2.1.2/dist/flickity.pkgd.min.js"></script>
<div class="b-slider__slides js-main-slider">
<div class="b-slider__slide">
<a href="#" class="b-slider__ref">
<picture class="b-slider__picture">
<img src="https://via.placeholder.com/350x150">
</picture>
<span class="b-slider__date">29/01/1993</span>
<h3 class="b-slider__subtitle">Lorem ipsum</h3>
</a>
</div>
<div class="b-slider__slide">
<a href="#" class="b-slider__ref">
<picture class="b-slider__picture">
<img src="https://via.placeholder.com/350x150">
</picture>
<span class="b-slider__date">29/01/1993</span>
<h3 class="b-slider__subtitle">Lorem ipsum</h3>
</a>
</div>
<div class="b-slider__slide">
<a href="#" class="b-slider__ref">
<picture class="b-slider__picture">
<img src="https://via.placeholder.com/350x150">
</picture>
<span class="b-slider__date">29/01/1993</span>
<h3 class="b-slider__subtitle">Lorem ipsum</h3>
</a>
</div>
<div class="b-slider__slide">
<a href="#" class="b-slider__ref">
<picture class="b-slider__picture">
<img src="https://via.placeholder.com/350x150">
</picture>
<span class="b-slider__date">29/01/1993</span>
<h3 class="b-slider__subtitle">Lorem ipsum</h3>
</a>
</div>
</div>
You might want to disable drag and drop if you wish to achieve a pure marquee effect, but it was entirely suitable for my use case.
This is not my script. I just copy scripts and learn something of them so I can advance in HTML knowledge. This code it works only in a part. It shows ok by part of design, but when I press arrows it won't slide to new images
<div class="swiper-container swiper-container-horizontal">
<div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-630px, 0px, 0px);"><div class="swiper-slide swiper-slide-duplicate swiper-slide-prev" data-swiper-slide-index="2" style="width: 600px; margin-right: 30px;">
<div id="images" style="margin-left:70px;">
<a onclick="location.href='fallout/'" href="fallout/">
<img src="ASSETS/img/fallout.png">
<div title="Hacking is now possible without vision!" class="caption">Fallout Version</div>
</a>
<a id="green" onclick="location.href='blue/'" href="blue/">
<img src="http://i.imgur.com/57C9mln.png">
<div class="caption">GeekTyper Blue</div>
</a>
<a onclick="location.href='writer/'" href="writer/">
<img src="ASSETS/img/writer.png">
<div title="Hacking is now possible without vision!" class="caption">Writer</div>
</a>
<br><br>
<a style="color:white;padding:20px;" href="mailto:geektyper#outlook.com">Suggest a theme</a>
</div>
</div>
<div class="swiper-slide swiper-slide-active" data-swiper-slide-index="0" style="width: 600px; margin-right: 30px;">
<div id="images" style="margin-left:70px;">
<a id="green" style="background:#bd0101;" onclick="location.href='tegnio/'" href="tegnio/">
<img src="ASSETS/img/main.png" title="Remembers your settings">
<div class="caption">Tegnio (Customizable)</div>
</a>
<a onclick="location.href='shield/'" href="shield/">
<img src="ASSETS/img/shield.png">
<div title="" class="caption">SHIELD Version</div>
</a>
<a id="green" onclick="location.href='scp/'" href="scp/">
<img src="http://i.imgur.com/bF2tc2V.jpg">
<div class="caption">SCP</div>
</a>
<a onclick="location.href='umbrella/'" href="umbrella/">
<img src="ASSETS/img/umbrella_thumb.png">
<div class="caption">Umbrella Corp</div>
</a>
<a onclick="location.href='aperture/'" href="aperture/">
<img src="http://i.imgur.com/Kb4o0uI.jpg">
<div class="caption">Aperture Science</div>
</a>
<a onclick="location.href='combine/'" href="combine/">
<img src="http://i.imgur.com/sxaHAoi.jpg">
<div class="caption">Combine</div>
</a>
<a onclick="location.href='blackmesa/'" href="blackmesa/">
<img src="http://i.imgur.com/T1pL2ib.jpg">
<div class="caption">Black Mesa</div>
</a>
<a onclick="location.href='plain/'" href="plain/">
<img src="http://i.imgur.com/RZG9ghe.png">
<div class="caption">Plain Terminal</div>
</a>
<a onclick="location.href='matrix/'" href="matrix/">
<img src="http://i.imgur.com/lHjKmQT.png">
<div class="caption">Matrix</div>
</a>
</div>
</div>
<div class="swiper-slide swiper-slide-next" data-swiper-slide-index="1" style="width: 600px; margin-right: 30px;">
<div id="images" style="margin-left:70px;">
<a onclick="location.href='dharma/'" href="dharma/">
<img src="http://i.imgur.com/QXMmQwN.png">
<div class="caption">Dharma</div>
</a>
<a onclick="location.href='tegnio/'" href="tegnio/">
<img src="http://i.imgur.com/DXB4jK7.png">
<div class="caption">Sliv</div>
</a>
<a onclick="location.href='pony/'" href="pony/">
<img src="http://i.imgur.com/bMwdWFF.png">
<div class="caption">MLP Typer</div>
</a>
<a onclick="location.href='word/'" href="word/">
<img src="http://i.imgur.com/8QWNpb4.png">
<div class="caption">Microsoft Word</div>
</a>
<a onclick="location.href='studio/'" href="studio/">
<img src="http://i.imgur.com/tTwtzQz.png">
<div class="caption">Visual Studio</div>
</a>
<a onclick="location.href='lolcode/'" href="lolcode/">
<img src="http://i.imgur.com/OzxnXFb.png">
<div class="caption">LOLCODE</div>
</a>
<a onclick="location.href='hey/'" href="hey/">
<img src="http://i.imgur.com/5Sqs6jO.png">
<div class="caption">HE-MAN</div>
</a>
<a onclick="location.href='braile/'" href="braile/">
<img src="http://i.imgur.com/vV4t9Jm.png">
<div title="" class="caption">Braile Version</div>
</a>
<a onclick="location.href='alien/'" href="alien/">
<img src="ASSETS/img/alien.png">
<div title="" class="caption">Alien Version</div>
</a>
</div>
</div>
<div class="swiper-slide" data-swiper-slide-index="2" style="width: 600px; margin-right: 30px;">
<div id="images" style="margin-left:70px;">
<a onclick="location.href='fallout/'" href="fallout/">
<img src="ASSETS/img/fallout.png">
<div title="Hacking is now possible without vision!" class="caption">Fallout Version</div>
</a>
<a id="green" onclick="location.href='blue/'" href="blue/">
<img src="http://i.imgur.com/57C9mln.png">
<div class="caption">GeekTyper Blue</div>
</a>
<a onclick="location.href='writer/'" href="writer/">
<img src="ASSETS/img/writer.png">
<div title="Hacking is now possible without vision!" class="caption">Writer</div>
</a>
<br><br>
<a style="color:white;padding:20px;" href="mailto:geektyper#outlook.com">Suggest a theme</a>
</div>
</div>
<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="0" style="width: 600px; margin-right: 30px;">
<div id="images" style="margin-left:70px;">
<a id="green" style="background:#bd0101;" onclick="location.href='tegnio/'" href="tegnio/">
<img src="ASSETS/img/main.png" title="Remembers your settings">
<div class="caption">Tegnio (Customizable)</div>
</a>
<a onclick="location.href='shield/'" href="shield/">
<img src="ASSETS/img/shield.png">
<div title="" class="caption">SHIELD Version</div>
</a>
<a id="green" onclick="location.href='scp/'" href="scp/">
<img src="http://i.imgur.com/bF2tc2V.jpg">
<div class="caption">SCP</div>
</a>
<a onclick="location.href='umbrella/'" href="umbrella/">
<img src="ASSETS/img/umbrella_thumb.png">
<div class="caption">Umbrella Corp</div>
</a>
<a onclick="location.href='aperture/'" href="aperture/">
<img src="http://i.imgur.com/Kb4o0uI.jpg">
<div class="caption">Aperture Science</div>
</a>
<a onclick="location.href='combine/'" href="combine/">
<img src="http://i.imgur.com/sxaHAoi.jpg">
<div class="caption">Combine</div>
</a>
<a onclick="location.href='blackmesa/'" href="blackmesa/">
<img src="http://i.imgur.com/T1pL2ib.jpg">
<div class="caption">Black Mesa</div>
</a>
<a onclick="location.href='plain/'" href="plain/">
<img src="http://i.imgur.com/RZG9ghe.png">
<div class="caption">Plain Terminal</div>
</a>
<a onclick="location.href='matrix/'" href="matrix/">
<img src="http://i.imgur.com/lHjKmQT.png">
<div class="caption">Matrix</div>
</a>
</div>
</div></div>
<div class="swiper-pagination swiper-pagination-clickable"><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
this is script
<script data-rocketsrc="swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
loop: true,
spaceBetween: 30
});
</script>
Always check the console!
[F12] on the keyboard
When you have errors, look for 404 (Not Found) on .js files first.
Then, you'll probaly see errors like Swiper is not defined dissapear too.
About ERR_BLOCKED_BY_CLIENT, this is due to the use of Ad Block. It isn't due to your code.
Using this script for accordion. But I can't find how to change the color for the accordionButton when the button is active.
JS
$(document).ready(function() {
$('.accordionButton').click(function() {
$('.accordionButton').removeClass('on');
$('.accordionContent').slideUp('normal');
if ($(this).next().is(':hidden') == true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
$('.accordionContent').hide();
$(".accordionContent").first().show();
});
CSS
.accordionButton {
color: #fff;
text-transform: uppercase;
font-variant: normal;
background-color: #51a429;
padding: 2px 2px 2px 5%;
cursor: pointer;
border-bottom: 5px solid #f5f5f5
}
.accordionButton:hover {
background-color: #1b3281
}
.accordionContent {
padding: 4% 5% 2% 0%
}
Thanks.
The way your accordion works is by adding the .on class to the currently open accordion tab's button. As such, I think this is what you meant:
.accordionButton.on {
background-color: yellow;
}
If you meant the moment when the button is clicked, then this will do the trick:
.accordionButton:active {
background-color: red;
}
You can see these behaviours in the snippet below.
$(document).ready(function() {
$('.accordionButton').click(function() {
$('.accordionButton').removeClass('on');
$('.accordionContent').slideUp('normal');
if ($(this).next().is(':hidden') == true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
$(".accordionButton").first().addClass('on');
$('.accordionContent').hide();
$(".accordionContent").first().show()
});
.accordionButton {
color: #fff;
text-transform: uppercase;
font-variant: normal;
background-color: #51a429;
padding: 2px 2px 2px 5%;
cursor: pointer;
border-bottom: 5px solid #f5f5f5
}
.accordionButton:hover {
background-color: #1b3281
}
.accordionButton:active {
background-color: red;
}
.accordionButton.on {
background-color: yellow;
}
.accordionContent {
padding: 4% 5% 2% 0%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="accordion-container" class="f-ms">
<div id="accordion-link-1" class="accordionButton">
<p class="f-fp f-lp">TEST</p>
</div>
<!-- end accordion-link-1 -->
<div id="accordion-1" class="accordionContent">
<div id="accordion-title-1" class="f-ms">
<h1 class="f-fp">Global deals </h1>
<p><span class="size13">Select tile for details</span>
</p>
<p class="f-lp"><span class="buttonBlue">CLICK HERE TO GO TO </span>
</p>
</div>
<!-- end accordion-title-1 -->
<div id="accordion-content-1" class="f-ms flex-container">
<a href="https://www.google.com/tombstone.png?type=thumbnail" id="102087">
<div id="accordion-1-tile-1" class="flex-grow-1 box-shadow">
<a href="">
<img id="m12" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-1-tile-1 -->
</a>
<a href="">
<div id="accordion-1-tile-2" class="flex-grow-1 box-shadow">
<a href="https://www.google.com/tombstone.png?type=thumbnail&did=101982">
<img id="m13" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-1-tile-2 -->
</a>
<a href="https://www.google.com/tombstone.png?type=thumbnail&did=101">
<div id="accordion-1-tile-3" class="flex-grow-1 box-shadow">
<a href="">
<img id="m14" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10
" alt="">
</a>
</div>
<!-- end accordion-1-tile-3 -->
</a>
</div>
<!-- end accordion-content-1 -->
</div>
<!-- end accordion-1 -->
<div id="accordion-link-2" class="accordionButton">
<p class="f-fp f-lp">TEST</p>
</div>
<!-- end accordion-link-2 -->
<div id="accordion-2" class="accordionContent">
<div id="accordion-title-2" class="f-ms">
<h1 class="f-fp">Global deals </h1>
<p><span class="size13">Select tile for details</span>
</p>
<p class="f-lp"><span class="buttonBlue">CLICK HERE TO GO TO </span>
</p>
</div>
<!-- end accordion-title-2 -->
<div id="accordion-content-2" class="f-ms flex-container">
<a href="https://www.google.com/tombstone.png?type=thumbnail" id="102087">
<div id="accordion-2-tile-1" class="flex-grow-1 box-shadow">
<a href="">
<img id="m15" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-2-tile-1 -->
</a>
<a href="">
<div id="accordion-2-tile-2" class="flex-grow-1 box-shadow">
<a href="">
<img id="m16" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-2-tile-2 -->
</a>
<a href="">
<div id="accordion-2-tile-3" class="flex-grow-1 box-shadow">
<a href="">
<img id="m17" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10
" alt="">
</a>
</div>
<!-- end accordion-2-tile-3 -->
</a>
</div>
<!-- end accordion-content-2 -->
</div>
<!-- end accordion-2 -->
<div id="accordion-link-3" class="accordionButton">
<p class="f-fp f-lp">TEST</p>
</div>
<!-- end accordion-link-3 -->
<div id="accordion-3" class="accordionContent">
<div id="accordion-title-3" class="f-ms">
<h1 class="f-fp">Global deals</h1>
<p><span class="size13">Select tile for details</span>
</p>
<p class="f-lp"><span class="buttonBlue">CLICK HERE TO GO TO </span>
</p>
</div>
<!-- end accordion-title-3 -->
<div id="accordion-content-3" class="f-ms flex-container">
<a href="">
<div id="accordion-3-tile-1" class="flex-grow-1 box-shadow">
<a href="">
<img id="m18" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-3-tile-1 -->
</a>
<a href="">
<div id="accordion-3-tile-2" class="flex-grow-1 box-shadow">
<a href="">
<img id="m19" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-3-tile-2 -->
</a>
<a href="">
<div id="accordion-3-tile-3" class="flex-grow-1 ">
<a href="">
<img id="m20" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-3-tile-3 -->
</a>
</div>
<!-- end accordion-content-3 -->
</div>
<!-- end accordion-3 -->
<div id="accordion-link-4" class="accordionButton">
<p class="f-fp f-lp">TEST</p>
</div>
<!-- end accordion-link-4 -->
<div id="accordion-4" class="accordionContent">
<div id="accordion-title-4" class="f-ms">
<h1 class="f-fp">Global deals</h1>
<p><span class="size13">Select tile for details</span>
</p>
<p class="f-lp"><span class="buttonBlue">CLICK HERE TO GO TO </span>
</p>
</div>
<!-- end accordion-title-4 -->
<div id="accordion-content-4" class="f-ms flex-container">
<a href="">
<div id="accordion-4-tile-1" class="flex-grow-1 box-shadow">
<a href="">
<img id="m21" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-4-tile-1 -->
</a>
<a href="">
<div id="accordion-4-tile-2" class="flex-grow-1 ">
<a href="">
<img id="m22" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-4-tile-2 -->
</a>
<a href="">
<div id="accordion-4-tile-3" class="flex-grow-1 box-shadow">
<a href="">
<img id="m23" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10
" alt="">
</a>
</div>
<!-- end accordion-4-tile-3 -->
</a>
</div>
<!-- end accordion-content-4 -->
</div>
<!-- end accordion-4 -->
<div id="accordion-link-5" class="accordionButton">
<p class="f-fp f-lp">TEST</p>
</div>
<!-- end accordion-link-5 -->
<div id="accordion-5" class="accordionContent">
<div id="accordion-title-5" class="f-ms">
<h1 class="f-fp">Global deals</h1>
<p><span class="size13">Select tile for details</span>
</p>
<p class="f-lp"><span class="buttonBlue">CLICK HERE TO GO TO </span>
</p>
</div>
<!-- end accordion-title-5 -->
<div id="accordion-content-5" class="f-ms flex-container">
<a href="">
<div id="accordion-5-tile-1" class="flex-grow-1 box-shadow">
<a href="">
<img id="m24" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-5-tile-1 -->
</a>
<a href="">
<div id="accordion-5-tile-2" class="flex-grow-1 box-shadow">
<a href="">
<img id="m25" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-5-tile-2 -->
</a>
<a href="">
<div id="accordion-5-tile-3" class="flex-grow-1 box-shadow">
<a href="">
<img id="m26" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-5-tile-3 -->
</a>
</div>
<!-- end accordion-content-5 -->
</div>
<!-- end accordion-5 -->
</div>
I want add following effect - got 4 thumbnails, single thumbnail = different album:
After click on single should be indicated carousel:
I don't have idea how can I put together thumbnail and carousel.
What can I use to automatic add pages with gallery albums, and management them on Bootstrap 3?
<section id="gallery">
<div class="container bg-5 text-center">
<div class="row">
<h2>Gallery</h2>
<center>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
</a>
39
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
</a>
38
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
</a>
37
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
</a>
36
</div>
</center>
</div>
<div class="row">
<div class="col-md-12">
<ul class="pagination">
<li>
«
</li>
<li class="active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
...
</li>
<li>
»
</li>
</ul>
</div>
</div>
</div>
Carousel
In this, carousel thumbnails, appear twice, on top and at the bottom of the carousel slides. I can't figure out why!! :)
<html>
<head>
<title>Stackoverflow Trials</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.css" media="screen">
<style>
h4 {
margin: 20px 10px 10px;
}
p {
margin: 10px;
}
#carousel-example-generic {
margin: 20px auto;
width: 400px;
}
#carousel-example-generic .carousel-indicators {
margin: 10px 0 0;
overflow: auto;
position: static;
text-align: left;
white-space: nowrap;
width: 100%;
}
#carousel-example-generic .carousel-indicators li {
background-color: transparent;
-webkit-border-radius: 0;
border-radius: 0;
display: inline-block;
height: auto;
margin: 0 !important;
width: auto;
}
#carousel-example-generic .carousel-indicators li img {
display: block;
opacity: 0.5;
}
#carousel-example-generic .carousel-indicators li.active img {
opacity: 1;
}
#carousel-example-generic .carousel-indicators li:hover img {
opacity: 0.75;
}
#carousel-example-generic .carousel-outer {
position: relative;
}
</style>
</head>
<body>
<section id="gallery">
<div class="container bg-5 text-center">
<div class="row">
<h2>Gallery</h2>
<center>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded thumbnail" id="thumb1" src="http://placehold.it/350x250" alt="">
</a>
39
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded thumbnail" id="thumb2" src="http://placehold.it/350x250" alt="">
</a>
38
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded thumbnail" id="thumb3" src="http://placehold.it/350x250" alt="">
</a>
37
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded thumbnail" id="thumb4" src="http://placehold.it/350x250" alt="">
</a>
36
</div>
</center>
</div>
<div class="row">
<div class="col-md-12">
<ul class="pagination">
<li>
«
</li>
<li class="active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
...
</li>
<li>
»
</li>
</ul>
</div>
</div>
</div>
</section>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class='carousel-outer'>
<!-- Wrapper for slides -->
<!-- Indicators -->
<ol class="carousel-indicators"></ol>
<!-- Wrapper for slides -->
<div class="carousel-inner"></div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<ol class='carousel-indicators'>
</ol>
</div>
<script>
$(document).ready(function() {
// create arrays of images to be displayed in each carousel for each thumbnails.
// the array name is exactly the same as thumbnail id
var thumb1 = new Array("book2.jpg","book3.jpg","book4.jpg","book5.jpg");
var thumb2 = new Array("book3.jpg","book4.jpg","book5.jpg","book2.jpg");
var thumb3 = new Array("book4.jpg","book5.jpg","book2.jpg","book3.jpg");
var thumb4 = new Array("book5.jpg","book4.jpg","book3.jpg","book2.jpg");
var $carousel = $('#carousel-example-generic .carousel-inner');
var $carouselInd = $('#carousel-example-generic .carousel-indicators');
$( ".thumbnail" ).click(function() {
var numberOfSlides = $('.item').length;
if(numberOfSlides >0) {
// remove all items from the carousel before adding the new ones to it.
$carousel.empty();
//$carouselInd.empty();
}
var m = this.id;
m = eval(m);
//alert(m.length);
for(var i=0 ; i< m.length ; i++) {
var j= i+1;
$('<div class="item"><img src="images/'+m[i]+'"><div class="carousel-caption"></div> </div>').appendTo('.carousel-inner');
$('<li data-target="#carousel-example-generic" data-slide-to="'+i+'"><img src="http://placehold.it/100x50&text=slide'+j+'" alt="" /></li>').appendTo('.carousel-indicators');
}
$('.item').first().addClass('active');
$('.carousel-indicators > li').first().addClass('active');
$('#carousel-example-generic').carousel();
});
});
</script>
</body>