Develop Reference

Carousel gallery with filter

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;
}

Combine Circletype.js with jQuery animate

I want to use Circletype.js in conjunction with jQuery .animate() to cause text to curve around my logo/image as I animate the width of its container.
I am applying .circleType({fluid:true}); to the #demo4 div. This, along with the correct css, causes the text path to bend to fit its container (#resize).
Run the code snippet to illustrate:
text radius does change when container is resized manually
text radius does not change when resized via .animate(). Why not?
$(function() {
$("#resize").resizable();
$("#resize").draggable();
});
$("button").click(function() {
$("#resize").animate({
left: '50px',
width: '650px'
});
});
$('#demo4').circleType({
fluid: true,
dir: -1
});
#resize {
position: relative;
width: 220px;
height: auto;
padding: 0.5em;
border: 1px solid;
}
#resize h4 {
text-align: center;
margin: 0;
}
.demo-box {
position: relative;
max-width: 700px;
margin: 10% auto;
color: #476A50;
background-color: #ccc;
}
#logo {
position: absolute;
bottom: 44%;
width: 60%;
height: auto;
margin-left: 23%;
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://www.kernjs.com/js/lettering.js"></script>
<script src="http://circletype.labwire.ca/js/circletype.js"></script>
<button>Start Animation</button>
<div id="resize" class="ui-widget-content">
<h4 class="ui-widget-header">Resize/Drag/Animate</h4>
<div class="demo-box" id="demo-box4">
<h2 id="demo4" class="demo strong">Anything in WordPress </h2>
<img src="http://profondodesign.com/assets/images/pd-Logo-800x320.png" id="logo" />
</div>
</div>

You can try this though if you just want the end result. If you want the text to be also animated, then the below code won't work. See if it works for your requirement
$(function() {
$("#resize").resizable();
$("#resize").draggable();
circleInit();
});
$("button").click(function() {
$("#resize").animate({
left: '50px',
width: '650px'
},400,'swing',function() { circleInit(); });
});
function circleInit() {
$('#demo4').circleType({
fluid: true,
dir: -1
});
}
#resize {
position: relative;
width: 220px;
height: auto;
padding: 0.5em;
border: 1px solid;
}
#resize h4 {
text-align: center;
margin: 0;
}
.demo-box {
position: relative;
max-width: 700px;
margin: 10% auto;
color: #476A50;
background-color: #ccc;
}
#logo {
position: absolute;
bottom: 44%;
width: 60%;
height: auto;
margin-left: 23%;
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://www.kernjs.com/js/lettering.js"></script>
<script src="http://circletype.labwire.ca/js/circletype.js"></script>
<button>Start Animation</button>
<div id="resize" class="ui-widget-content">
<h4 class="ui-widget-header">Resize/Drag/Animate</h4>
<div class="demo-box" id="demo-box4">
<h2 id="demo4" class="demo strong">Anything in WordPress </h2>
<img src="http://profondodesign.com/assets/images/pd-Logo-800x320.png" id="logo" />
</div>
</div>

The code for circletype shows that the text is only reflowed when the window is resized:
if (settings.fluid && !settings.fitText) {
$(window).resize(function () {
layout();
});
}

How to slide images & text at the same time using jquery

I have a background image, a logo, and some text. The logo and text need to fade in and slide (in opposite directions), just like the video here:
Here is a video that does something similar. I just want them to animate in and stop. i don't need it to be as detailed as in the video.
For some reason I cannot get my image to do anything. It does not slide anywhere. When the animation is done, I want it to sit next to the text.
Also, my text slides to the right like I want, but after it moves right, it automatically sends itself back left in an ugly way. I just want it to slide right and stay there. Thanks for the help.
HTML & jQuery:
<!--Background image here -->
<img src="path" width="some width" height="some height"/>
<div class="centre">
<div style="float: left;">
<!--Logo Here-->
<img src="http://placehold.it/350x150" id="myImage"/>
</div>
<div style="float:left;">
<p id="first">The original SheerWeave fabric</p>
<p id="second">Infused with Microban</p>
<p id="third">GREENGUARD Certified</p>
<p id="fourth">Available in 10 colors</p>
</div>
</div>
<script>
$(document).ready(function() {
$('#myImage').animate({ 'right': '250'}, 16000);
$('#first').animate({ 'left': '50', 'opacity': 1 }, 1600);
$('#second').animate({ 'left': '50', 'opacity': 1 }, 1600);
$('#third').animate({ 'left': '50', 'opacity': 1 }, 1600);
$('#fourth').animate({ 'left': '50', 'opacity': 1 }, 1600);
});
</script>
CSS:
#first, #second, #third, #fourth{
opacity: 0;
}
.centre {
min-width: 500px;
margin: auto;
top: 125px;
left: 350px;
bottom: 0;
right: 0;
position: absolute;
z-index: 999;
}

Try this:
HTML:
<!--Background image here -->
<div class="centre">
<div id="image">
<!--Logo Here-->
<img src="http://placehold.it/350x150" id="myImage"/>
</div>
<span id="border"></span>
<div id="text">
<p id="first">The original SheerWeave fabric</p>
<p id="second">Infused with Microban</p>
<p id="third">GREENGUARD Certified</p>
<p id="fourth">Available in 10 colors</p>
</div>
</div>
CSS:
.centre {
display: table;
margin:0 auto;
}
#image {
opacity: 0;
display: table-cell;
position: relative;
margin-left: 0px;
float:left;
}
#border {
border: 1px solid black;
position: absolute;
height: 150px;
margin-left: -10px;
opacity: 0;
}
#text {
opacity: 0;
position: relative;
float: left;
vertical-alignment: middle;
display: table-cell;
margin-left: -220px;
}
JS:
$(window).load(function() {
$( "#image" ).animate({
opacity: 1,
marginRight: "0.3in"
}, 1500 );
$( "#text" ).animate({
opacity: 1,
marginLeft: "0.1in"
}, 1500 );
$( "#border" ).animate({
opacity: 1
}, 5500 );
});
See Example.

You could also work with covers above the image and the text with different z-index values.
There are two overlays (covers) that are hiding the text and the image. You can check-out how it works if you're setting the opacity values of the covers to a lower alpha, then you can see how they hide the elements.
Have a look at the demo below and here at jsFiddle.
I think there's one thing to improve in the code and that's the vertical alignment of the text. It's not centered.
$(document).ready(function () {
$('.text>p').each(function (index, item) {
//console.log(item, this);
$(this).delay(100 + index * 200).animate({
'left': '100%'
},
600 + index * 100,
'easeInQuad');
});
$('.logo').animate({
'left': '0',
'opacity': '1.0'
}, 800);
//$('.coverLeft').delay(1600).animate({'opacity': '0.0'}, 1000); // not required because z-index is below image and above text
$('.coverRight').delay(600).animate({
'opacity': '0.0'
}, 1000);
});
.logo {
/*reveal from right to left*/
position: absolute;
left: 50%;
width: 50%;
text-align: right;
opacity: 0.0;
z-index: 7;
}
.wrapper {
padding-top: 10px;
margin: 0 auto;
width: 100%;
height: 100%;
}
body {
overflow: hidden;
}
.text {
/* reveal right */
position: absolute;
left: 0;
width: 50%;
/*display:table-cell;
vertical-align:middle;*/
opacity: 1.0;
white-space: nowrap;
z-index: 4;
padding-left: 10px;
}
.text p {
font-family: sans-serif;
position: relative;
/*line-height: 20px;*/
}
.coverLeft {
position: absolute;
background-color: #fff;
left: 0;
height: 100%;
width: 50%;
opacity: 1.0;
z-index: 6;
}
.coverRight {
position:absolute;
right: 0;
width: 50%;
height: 100%;
background-color: #fff;
opacity: 1.0;
z-index: 8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div class="coverLeft"></div>
<div class="coverRight"></div>
<div class="wrapper">
<div class="logo">
<img src="http://lorempixel.com/200/200/fashion/9/" />
</div>
<div class="text">
<p id="first">The original SheerWeave fabric</p>
<p id="second">Infused with Microban</p>
<p id="third">GREENGUARD Certified</p>
<p id="fourth">Available in 10 colors</p>
</div>
</div>
<!--Background image here -->
<!--<img src="path" width="some width" height="some height"/>-->
<!-- <div class="centre">
<div style="float: left;">
-->
<!--Logo Here-->
<!-- <img src="http://placehold.it/350x150" id="myImage"/>
</div>
<div style="float:left;">
<p id="first">The original SheerWeave fabric</p>
<p id="second">Infused with Microban</p>
<p id="third">GREENGUARD Certified</p>
<p id="fourth">Available in 10 colors</p>
</div>
</div>-->

Multiple carousel doesn't want to synchronize

I have weird problem with my carousel. I'm using carouFredSel to make an unusual slider for my page. It almost works but with one problem. After a page has loaded, the carousel shows the first image and the first title. But when the carousel scrolls to the next picture, it misses the second picture and shows the third one but with the second picture's title. This problem also appeared with my hover effect. When I hover the thumb it shows good title but wrong picture.
I don't know how to explain this better. If I make myself unclear, please let me know and I will try to describe the problem differently.
How can I synchronize pictures with titles?
Working fiddle: jsfiddle
Here is my code:
HTML:
<div class="news-mp-container">
<div class="news-mp-slider" id="newsMPSlider">
<div class="images-wrapper">
<div class="news-mp-slider-bigone">
<div id="sliderBigPhotoWrapper">
<a href="#" id="sliderArticlePhoto_101">
<img src="http://magsite.pl/jsfiddleimg/articles/1426085277646_480x360.jpg"/>
</a>
<a href="#" id="sliderArticlePhoto_99">
<img src="http://magsite.pl/jsfiddleimg/articles/1426085055263_480x360.png"/>
</a>
<a href="#" id="sliderArticlePhoto_98">
<img src="http://magsite.pl/jsfiddleimg/articles/142479021075_480x360.jpg"/>
</a>
<a href="#" id="sliderArticlePhoto_97">
<img src="http://magsite.pl/jsfiddleimg/articles/1424790022510_480x360.jpg"/>
</a>
<a href="#" id="sliderArticlePhoto_96">
<img src="http://magsite.pl/jsfiddleimg/articles/1424789916934_480x360.jpg"/>
</a>
<a href="#" id="sliderArticlePhoto_95">
<img src="http://magsite.pl/jsfiddleimg/articles/1424789591806_480x360.png"/>
</a>
</div>
</div>
<div class="news-mp-slider-thumbs">
<div id="sliderThumbsWrapper">
<a href="news,single?id=101" id="sliderArticleThumb_101">
<img src="http://magsite.pl/jsfiddleimg/articles/1426085277646_62x62.jpg"/>
</a>
<a href="#" id="sliderArticleThumb_99">
<img src="http://magsite.pl/jsfiddleimg/articles/1426085055263_62x62.png"/>
</a>
<a href="#" id="sliderArticleThumb_98">
<img src="http://magsite.pl/jsfiddleimg/articles/142479021075_62x62.jpg"/>
</a>
<a href="#" id="sliderArticleThumb_97">
<img src="http://magsite.pl/jsfiddleimg/articles/1424790022510_62x62.jpg"/>
</a>
<a href="#" id="sliderArticleThumb_96">
<img src="http://magsite.pl/jsfiddleimg/articles/1424789916934_62x62.jpg"/>
</a>
<a href="#" id="sliderArticleThumb_95">
<img src="http://magsite.pl/jsfiddleimg/articles/1424789591806_62x62.png"/>
</a>
</div>
</div>
</div>
<div class="news-mp-slider-title-holder">
<div id="sliderTextWrapper">
<div id="sliderArticleTitle_101" class="news-mp-slider-text">
<a href="#" class="news-mp-title">
<h4>Bacon ipsum</h4>
</a>
<p class="news-mp-shortdesc">Bacon ipsum dolor amet kevin short ribs ham, tenderloin picanha biltong rump ribeye tail leberkas.</p>
</div>
<div id="sliderArticleTitle_99" class="news-mp-slider-text">
<a href="#" class="news-mp-title">
<h4>Lorem ipsum</h4>
</a>
<p class="news-mp-shortdesc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacus velit,...</p>
</div>
<div id="sliderArticleTitle_98" class="news-mp-slider-text">
<a href="#" class="news-mp-title">
<h4>Veggie ipsum</h4>
</a>
<p class="news-mp-shortdesc">Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion...</p>
</div>
<div id="sliderArticleTitle_97" class="news-mp-slider-text">
<a href="#" class="news-mp-title">
<h4>Tuna ipsum</h4>
</a>
<p class="news-mp-shortdesc">Snook peamouth crocodile shark collared dogfish weever trout cod slender mola Modoc </p>
</div>
<div id="sliderArticleTitle_96" class="news-mp-slider-text">
<a href="#" class="news-mp-title">
<h4>Yippiyo ipsum</h4>
</a>
<p class="news-mp-shortdesc">Yippiyo ipsizzle i'm in the shizzle sizzle amizzle, consectetuer adipiscing...</p>
</div>
<div id="sliderArticleTitle_95" class="news-mp-slider-text">
<a href="#" class="news-mp-title">
<h4>Beer ipsum</h4>
</a>
<p class="news-mp-shortdesc">degrees plato krausen, mash ipa bacterial pint glass. krug cask conditioned...</p>
</div>
</div>
</div>
</div>
</div>
JS:
$('#sliderBigPhotoWrapper').carouFredSel({
responsive: false,
circular: false,
auto: {
fx: 'crossfade',
duration: 500,
timeoutDuration: 6000,
pauseOnHover: true
},
scroll: {
fx: 'crossfade',
duration: 500,
pauseOnHover: true
},
items: {
visible: 1,
width: '460px',
height: '360px'
}
});
$('#sliderTextWrapper').carouFredSel({
responsive: false,
circular: false,
synchronise: ['#sliderBigPhotoWrapper', true, true],
auto: {
fx: 'crossfade',
duration: 500,
timeoutDuration: 6000,
},
scroll: {
fx: 'crossfade',
duration: 500,
},
items: {
visible: 1,
width: '460px',
height: 'auto'
}
});
$('#sliderThumbsWrapper').on('mouseenter', 'a', function () {
console.log('hover start');
n = $(this).attr('id').split('_').pop();
console.log('n: ' + n);
console.log('before first trigger - #sliderArticlePhoto_' + n);
$('#sliderBigPhotoWrapper').trigger('slideTo', '#sliderArticlePhoto_' + n);
console.log('after first trigger');
console.log('before second trigger - #sliderArticleTitle_' + n);
$('#sliderTextWrapper').trigger('slideTo', '#sliderArticleTitle_' + n);
console.log('after second trigger');
$('#sliderBigPhotoWrapper').trigger('stop');
console.log('hover end');
return false;
});
and CSS:
.news-mp-container {
position: relative;
width: 480px;
}
.news-mp-container * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.news-mp-container img {
max-width: 100%;
height: auto;
}
/*SLIDER*/
.news-mp-slider {
margin: 0 0 20px;
}
.news-mp-slider img {
width: 100%;
}
.news-mp-slider .news-mp-title {
display: inline-block;
height: auto;
font-size: 22px;
font-size: 2.2rem;
margin: 0;
}
.news-mp-slider .news-mp-title h4{
margin: 0.5em 0;
}
.news-mp-slider .news-mp-shortdesc {
height: auto;
margin-top: 5px;
}
.news-mp-slider-bigone {
height: 360px;
overflow: hidden;
}
.news-mp-slider-bigone a, .news-mp-slider-bigone img {
display: block;
float: left;
width: 480px;
}
.news-mp-slider-bigone img {
width: 100%;
}
.news-mp-slider-thumbs {
position: absolute;
width: 100%;
background: rgba(0, 0, 0, 0.6);
bottom: 0;
padding: 10px;
z-index: 20;
}
.news-mp-slider-thumbs a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
display: block;
float: left;
margin-right: 14px;
width: 65px;
/* width: calc(100% / 6 - 10px);*/
height: 65px;
overflow: hidden;
border: 3px solid #0282cd;
}
.news-mp-slider-thumbs a:hover {
border-color: #f7be0d;
}
.news-mp-slider-thumbs a:last-child {
margin: 0;
}
.news-mp-slider-thumbs img {
display: block;
/*float: left;*/
width: 62px;
height: 62px;
}
.news-mp-slider-title-holder {
border-bottom: 1px solid #d8d8d8;
padding: 10px 0 5px;
}
.news-mp-slider-text {
width: 460px;
}
I hope you guys can help because I can't find any solution.

Why the play stop pause buttons and progressBar are not displaying at all?

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.