I will try to explain to you, with my limited english, what I'm trying to do
I have an image gallery on my page and I've created this gallery
with cycle2 and
lightGallery
I have a filter link on my carousel (animal,sports,natural,all)
So what I want to do ?
For example: if I click animal, then only show me [data-id="animal"] div and hide another div different from [data-id="animal"]
What I have done so far ?
I've created my gallery correctly. It works very well so far and as I expect.cycle2 is working and when you click any image then it is opening on popup(lightgallery)
What I haven't done so far ?
Everything is okay until you click any category. When you choose any category, neither cycle2 or lightgallery are working..
Then, after this filtering, lightgallery must work or be generated again (I guess).
More simply what do I want?
Filterable photo/image gallery only this what I want to thing
Any Example that you can show us ?
For example this - only as a logic - but this is the only example and I want to do only using cycle2 and jquery I need improve myself and see something on jquery.
If you check my category id, name, and .item data-id name, I'm sure you will understand what I'm trying to do.
$(document).ready(function() {
function generateSlider() {
$('#myCarousel').cycle({
next: "#single-right",
log: false,
fx: 'fade',
caption: '.cycle-caption',
captionTemplate: "{{title}}",
pauseOnHover: true,
pager: "#single-pager",
pagerTemplate: "<img class='lazyload' data-src='{{exthumbimage}}'' width='60' height='60'>",
prev: "#single-left",
slides: "div[data-hidden='false']"
});
}
generateSlider();
$('#myCarousel').lightGallery({
selector: "div[data-hidden='false']",
exThumbImage: "data-exthumbimage",
loadYoutubeThumbnail: true,
youtubeThumbSize: 'default',
loadVimeoThumbnail: true,
vimeoThumbSize: 'thumbnail_medium',
});
$("#filter li").on("click", function() {
var activeId = $(this).attr("id");
if (activeId == "show-all") {
$("div").attr("data-hidden", "false");
} else {
$("div").attr("data-hidden", "true");
$("div[data-id = '" + activeId + "']").attr("data-hidden", "false");
}
$("#myCarousel").cycle("destroy");
generateSlider();
return false;
});
});
.mySlideShow {
width: 700px;
position: relative;
}
.item img {
cursor: pointer;
}
#single-pager img {
margin: 3px;
cursor: pointer;
width: 60px;
height: 60px;
}
#filter {
position: absolute;
top: 0;
right: 10%;
z-index: 100;
}
#filter li {
display: inline-block;
background: rgba(0, 0, 0, .7);
color: #FFF;
cursor: pointer;
padding: 12px;
}
.cycle-caption {
position: absolute;
bottom: 14%;
left: 0;
padding: 12px;
background: rgba(0, 0, 0, .5);
color: #FFF;
text-align: center;
width: 100%;
z-index: 100;
}
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/lightgallery/latest/css/lightgallery.css'>
<div class="mySlideShow">
<div id="myCarousel">
<div class="item" data-src="http://images.freeimages.com/images/previews/49a/massive-gear-1255802.jpg" data-exthumbimage="http://images.freeimages.com/images/previews/fa7/my-ride-1552678.jpg" data-id="animals" data-hidden="false" data-title="image 1">
<img class="lazyload" data-src="http://images.freeimages.com/images/previews/f7a/gear-1462890.jpg" />
</div>
<div class="item" data-src="http://images.freeimages.com/images/previews/7ae/autos-1194364.jpg" data-exthumbimage="http://images.freeimages.com/images/previews/5f6/kaputtes-auto-1564173.jpg" data-id="sports" data-hidden="false" data-title="image 2">
<img class="lazyload" data-src="http://images.freeimages.com/images/previews/20e/some-grill-1450817.jpg" />
</div>
<div class="item" data-src="https://vimeo.com/1084537" data-exthumbimage="http://sachinchoolur.github.io/lightGallery/static/img/thumb-v-y-2.jpg" data-id="natural" data-hidden="false" data-title="this is the video">
<img class="lazyload" data-src="http://images.freeimages.com/images/previews/c23/cat-1396828.jpg" />
</div>
</div>
<div id="single-pager">
</div>
<ul id="filter">
<li id="animals">Animals</li>
<li id="sports">Sports</li>
<li id="natural">Natural</li>
<li id="show-all">All</li>
</ul>
<div class="cycle-caption"></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js'></script>
<script src='https://cdn.jsdelivr.net/g/lightgallery#1.3.5,lg-fullscreen#1.0.1,lg-hash#1.0.1,lg-pager#1.0.1,lg-share#1.0.1,lg-thumbnail#1.0.1,lg-video#1.0.1,lg-autoplay#1.0.1'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lazysizes/3.0.0/lazysizes.min.js'></script>
<script src='https://f.vimeocdn.com/js/froogaloop2.min.js'></script>
Also, you can see my demo on codepen too
You have to specify in the CSS to make the data-hidden=true actually hidden.
div[data-hidden=true] {
display: none;
}
Related
I'm building a website that allows a user to select one of the character. When the user clicks on 'Confirm', I want the page to be routed by showing the selected image and option to go back and select other characters. I want it to be shown as follows
But for some reason, the code shows up like this:
I don't see the 'Other' button, but it only comes out with a Confirm button. Not sure how to fix it..
Here is the code:
var elementSelected = null;
var typeSelected = false;
$(document).on('click', '.image > img', function() {
$('.image > img').each(function() {
$(this).removeClass('active');
})
$(this).addClass('active');
elementSelected = $(this);
typeSelected = false;
});
$(document).on('input', '#text-src', function() {
$('.image > img').each(function() {
$(this).removeClass('active');
})
elementSelected = $(this);
typeSelected = true;
})
$(document).on('click', '#button-confirm', function() {
$('.image').hide();
if (typeSelected == true) {
$('.view-image > img').attr('src', elementSelected.val());
} else {
$('.view-image > img').attr('src', elementSelected.attr('src'));
}
$('.view-image').fadeIn('high');
})
$(document).on('click', '#button-other', function() {
$('.view-image').hide();
$('.image').fadeIn('high');
})
.image {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
margin-top: 40px;
margin-left: 50px;
}
.image img {
cursor: pointer;
}
.image img:hover {
border: solid 2px #1e88e5;
border-radius: 2px;
}
.image #mother img:hover {
border: solid 2px #1e88e5;
border-radius: 2px;
}
#dog {
width: 70%;
height: 70%;
}
#mother {
width: 70%;
height: 70%;
}
#soldier {
width: 70%;
height: 70%;
margin-top: 50%
}
#teacher {
width: 70%;
height: 70%;
margin-top: 50%;
}
.button {
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 60%;
padding-top: 8px;
padding-bottom: 8px;
background-color: rgb(43, 43, 219);
text-align: center;
cursor: pointer;
border-radius: 2px;
}
.button:hover {
background-color: #242424;
}
.button:active {
background-color: #121212;
}
.button>span {
color: #eeeeee
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<nav class="navbar navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="">
<img src="./images/Hamburger_icon.svg" alt="Hamburger Menu" />
</a>
<a href="styles/Jason/settings.html">
<ul class="navbar-nav">
<img src="./images/bootstrap-icons-1.3.0/person-circle.svg" alt="Profile" height="50vh" />
</ul>
</a>
</div>
</nav>
<div class="image">
<img src="images/dog.png" id="dog" alt="dog">
<img src="images/mother.png" id="mother" alt="mother">
<img src="images/military.png" id="soldier" alt="soldier">
<img src="images/teacher.png" id="teacher" alt="teacher">
</div>
<div class="button" id="button-confirm">
<span>Confirm</span>
</div>
<div class="view-image" style="display:none;">
<img src="" />
<div class="button" id="button-other"><span>Other</span></div>
</div>
<div class="fixed-bottom">
<div class="navbar navbar-dark bg-primary">
<div class="container-fluid">
<div id="grid">
<div class="bot-nav-img">
<img src="./images/bootstrap-icons-1.3.0/book-fill.svg" alt="Journal" height="50vh" />
</div>
<div class="bot-nav-img">
<img src="./images/bootstrap-icons-1.3.0/house-door-fill.svg" alt="Home" height="50vh" />
</div>
<div class="bot-nav-img">
<a href="goals.html">
<img src="./images/bootstrap-icons-1.3.0/table.svg" alt="Goals" height="50vh" />
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="./styles/Jason/coach_selection.js"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
-->
I am not a html/css expert, however I can see in chrome dev tools that the 'Other' button is certainly there (and the script is working as expected) however it is hidden behind the fixed footer. A quick google on 'bootstrap fixed footer body' found this answer -
Flushing footer to bottom of the page, twitter bootstrap
and I indeed got your snippet working (i.e. the 'Other' button showing) by adding the following styles to your css -
body {
padding-bottom:150px;
}
fixed-bottom {
margin-top:-150px;
}
with regards to the confirm button still showing, you can modify the script as following to show/hide the confirm button accordingly -
$(document).on('click', '#button-confirm', function() {
$('.image').hide();
$('#button-confirm').hide();
if (typeSelected == true) {
$('.view-image > img').attr('src', elementSelected.val());
} else {
$('.view-image > img').attr('src', elementSelected.attr('src'));
}
$('.view-image').fadeIn('high');
})
$(document).on('click', '#button-other', function() {
$('.view-image').hide();
$('.image').fadeIn('high');
$('#button-confirm').show();
})
I've cycle slideshow gallery and I put a caption on my images but there is something wrong why I don't understand..Only my attribute name showing on my caption I don't want to attribute name I want to get attribute value what's wrong with me ?
$(document).ready(function() {
$('.mySlideShow').cycle({
log: false,
fx: 'fade',
slides: ">a",
caption: '.cycle-caption',
captionTemplate: "{{data-caption}}",
pauseOnHover: true,
});
})
.slide-gallery {
position: relative;
width: 790px;
overflow: hidden;
height: 500px;
}
.slide-gallery img {
max-width: 100%;
height: 100%;
}
.cycle-caption {
position: absolute;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, .8);
padding: 10px;
color: #FFF;
z-index: 1000;
width: 100%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>
<div class="slide-gallery">
<div class="mySlideShow">
<a>
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" data-caption="Lorem ipsum dolor sit amet..">
</a>
<a>
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg" data-caption="This is my caption....">
</a>
<a>
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg" data-caption="bla.....">
</a>
</div>
<div class="cycle-caption"></div>
</div>
There were few bugs in the way you were defining your caption.
Mistake 1-
First of all the data-caption attribute in not supported to display caption . After reading the documentation despite of data-caption you can use data-cycle-title for the captions.
Mistake 2-
Since the selector is anchor tag slides: "> a" in your jquery code, the captions will work on anchor tag not on the < img > . So I have added the data-cycle-title="Lorem ipsum dolor sit amet.." on the anchors.
Also changes the captiontemplate jquery to this:
captionTemplate: "' {{cycleTitle}}'",
Below is the working example . Happy Coding :)
$(document).ready(function() {
$('.mySlideShow').cycle({
log: false,
fx: 'fade',
slides: "> a",
caption: '.cycle-caption',
captionTemplate: "' {{cycleTitle}}'",
pauseOnHover: true,
});
})
.slide-gallery {
position: relative;
width: 790px;
overflow: hidden;
height: 500px;
}
.slide-gallery img {
max-width: 100%;
height: 100%;
}
.cycle-caption {
position: absolute;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, .8);
padding: 10px;
color: #FFF;
z-index: 1000;
width: 100%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>
<div class="slide-gallery">
<div class="mySlideShow">
<a data-cycle-title="Lorem ipsum dolor sit amet..">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" >
</a>
<a data-cycle-title="This is my caption....">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg" >
</a>
<a data-cycle-title="bla.....">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg" >
</a>
</div>
<div class="cycle-caption"></div>
</div>
It seems that captionTemplate has to be set to an attribute of the top level element, the slide, in this case, the a element.
This seems to work.
$(document).ready(function() {
$('.mySlideShow').cycle({
log: false,
fx: 'fade',
slides: ">a",
caption: '.cycle-caption',
captionTemplate: "{{target}}",
pauseOnHover: true,
});
})
.slide-gallery {
position: relative;
width: 790px;
overflow: hidden;
height: 500px;
}
.slide-gallery img {
max-width: 100%;
height: 100%;
}
.cycle-caption {
position: absolute;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, .8);
padding: 10px;
color: #FFF;
z-index: 1000;
width: 100%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>
<div class="slide-gallery">
<div class="mySlideShow">
<a target="Lorem ipsum dolor sit amet..">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg">
</a>
<a target="This is my caption....">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg">
</a>
<a target="bla.....">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg">
</a>
</div>
<div class="cycle-caption"></div>
</div>
It doesn't seem to work with custom attributes, that is why I've used target. If you don't wrap your images in a elements, you could use the image's alt attribute, that will be more appropriate.
What I have :
Html
<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>
<div class="content1" style="display:none"></div>
<div class="content2" style="display:none"></div>
<div class="content3" style="display:none"></div>
Js
$(document).ready(function() {
$('#content1').click(function() {
$(' .content2, .content3 ').slideUp({
style: "height",
speed: "slow",
complete: function() {
$(' .content1').slideToggle("slow")
}
});
});
$('#content2').click(function() {
$(' .content1, .content3 ').slideUp({
style: "height",
speed: "slow",
complete: function() {
$(' .content2').slideToggle("slow")
}
});
});
$('#content3').click(function() {
$(' .content1, .content2 ').slideUp({
style: "height",
speed: "slow",
complete: function() {
$(' .content3').slideToggle("slow")
}
});
});
});
What I want
On clicking on a div show its hidden div(content) with slideToggle
if a hidden content of another div is already open then close it with slideUp and open the one you clicked (open only after the slideUp animation is completed)
I managed to get the desired effect with two hidden divs Sample
1but with three i have this Sample 2 auto toggle problem
Help! And if there's a better and simpler alternative to get this effect please suggest. P.S. Sorry for my broken English.
Your code could be refactorized using common classes and then using following logic with promise().done() callback, which will be called only once for all set:
$(document).ready(function() {
$('.for_content').click(function() {
var i = $(this).index('.for_content');
$('.content:not(:eq(' + i + '))').slideUp({
style: "height",
speed: "slow"
}).promise().done(function() {
$('.content').eq(i).slideToggle("slow")
});
});
});
* {
padding: 0px;
margin: 0px;
overflow: hidden;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #222;
}
li {
float: left;
}
.link {
display: inline-block;
color: white;
text-align: center;
padding: 10px;
margin-left: 10px;
margin-right: 10px;
text-decoration: none;
cursor: pointer;
}
.link:hover {
text-shadow: 0px 1px 10px #fff;
}
.content1 {
height: 400px;
width: 100%;
top: 0;
background-color: #333;
}
.content2 {
height: 400px;
width: 100%;
top: 0;
background-color: #444;
}
.content3 {
height: 400px;
width: 100%;
top: 0;
background-color: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<ul>
<li>
<span class="link">Home</span>
</li>
<li>
<div class="link for_content" id="content1">Link 1</div>
</li>
<li>
<div class="link for_content" id="content2">Link 2</div>
</li>
<li>
<div class="link for_content" id="content3">Link 3</div>
</li>
</ul>
</div>
<div>
<div class="content content1" style="display: none">
<h1>
CONTENT 1
</h1>
</div>
<div class="content content2" style="display: none">
<h1>
CONTENT 2
</h1>
</div>
<div class="content content3" style="display: none">
<h1>
CONTENT 3
</h1>
</div>
</div>
You can use something like this:
$('div[id^=content]').click(function () {
var name = $(this).attr('id');
$('div[class^=content]:visible').slideUp('slow', function() {
$('.' + name).slideDown('slow');
});
});
I hope it helps. :-).
This is the jsfiddler for it the issue is with the big images i wanted to add the buttons play stop pause and the progressbar on the big images: JSFiddler
When i'm doing inspect element i don't see any errors in red.
I took the code of this jquery: Automatic slideshow with a timer, play-, pause-, previous- and next-
And before it i used the coolcarousels this jquery: Cool responsive image slider with thumbnail carousel
Cool responsive image slider
And this is the code i have now:
In the html file:
<!DOCTYPE html>
<!--
-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="carousel.css">
<link rel="stylesheet" type="text/css" href="glow-effect.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.1.0/jquery.carouFredSel.packed.js" type="text/javascript"></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.carousel.js"></script>
<script src="java_script.js"></script>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>.container {
background: rgb(170, 187, 97); /* Fallback */
background: rgba(170, 187, 97, 0.5);
}</style>
</head>
<body>
<div>TODO write content</div>
<div id="wrapper">
<div id="carousel-wrapper">
<img id="shadow" src="img/gui/carousel_shadow.png" />
<div id="inner">
<div id="carousel">
<span id="pixar"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007339.Gif" /></span>
<span id="bugs"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar005712.Gif" /></span>
<span id="cars"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007337.Gif" /></span>
<span id="incred"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar000009.Gif" /></span>
<span id="monsters"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar000007.Gif" /></span>
<span id="nemo"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar005720.Gif" /></span>
<span id="radar"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007338.Gif" /></span>
<span id="rat"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar003137.Gif" /></span>
<span id="toystory"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar000005.Gif" /></span>
<span id="up"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar003138.Gif" /></span>
<span id="walle"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar000006.Gif" /></span>
<div id="navi">
<div id="timer"></div>
<a id="prev" href="#"></a>
<a id="play" href="#"></a>
<a id="next" href="#"></a>
</div>
</div>
</div>
</div>
<div id="thumbs-wrapper">
<div id="thumbs">
<img src="img/small/pixar.jpg" />
<img src="img/small/bugs.jpg" />
<img src="img/small/cars.jpg" />
<img src="img/small/incred.jpg" />
<img src="img/small/monsters.jpg" />
<img src="img/small/nemo.jpg" />
<img src="img/small/radar002665resized.jpg" />
<img src="img/small/rat.jpg" />
<img src="img/small/toystory.jpg" />
<img src="img/small/up.jpg" />
<img src="img/small/walle.jpg" />
</div>
<a id="prev" href="#"></a>
<a id="next" href="#"></a>
</div>
</div>
<div class="carousel">
<div class="container">Lorem ipsum dolor</div>
<div class="container">Lorem ipsum_for_testing dolor</div>
</div>
</body>
</html>
I added to the html file this part:
<div id="inner">
And
<div id="timer"></div>
<a id="prev" href="#"></a>
<a id="play" href="#"></a>
<a id="next" href="#"></a>
Then the javascript file:
$(function() {
$('#carousel span').append('<img src="img/gui/carousel_glare.png" class="glare" />');
$('#thumbs a').append('<img src="img/gui/carousel_glare_small.png" class="glare" />');
$('#carousel').carouFredSel({
prev: '#prev',
next: '#next',
auto: {
button: '#play',
progress: '#timer',
pauseOnEvent: 'resume'
},
responsive: true,
circular: false,
auto: true,
infinite: true,
items: {
visible: 1,
width: 200,
height: '56%'
},
scroll: {
fx: 'directscroll',
pauseOnHover: true,
duration: 500
}
});
$('#thumbs').carouFredSel({
responsive: true,
circular: false,
infinite: false,
auto: false,
prev: '#prev',
next: '#next',
items: {
visible: {
min: 2,
max: 6
},
width: 150,
height: '66%'
}
});
$('#thumbs a').click(function() {
$('#carousel').trigger('slideTo', '#' + this.href.split('#').pop() );
$('#thumbs a').removeClass('selected');
$(this).addClass('selected');
return false;
});
$('#wrapper').hover(function() {
$('#navi').stop().animate({
bottom: 0
});
}, function() {
$('#navi').stop().animate({
bottom: -60
});
});
});
And the css file:
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background: url(img/gui/bg_glare.png) top center no-repeat #bcc;
}
html > body {
min-height: 600px;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #333;
line-height: 22px;
}
#wrapper {
position: absolute;
width: 50%;
left: 25%;
top: 50px;
}
#carousel-wrapper {
padding-bottom: 10px;
position: relative;
}
#carousel, #thumbs {
overflow: hidden;
}
#carousel-wrapper .caroufredsel_wrapper {
border-radius: 10px;
box-shadow: 0 0 5px #899;
}
#carousel span, #carousel img,
#thumbs a, #thumbs img {
display: block;
float: left;
}
#carousel span, #carousel a,
#thumbs span, #thumbs a {
position: relative;
}
#carousel img,
#thumbs img {
border: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#carousel img.glare,
#thumbs img.glare {
width: 102%;
height: auto;
}
#carousel span {
width: 554px;
height: 313px;
}
#thumbs-wrapper {
padding: 20px 40px;
position: relative;
}
#thumbs a {
border: 2px solid #899;
width: 150px;
height: 100px;
margin: 0 10px;
overflow: hidden;
border-radius: 10px;
-webkit-transition: border-color .5s;
-moz-transition: border-color .5s;
-ms-transition: border-color .5s;
transition: border-color .5s;
}
#thumbs a:hover, #thumbs a.selected {
border-color: #566;
}
#wrapper img#shadow {
width: 100%;
position: absolute;
bottom: 0;
}
#prev, #next {
background: transparent url('img/gui/carousel_nav.png') no-repeat 0 0;
display: block;
width: 19px;
height: 20px;
margin-top: -10px;
position: absolute;
top: 50%;
}
#prev {
background-position: 0 0;
left: 10px;
}
#next {
background-position: -19px 0;
right: 10px;
}
#prev:hover {
background-position: 0 -20px;
}
#next:hover {
background-position: -19px -20px;
}
#prev.disabled, #next.disabled {
display: none !important;
}
In the css file i didn't change the code in the javascript file i added:
prev: '#prev',
next: '#next',
auto: {
button: '#play',
progress: '#timer',
pauseOnEvent: 'resume'
},
And
$('#wrapper').hover(function() {
$('#navi').stop().animate({
bottom: 0
});
}, function() {
$('#navi').stop().animate({
bottom: -60
});
});
The first jquery of the carousel is still working fine the second link.
But the new one with the play stop pause buttons i don't see them at all.
What i mean is something like this and somehow also to change the colors of the buttons play stop pause to fit the color of the big images maybe something more light or transparent color.
And the pause stop play should handle the big images not the small ones.
I use photoset-grid: http://stylehatch.github.io/photoset-grid/ to tumblr blog.
Code:
<body>
<div class="wrapper">
{block:IndexPage}
<ul id="posts">
{block:Posts}
<li>
{block:Photoset}
<div class="photoset-grid" data-layout="{PhotosetLayout}" data-id="photoset{PostID}" style="visibility: hidden;">
{block:Photos}
<img src="{PhotoURL-500}"
{block:HighRes}data-highres="{PhotoURL-HighRes}"{/block:HighRes}
{block:Caption}alt="{Caption}"{/block:Caption} />
{/block:Photos}
</div>
{block:Caption}
{Caption}
{/block:Caption}
{/block:Photoset}
</li>
{/block:Posts}
</ul>
{/block:IndexPage}
</div>
<script type="text/javascript">
$('.photoset-grid').photosetGrid({
highresLinks: true,
rel: $('.photoset-grid').attr("data-id"),
gutter: '10px',
onComplete: function(){
$('.photoset-grid').attr('style', '');
$('.photoset-grid a').colorbox({
photo: true,
scalePhotos: true,
maxHeight:'90%',
maxWidth:'90%'
});
}
});
</script>
</body>
Problem: Not change 'rel' parameter in 'photosetGrid' for different sets of pictures.
How it looks on the website:
First post:
<div class="photoset-grid" data-layout="122" data-id="photoset58370010471" style="" data-width="600">
<div class="photoset-row cols-1" style="margin-bottom: 10px; clear: left; display: block; overflow: hidden; height: 390px;">
<a href = "bla0.jpg" class = "photoset-cell highres-link cboxElement" rel = "photoset58370010471" style = "float: left; display: block; line-height: 0; box-sizing: border-box; width: 100%; ">
Second post:
<div class="photoset-grid" data-layout="122" data-id="photoset58327675703" style="" data-width="600">
<div class="photoset-row cols-1" style="margin-bottom: 10px; clear: left; display: block; overflow: hidden; height: 468px;">
<a href = "bla1.jpg" class = "photoset-cell highres-link cboxElement" rel = "photoset58370010471" style = "float: left; display: block; line-height: 0; box-sizing: border-box; width: 100%;">
The parameter 'data-id' in changing, and the parameter 'rel' in remains the same.
How to make the parameter 'rel' in varied with 'data-id' in ?
That is, to sets of pictures in different posts have different identifiers and were not a collection.
Thank you!
+++Desicion+++
<script type="text/javascript">
$.each($('.photoset-grid'), function() {
$(this).photosetGrid({
highresLinks: true,
rel: $(this).attr('data-id'),
gutter: '10px',
onComplete: function(){
$('.photoset-grid').attr('style', '');
$('.photoset-grid a').colorbox({
photo: true
});
}
});
});
</script>
The problem is coming from the fact that you're calling the photosetGrid() function at the same time to multiple selected elements. You need to utilize jQuery's each() function to iterate over the elements.