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>-->
Related
I'm a complete beginner at coding and I've already searched here but I couldn't really find a proper solution to my problem.
I'm trying to get a text to appear in place of the image when I hover over the image with the mouse.
Unfortunately jQuery has to be used, I know it can be done by just using CSS.
So far I have the following which I found on here:
In the head:
<script>
$(function(){
$('.parent').mouseenter(function(){
$(this).children('.child').fadeIn();
}).mouseleave(function(){
$(this).children('.child').fadeOut();
});
});
</script>
In the body:
<div class='parent'>
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'/>
<div class='child'>
<p>Random text.</p>
</div>
</div>
CSS:
.parent
{
position:relative;
}
.child
{
position: absolute;
left: 0;
bottom: 0;
background-color: black;
opacity: 0.5;
padding:10px;
display:none;
}
Thank you for an easy tip or explanation on what I'm doing wrong and how I can solve that problem.
Edit:
This is my full code in my PHP file:
echo "
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>Test Blog</title>
<script>
$(document).ready(function() {
$('.gallery-item').hover(function() {
$(this).find('.img-title').fadeIn(300);
}, function() {
$(this).find('.img-title').fadeOut(100);
});
});
</script>
</head>
<body>
<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script>
<div class=\"wrapper clearfix\">
<figure class=\"gallery-item\">
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'>
<figcaption class=\"img-title\">
<h5>Random text.</h5>
</figcaption>
</figure>
</div>
And there it continues with a dropdown menu routing to the other pages.
The CSS code is in my CSS file which I linked to above (the link is correct since all the other CSS code is working).
$(document).ready(function() {
$('.gallery-item').hover(function() {
$(this).find('.img-title').fadeIn(300);
}, function() {
$(this).find('.img-title').fadeOut(100);
});
});
.gallery {
width: 25em;
margin: 2em auto;
}
.gallery-item {
height: auto;
width: 48.618784527%;
float: left;
margin-bottom: 2em;
position: relative;
}
.gallery-item:first-child {
margin-right: 2.762430939%;
}
.gallery-item img {
width: 100%;
}
.gallery-item:hover .img-title {}
.img-title {
position: absolute;
top: 0;
margin: 0;
height: 100%;
width: 100%;
text-align: center;
display: none;
background-color: #333;
}
.img-title h5 {
position: absolute;
color: #fff;
top: 33%;
width: 100%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper clearfix">
<figure class="gallery-item">
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'>
<figcaption class="img-title">
<h5>Random text.</h5>
</figcaption>
</figure>
</div>
You have to define the size of the overly - I did that with the position settings below. Also, I erased the opacity setting. Not sure what else you want, but basically it works now.
$(document).ready(function() {
$('.parent').mouseenter(function() {
$(this).children('.child').fadeIn();
}).mouseleave(function() {
$(this).children('.child').fadeOut();
});
});
.parent {
position: relative;
}
.child {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: black;
padding: 10px;
display: none;
}
.child p {
color: white;
text-align: center;
margin-top: 100px;
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image' />
<div class='child'>
<p>Random text.</p>
</div>
</div>
Hope it helps you out.
$(function(){
$('.parent').mouseenter(function(){
//alert();
$(this).children('.child').show().fadeIn(200);//have some timeout for fading in
}).mouseleave(function(){
$(this).children('.child').fadeOut(400);
});
});
.parent
{
position:relative;
}
.child
{
position: absolute;
left: 0;
bottom: 0;
background-color: black;
opacity: 1.0;
padding:10px;
display:none;
/*
add width and height attribute to the elem
*/
width:100%;
height:300px;
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'/>
<div class='child'>
<p>Random text.</p>
</div>
</div>
I am making sort of a drop down list but more of a button, and i needs to be able to look good. I have almost got every thing I need but when i move the mouse onto the box that appears (drop down list), it disapears. This is what I have so far;
html
<div id="buttons">
<div id="box"></div>
<div id="content">content here</div>
<div id="box1"></div>
<div id="content1">content here</div>
<div id="box2"></div>
<div id="content2">content here</div>
</div>
css
#box {
position: absolute;
width: 10vw;
height: 10vw;
background-color: blue;
}
#content {
position: absolute;
left: 11vw;
width: 10vw;
height: 10vw;
background-color: red;
display: none;
}
jquery
$("#box").hover(
function() {
$("#content").slideDown(); //.show();
},
function() {
$("#content").fadeOut(); //hide();
}
);
$("#content").hover(
function() {
$("#content").show(); //.show();
},
function() {
$("#content").fadeOut(); //hide();
}
);
Anything I am doing wrong, better ways to do this or a link to an existing question that already answers this would be very much appreciated. Thanks!
Here is exactly what you wanted.
$("#box, #content").on("mouseenter", function() {
$("#content").slideDown(); //.show();
})
.on("mouseleave", function() {
if (!$("#content").is(":hover"))
$("#content").fadeOut(); //hide();
});
https://jsfiddle.net/kvbvLy4d/
You could also achieve this without any Javascript / JQuery by animating the height of the content with CSS.
#box {
position: absolute;
width: 10vw;
height: 10vw;
background-color: blue;
}
#box:hover + #content, #content:hover {
height: 10vw;
}
#content {
position: absolute;
left: 11vw;
width: 10vw;
height: 0;
background-color: red;
-webkit-transition: height 0.5s;
transition: height 0.5s;
overflow: hidden;
}
<div id="buttons">
<div id="box"></div>
<div id="content">content</div>
<div id="box1"></div>
<div id="content1">content</div>
<div id="box2"></div>
<div id="content2">content</div>
</div>
I have three elements that are fixed, when they reach a certain section in the page, I want them to transition into the next element,but not just disappear and change. At the divides I want to be able to see the top fixed element half and the bottom fixed element half. EX: If the top element is red and bottom element is blue then at the divide I should see a box that has half red and half blue.
Here is what I have so far, but right now each element just disappears, I want it to appear that it is sliding under the next fixed element. (I messed around with the z-index but this solution didn't work b/c both items are fixed to the same spot)
HTML:
<body id="body">
<div id="background">
</div>
<div id="red">
<div class="fixedContainer" id="something">
This is Just a test
</div>
</div>
<div class="mdl-grid" id="blue">
<div class="fixedContainer2" id="something2">
This is Just a test2
</div>
</div>
<div class="mdl-grid" id="green">
<div class="fixedContainer3" id="something3">
This is Just a test3
</div>
</div>
CSS:
#background {
height: 900px;
background-color: black;
z-index: 1;
}
#red {
height: 900px;
background-color: red;
}
#blue {
height: 900px;
background-color: blue;
}
#green {
height: 900px;
background-color: green;
}
.fixedContainer {
z-index: 10;
position: fixed;
background-color: #ddd;
padding: 2em;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.fixedContainer2 {
z-index: 5;
position: fixed;
background-color: #ffff00;
padding: 2em;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.fixedContainer3 {
position: fixed;
background-color: #dd1144;
padding: 2em;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
JS
$('#something').hide();
$('#something2').hide();
$('#something3').hide();
$(document).scroll(function() {
if ($(document).scrollTop() < 700) {
$('#something').hide();
$('#something2').hide();
$('#something3').hide();
} else if ($(document).scrollTop() > 700 && $(document).scrollTop() < 1580) {
$('#something3').show();
$('#something2').hide();
$('#something').hide();
} else if ($(document).scrollTop() > 1580 && $(document).scrollTop() < 2490) {
$('#something2').show();
$('#something3').hide();
$('#something').hide()
} else if ($(document).scrollTop() > 2490) {
$('#something2').hide();
$('#something').show()
}
});
https://jsfiddle.net/zs4emw00/4/
Here is the https://jsfiddle.net/zs4emw00/5/
You create an overall container and set that container to overflow: hidden;
Then have that fixedContainer set to position:absolute. The jquery part is to always keep all the fixedContainer at the top of the window.
HTML:
<div id="background">
</div>
<div id="red" class="container">
<div class="fixedContainer" id="something">
This is Just a test
</div>
</div>
<div class="mdl-grid container" id="blue" >
<div class="fixedContainer" id="something2">
This is Just a test2
</div>
</div>
<div class="mdl-grid container" id="green">
<div class="fixedContainer" id="something3">
This is Just a test3
</div>
</div>
CSS:
#background {
height:900px;
background-color: black;
z-index: 1;
}
.container{
position:relative;
height:900px;
overflow:hidden;
}
#red {
background-color: red;
}
#blue {
background-color: blue;
}
#green {
background-color: green;
}
.fixedContainer {
z-index: 10;
position:absolute;
background-color:#ddd;
padding: 2em;
left: 50%;
top: 0;
transform: translate(-50%);
}
Javascript
$(document).scroll(function() {
var $target = $('container');
var winHeight = $(window).scrollTop();
var offsetArr = $('.container').each(function(){
var top = $(this).offset().top;
var difference = winHeight - top;
$(this).find('.fixedContainer').css('top',difference);
})
});
in the code below I am trying to figure out how can I change "content"s z-index relatively to clicked "menu-item". I managed how to do this for menu items, but cannot find solution for the rest. In simple words I need to click #m1 and set Z-Index 10 for #c1 and so on.
HTML
<div id="content" class="container">
<div id="c1" class="content">content1</div>
<div id="c2" class="content">content2</div>
<div id="c3" class="content">content3</div>
<div id="c4" class="content">content4</div>
</div>
<div id="menu" class="container">
<div id="m1" class="menu-item"></div>
<div id="m2" class="menu-item"></div>
<div id="m3" class="menu-item"></div>
<div id="m4" class="menu-item"></div>
</div>
CSS
/*global*/
.container{
position: absolute;
width: 300px;
height: 100px;
}
/*content*/
.content{
position: absolute;
height: 100%;
width: 75%;
right: 0;
background: #354458;
text-align: center;
color: #fff;
line-height: 95px;
}
/*menu*/
.menu-item{
position: absolute;
width: 25%;
height: 100%;
background: green;
cursor: pointer;
transition: left 200ms ease-in-out;
}
.menu-item.closed{
left: 0 !important;
}
#m1{
left:0;
background: #DB3340;
}
#m2{
left: 25%;
background: #E8B71A;
}
#m3{
left: 50%;
background: #1FDA9A;
}
#m4{
left: 75%;
background: #28ABE3;
}
JQuery
$(document).ready(function(){
var menu = $('.menu-item');
menu.click(function(){
$(this).siblings(menu).css('z-index', "initial");
$(this).css('z-index', 11);
});
menu.click(function(){
menu.toggleClass("closed");
});
});
Working example: http://jsfiddle.net/8a3vqy5v/
No need to register multiple click events for the same element, they serve for your case same as a single binding.
You can hide and show the background content based on the menu index as follows within the click event, you can check the code snippet for full code:
var index = $(this).index();
$('.content').hide();
$('.content').eq(index).show();
Snippet :
$(document).ready(function(){
var menu = $('.menu-item');
menu.click(function(){
$(this).siblings(menu).css('z-index', "initial");
$(this).css('z-index', 11);
menu.toggleClass("closed");
var index = $(this).index();
$('.content').hide();
$('.content').eq(index).show();
});
});
/*global*/
.container{
position: absolute;
width: 300px;
height: 100px;
}
/*content*/
.content{
position: absolute;
height: 100%;
width: 75%;
right: 0;
background: #354458;
text-align: center;
color: #fff;
line-height: 95px;
}
/*menu*/
.menu-item{
position: absolute;
width: 25%;
height: 100%;
background: green;
cursor: pointer;
transition: left 200ms ease-in-out;
}
.menu-item.closed{
left: 0 !important;
}
#m1{
left:0;
background: #DB3340;
}
#m2{
left: 25%;
background: #E8B71A;
}
#m3{
left: 50%;
background: #1FDA9A;
}
#m4{
left: 75%;
background: #28ABE3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content" class="container">
<div id="c1" class="content">content1</div>
<div id="c2" class="content">content2</div>
<div id="c3" class="content">content3</div>
<div id="c4" class="content">content4</div>
</div>
<div id="menu" class="container">
<div id="m1" class="menu-item"></div>
<div id="m2" class="menu-item"></div>
<div id="m3" class="menu-item"></div>
<div id="m4" class="menu-item"></div>
</div>
You could get the index of the clicked .menu-item element and then select the corresponding .content element using the index with the .eq() method:
Updated Example
var $menu = $('.menu-item');
$menu.click(function() {
$(this).css('z-index', 11).siblings($menu).add('.content').css('z-index', '');
if (!$(this).hasClass('closed')) {
$('.content').eq($(this).index()).css('z-index', 10);
}
$menu.toggleClass("closed");
});
But since that creates a weird transition bug, you could use the code from this example instead. It essentially listens to the transitionend event.
if there is a fixed number of elements (ie: 4) you could simply throw 4 rules, one for each :
$('#m1').click(function() {
$('.content').css('z-index', '');
$('#c1').css('z-index', '11');
});
$('#m2').click(function() {
$('.content').css('z-index', '');
$('#c2').css('z-index', '11');
});
$('#m3').click(function() {
$('.content').css('z-index', '');
$('#c3').css('z-index', '11');
});
$('#m4').click(function() {
$('.content').css('z-index', '');
$('#c4').css('z-index', '11');
});
if you want a single rule that would apply to any #mx - #cx couple, you could also try to get the id of the element clicked as a string and manipulate the string in order to replace the first letter with a 'c'
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.