I'm using a Age verify-er at the this codepen.
The following is what I have sliding down from the top of the screen:
$(document).ready(function() {
$.age_verifier_id = "28915";
$.age_verifier_ajax_url = "http://selectoil.com/wp-admin/admin-ajax.php";
$.AgeVerifier({
enabled: "1",
mode: "age",
minimum_age: "21",
cookie_expiration: "365",
animation: "slide",
title: "Welcome to My website",
text: "Please use the slider to verify your age",
background: "#333",
background_type: "color",
background_image_url: "http://selectoil.com/wp-content/uploads/2017/06/icon-logo.png",
text_color: "#ffffff",
submit_text: "Enter",
error_message: "You need to be at least [age] years old to continue.",
safe_url: "",
safe_url_enabled: "0"
});
});
I'm trying to make two images 200px by 200px each slide down side by side each other above the "Welcome to my website" text and slides down following the same slide sequence
I recommend to use an external animation library.
There is a CSS only library called animate.css
Then you can achieve your requirement like this:
$('#btn').on('click', (e) => {
$('#overlay').fadeOut();
});
html,body{
margin:0;
padding:0;
}
#overlay {
background-color: #1AB4A1;
height: 100%;
margin:0;
position: fixed;
width: 100%;
}
#welcomeContainer {
padding:20px 0px 0px 0px;
text-align: center;
}
#welcomeContainer img {
height: 200px;
width: 200px;
}
#btn {
background-color: red;
border-radius: 5px;
padding: 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet" />
<div id="overlay">
<div id="welcomeContainer" class="animated fadeInDownBig delay-1s">
confirm
<br/>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg" />
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg" />
</div>
</div>
<div>
content behind
</div>
Related
I have 2 pictures.
<div class="work-default-row">
<img class="img1" src="/files/ourWork/titleImages/img1.jpg"/>
<img class="img2" src="/files/ourWork/titleImages/img2.jpg"/>
</div>
In CSS
.work-default-row {
position:relative;
}
.img1 {
width:100%;
height:400px;
}
.img2 {
position:absolute;
top:0px;
left:3000px;
width:100%;
height:400px;
}
and JavaScript
$(".work-default-row").hover(function(){
$(".img2", this).stop().animate({left:"0"},{queue:false,duration:200});
}, function() {
$(".img2", this).stop().animate({left:"3000px"},
{queue:false,duration:200});
});
It "works", on hover, the second image just came from nowhere and overlays the first image. But this solution is HORRIBLE.(The position of img1 is in the middle of page, So I can see how the img2 come from right through whole page and in resolution bigger than 3000px, user is able to see the second image)
Please, can somebody help me and tell me how can i make this images change effective?
If you have the width of the container you can set it to hide anything outside of it with.
#container_id{
overflow:hidden;
}
It looks like your using the work-default-view as your container.
Try this.
$(".slider").hover(
function() {
$(".slider-inner", this)
.stop()
.animate({ left: "0" }, { queue: false, duration: 200 });
},
function() {
$(".slider-inner", this)
.stop()
.animate({ left: "-100vw" }, { queue: false, duration: 200 });
}
);
.slider{
overflow: hidden;
}
.slider-inner {
width: 200vw;
position: relative;
display: flex;
flex-direction: row;
overflow:hidden;
}
img{
width: 100vw;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<div class="slider-inner">
<img src="https://images.unsplash.com/photo-1538291397218-01e8830ddc68?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=fd07afd311ed4a74d0eed33089be01bb&auto=format&fit=crop&w=500&q=60" />
<img src="https://images.unsplash.com/photo-1538306196939-82f33cccacad?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8c3ebd64083bb95f0b27c5d222b0f170&auto=format&fit=crop&w=500&q=60" />
</div>
</div>
Try changing width of img2 instead of left.
$(".work-default-row").hover(function() {
$(".img2", this).stop().animate({
width: "100%"
}, {
queue: false,
duration: 200
});
}, function() {
$(".img2", this).stop().animate({
width: "0"
}, {
queue: false,
duration: 200
});
});
.work-default-row {
position: relative;
}
.img1 {
width: 100%;
height: 400px;
}
.img2 {
position: absolute;
top: 0px;
width: 0;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="work-default-row">
<img class="img1" src="https://picsum.photos/200" />
<img class="img2" src="https://picsum.photos/200" />
</div>
i want that before the actual image gets loaded a spinner should be shown so that my website can load faster
window.addEventListener('load', function(){
var allimages= document.getElementsByTagName('img');
for (var i=0; i<allimages.length; i++) {
if (allimages[i].getAttribute('data-src')) {
allimages[i].setAttribute('src', allimages[i].getAttribute('data-src'));
}
}
}, false)
<img src="https://loremflickr.com/400/600" data-src="images/banguet-hall-location-icon.png" class="secEightImg" />
<img src="http://www.jettools.com/images/animated_spinner.gif" data-src="images/banguet-hall-location-icon.png" class="secEightImg" />
<script>
</script>
the problem is the actual image is shown two times and instead of spinner a broken image (which is shown when no image is found) is shown first
please help
If you want a spinner per image, just add the spinner URL as the initial src attribute for all of them:
<img src="spinner.gif" data-src="actual-image.png" />
Then, once the page loads, change all those src for the real URL (data-src) and listen for the load and error events on each image.
For each of them, add a .loaded class or .error class to the images and style them as you want. For example, you could hide the ones that could not be loaded, show a custom "error" image (using background-image) or style them as you wish, like in this example:
function imageLoaded(e) {
updateImage(e.target, 'loaded');
}
function imageError(e) {
updateImage(e.target, 'error');
}
function updateImage(img, classname) {
// Add the right class:
img.classList.add(classname);
// Remove the data-src attribute:
img.removeAttribute('data-src');
// Remove both listeners:
img.removeEventListener('load', imageLoaded);
img.removeEventListener('error', imageError);
}
window.addEventListener('load', () => {
Array.from(document.getElementsByTagName('img')).forEach(img => {
const src = img.getAttribute('data-src');
if (src) {
// Listen for both events:
img.addEventListener('load', imageLoaded);
img.addEventListener('error', imageError);
// Just to simulate a slow network:
setTimeout(() => {
img.setAttribute('src', src);
}, 2000 + Math.random() * 2000);
}
});
})
html,
body {
margin: 0;
height: 100%;
}
.images {
width: 100%;
height: 100%;
background: #000;
display: flex;
align-items: center;
overflow-x: scroll;
}
.margin-fix {
border-right: 1px solid transparent;
height: 16px;
}
img {
width: 16px;
height: 16px;
margin: 0 64px;
}
img.loaded {
width: auto;
height: 100%;
margin: 0;
}
img.error {
background: red;
border-radius: 100%;
/* You could add a custom "error" image here using background-image */
}
<div class="images">
<img
src="https://i.stack.imgur.com/RvfGz.gif"
data-src="https://d39a3h63xew422.cloudfront.net/wp-content/uploads/2014/07/20145029/driven-by-design-the-incomparable-lancia-stratos-1476934711918-1000x573.jpg" />
<img
src="https://i.stack.imgur.com/RvfGz.gif"
data-src="https://car-images.bauersecure.com/pagefiles/76591/1752x1168/ford_racing_puma_01.jpg?mode=max&quality=90&scale=down" />
<img
src="https://i.stack.imgur.com/RvfGz.gif"
data-src="http://doesntexist.com/image.jpg" />
<span class="margin-fix"></span>
</div>
The problem is that the spinner image you use initially might take some time to load.
One solution would be to use a data URI, so instead of:
<img src="https://i.stack.imgur.com/RvfGz.gif" data-src="actual-image.png" />
You would have:
<img src="data:image/gif;base64,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cXVlcnknPmZ1bmN0aW9uLm15c3FsLXF1ZXJ5PC9hPl06IENhbid0IGNvbm5lY3QgdG8gbG9jYWwgTXlTUUwgc2VydmVyIHRocm91Z2ggc29ja2V0ICcvdmFyL3J1bi9teXNxbGQvbXlzcWxkLnNvY2snICgyKSBpbiA8Yj4vaG9tZS9hamF4bG9hZC93d3cvbGlicmFpcmllcy9jbGFzcy5teXNxbC5waHA8L2I+IG9uIGxpbmUgPGI+Njg8L2I+PGJyIC8+CjxiciAvPgo8Yj5XYXJuaW5nPC9iPjogIG15c3FsX3F1ZXJ5KCkgWzxhIGhyZWY9J2Z1bmN0aW9uLm15c3FsLXF1ZXJ5Jz5mdW5jdGlvbi5teXNxbC1xdWVyeTwvYT5dOiBBIGxpbmsgdG8gdGhlIHNlcnZlciBjb3VsZCBub3QgYmUgZXN0YWJsaXNoZWQgaW4gPGI+L2hvbWUvYWpheGxvYWQvd3d3L2xpYnJhaXJpZXMvY2xhc3MubXlzcWwucGhwPC9iPiBvbiBsaW5lIDxiPjY4PC9iPjxiciAvPgo8YnIgLz4KPGI+V2FybmluZzwvYj46ICBteXNxbF9xdWVyeSgpIFs8YSBocmVmPSdmdW5jdGlvbi5teXNxbC1xdWVyeSc+ZnVuY3Rpb24ubXlzcWwtcXVlcnk8L2E+XTogQ2FuJ3QgY29ubmVjdCB0byBsb2NhbCBNeVNRTCBzZXJ2ZXIgdGhyb3VnaCBzb2NrZXQgJy92YXIvcnVuL215c3FsZC9teXNxbGQuc29jaycgKDIpIGluIDxiPi9ob21lL2FqYXhsb2FkL3d3dy9saWJyYWlyaWVzL2NsYXNzLm15c3FsLnBocDwvYj4gb24gbGluZSA8Yj42ODwvYj48YnIgLz4KPGJyIC8+CjxiPldhcm5pbmc8L2I+OiAgbXlzcWxfcXVlcnkoKSBbPGEgaHJlZj0nZnVuY3Rpb24ubXlzcWwtcXVlcnknPmZ1bmN0aW9uLm15c3FsLXF1ZXJ5PC9hPl06IEEgbGluayB0byB0aGUgc2VydmVyIGNvdWxkIG5vdCBiZSBlc3RhYmxpc2hlZCBpbiA8Yj4vaG9tZS9hamF4bG9hZC93d3cvbGlicmFpcmllcy9jbGFzcy5teXNxbC5waHA8L2I+IG9uIGxpbmUgPGI+Njg8L2I+PGJyIC8+CjxiciAvPgo8Yj5XYXJuaW5nPC9iPjogIG15c3FsX3F1ZXJ5KCkgWzxhIGhyZWY9J2Z1bmN0aW9uLm15c3FsLXF1ZXJ5Jz5mdW5jdGlvbi5teXNxbC1xdWVyeTwvYT5dOiBDYW4ndCBjb25uZWN0IHRvIGxvY2FsIE15U1FMIHNlcnZlciB0aHJvdWdoIHNvY2tldCAnL3Zhci9ydW4vbXlzcWxkL215c3FsZC5zb2NrJyAoMikgaW4gPGI+L2hvbWUvYWpheGxvYWQvd3d3L2xpYnJhaXJpZXMvY2xhc3MubXlzcWwucGhwPC9iPiBvbiBsaW5lIDxiPjY4PC9iPjxiciAvPgo8YnIgLz4KPGI+V2FybmluZzwvYj46ICBteXNxbF9xdWVyeSgpIFs8YSBocmVmPSdmdW5jdGlvbi5teXNxbC1xdWVyeSc+ZnVuY3Rpb24ubXlzcWwtcXVlcnk8L2E+XTogQSBsaW5rIHRvIHRoZSBzZXJ2ZXIgY291bGQgbm90IGJlIGVzdGFibGlzaGVkIGluIDxiPi9ob21lL2FqYXhsb2FkL3d3dy9saWJyYWlyaWVzL2NsYXNzLm15c3FsLnBocDwvYj4gb24gbGluZSA8Yj42ODwvYj48YnIgLz4K" data-src="actual-image.png" />
As you can see, your HTML document will grow fast using this approach, which is a problem.
A better approach might be to use CSS to add the spinner so that you only include the data URI once. To do that, you need to add an empty src attribute to your images initially anyway:
<img src data-src="actual-image.png" />
Or:
<img src="" data-src="actual-image.png" />
If you don't put it, the image will have an annoying gray border you can't get rid of until you add a src attribute.
function imageLoaded(e) {
updateImage(e.target, 'loaded');
}
function imageError(e) {
updateImage(e.target, 'error');
}
function updateImage(img, classname) {
// Add the right class:
img.classList.add(classname);
// Remove the data-src attribute:
img.removeAttribute('data-src');
// Remove both listeners:
img.removeEventListener('load', imageLoaded);
img.removeEventListener('error', imageError);
}
window.addEventListener('load', () => {
Array.from(document.getElementsByTagName('img')).forEach(img => {
const src = img.getAttribute('data-src');
if (src) {
// Listen for both events:
img.addEventListener('load', imageLoaded);
img.addEventListener('error', imageError);
// Just to simulate a slow network:
setTimeout(() => {
img.setAttribute('src', src);
}, 2000 + Math.random() * 2000);
}
});
})
html,
body {
margin: 0;
height: 100%;
}
.images {
width: 100%;
height: 100%;
background: #000;
display: flex;
align-items: center;
overflow-x: scroll;
}
.margin-fix {
border-right: 1px solid transparent;
height: 16px;
}
img {
width: 16px;
height: 16px;
margin: 0 64px;
background-image: url("data:image/gif;base64,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cXVlcnknPmZ1bmN0aW9uLm15c3FsLXF1ZXJ5PC9hPl06IENhbid0IGNvbm5lY3QgdG8gbG9jYWwgTXlTUUwgc2VydmVyIHRocm91Z2ggc29ja2V0ICcvdmFyL3J1bi9teXNxbGQvbXlzcWxkLnNvY2snICgyKSBpbiA8Yj4vaG9tZS9hamF4bG9hZC93d3cvbGlicmFpcmllcy9jbGFzcy5teXNxbC5waHA8L2I+IG9uIGxpbmUgPGI+Njg8L2I+PGJyIC8+CjxiciAvPgo8Yj5XYXJuaW5nPC9iPjogIG15c3FsX3F1ZXJ5KCkgWzxhIGhyZWY9J2Z1bmN0aW9uLm15c3FsLXF1ZXJ5Jz5mdW5jdGlvbi5teXNxbC1xdWVyeTwvYT5dOiBBIGxpbmsgdG8gdGhlIHNlcnZlciBjb3VsZCBub3QgYmUgZXN0YWJsaXNoZWQgaW4gPGI+L2hvbWUvYWpheGxvYWQvd3d3L2xpYnJhaXJpZXMvY2xhc3MubXlzcWwucGhwPC9iPiBvbiBsaW5lIDxiPjY4PC9iPjxiciAvPgo8YnIgLz4KPGI+V2FybmluZzwvYj46ICBteXNxbF9xdWVyeSgpIFs8YSBocmVmPSdmdW5jdGlvbi5teXNxbC1xdWVyeSc+ZnVuY3Rpb24ubXlzcWwtcXVlcnk8L2E+XTogQ2FuJ3QgY29ubmVjdCB0byBsb2NhbCBNeVNRTCBzZXJ2ZXIgdGhyb3VnaCBzb2NrZXQgJy92YXIvcnVuL215c3FsZC9teXNxbGQuc29jaycgKDIpIGluIDxiPi9ob21lL2FqYXhsb2FkL3d3dy9saWJyYWlyaWVzL2NsYXNzLm15c3FsLnBocDwvYj4gb24gbGluZSA8Yj42ODwvYj48YnIgLz4KPGJyIC8+CjxiPldhcm5pbmc8L2I+OiAgbXlzcWxfcXVlcnkoKSBbPGEgaHJlZj0nZnVuY3Rpb24ubXlzcWwtcXVlcnknPmZ1bmN0aW9uLm15c3FsLXF1ZXJ5PC9hPl06IEEgbGluayB0byB0aGUgc2VydmVyIGNvdWxkIG5vdCBiZSBlc3RhYmxpc2hlZCBpbiA8Yj4vaG9tZS9hamF4bG9hZC93d3cvbGlicmFpcmllcy9jbGFzcy5teXNxbC5waHA8L2I+IG9uIGxpbmUgPGI+Njg8L2I+PGJyIC8+CjxiciAvPgo8Yj5XYXJuaW5nPC9iPjogIG15c3FsX3F1ZXJ5KCkgWzxhIGhyZWY9J2Z1bmN0aW9uLm15c3FsLXF1ZXJ5Jz5mdW5jdGlvbi5teXNxbC1xdWVyeTwvYT5dOiBDYW4ndCBjb25uZWN0IHRvIGxvY2FsIE15U1FMIHNlcnZlciB0aHJvdWdoIHNvY2tldCAnL3Zhci9ydW4vbXlzcWxkL215c3FsZC5zb2NrJyAoMikgaW4gPGI+L2hvbWUvYWpheGxvYWQvd3d3L2xpYnJhaXJpZXMvY2xhc3MubXlzcWwucGhwPC9iPiBvbiBsaW5lIDxiPjY4PC9iPjxiciAvPgo8YnIgLz4KPGI+V2FybmluZzwvYj46ICBteXNxbF9xdWVyeSgpIFs8YSBocmVmPSdmdW5jdGlvbi5teXNxbC1xdWVyeSc+ZnVuY3Rpb24ubXlzcWwtcXVlcnk8L2E+XTogQSBsaW5rIHRvIHRoZSBzZXJ2ZXIgY291bGQgbm90IGJlIGVzdGFibGlzaGVkIGluIDxiPi9ob21lL2FqYXhsb2FkL3d3dy9saWJyYWlyaWVzL2NsYXNzLm15c3FsLnBocDwvYj4gb24gbGluZSA8Yj42ODwvYj48YnIgLz4K");
}
img.loaded {
width: auto;
height: 100%;
margin: 0;
}
img.error {
background: red;
border-radius: 100%;
/* You could add a custom "error" image here using background-image */
}
<div class="images">
<img
src
data-src="https://d39a3h63xew422.cloudfront.net/wp-content/uploads/2014/07/20145029/driven-by-design-the-incomparable-lancia-stratos-1476934711918-1000x573.jpg" />
<img
src
data-src="https://car-images.bauersecure.com/pagefiles/76591/1752x1168/ford_racing_puma_01.jpg?mode=max&quality=90&scale=down" />
<img
src
data-src="http://doesntexist.com/image.jpg" />
<span class="margin-fix"></span>
</div>
Other approaches might be to just hide the images initially with display: none for example, in which case you might want a wrapper around them to show something like an empty box to indicate the users that something will be shown in there, or even a spinner made with other elements if you want/need to get fancy.
What you can do is something like:
$(".sly-main-slider div img").attr('src', "#");
$(".sly-main-slider").addClass("loading");
$(".sly-main-slider div").hide();
$(".sly-main-slider div img").load(function() {
$(".sly-main-slider div").show();
$(".sly-main-slider").removeClass("loading");
}).attr('src', "https://loremflickr.com/400/600");
.loading {
position: absolute;
top: 10%;
left: 10%;
z-index: 2000;
background: url(http://1.bp.blogspot.com/-nfXo9GWbDtM/VOn0vr4yLMI/AAAAAAAABCA/dDNgd7_QCFo/s1600/block-loader.gif) no-repeat center center;
height: 32px;
width: 32px;
}
.loading:after {
position: absolute;
top: 8px;
left: 40px;
content: 'Loading...';
}
body {
position: relative;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='sly-main-slider'>
<div>
<img src="https://loremflickr.com/400/600" alt="" />
</div>
</div>
Preview of how it should be: https://www.youtube.com/embed/8qKRf0cg3Co
As in the video, I have to click on the img to get a large view of the img under it.
So far this is my code:
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JQUERY</title>
<script src="jquery/jquery-2.1.1.min.js"></script></head>
<body>
<center>
<div id="wrapper">
<div id="nav">
<div id="overbalk"></div>
<img src="images/foto_01.png" align="top" class="foto" />
<img src="images/foto_02.png" align="top" class="foto" />
<img src="images/foto_03.png" align="top" class="foto" />
<img src="images/foto_04.png" align="top" class="foto" />
</div>
<div id="content">
<img src="images/foto_01.png" align="top" class="slide_foto" />
</div>
</div>
</center>
</body>
</html>
CSS:
<style>
body {
padding: 0;
margin: 0;
background-color: black;
}
#nav {
width: 600px;
margin: 0px auto;
}
#overbalk {
width: 600px;
height: 30px;
position: absolute;
background-color: black;
}
.foto {
width: 75px;
height: 75px;
margin-top: -20px;
border: 1px solid black;
}
.foto:hover {
cursor: pointer;
}
#content {
position: absolute;
top: 50px;
z-index: -2;
width: 100%;
}
.slide_foto {
margin-left:-3200px;
}
</style>
JS:
$(document).ready(function (){
$('.foto').mouseenter(function () {
$(this).animate({marginTop: '+=50'}, 200);
});
$('.foto').mouseleave(function (){
$(this).animate({marginTop: '-=50'}, 200);
});
$('.foto').click(function () {
$(this).next('#content').show();
});
});
I also tried this:
$('.foto').on('click', function () {
$('#content').html(nieuwe_foto).show();
var nieuwe_foto = $(this).attr('src');
$('.slide_foto').attr('src', nieuwe_foto);
}
None of this worked, and got a little bit stuck, the images aren't showing below the small images.
You need to make 2 changes:
Remove this style class from <style>
.slide_foto {
margin-left:-3200px;
}
Make this change in your onclick handler
$('.foto').on('click', function () {
var nieuwe_foto = $(this).prop('src');
$('.slide_foto').prop('src', nieuwe_foto);
});
I have made a working fiddle with sample images https://jsfiddle.net/sachin_puthran/c2qgjpj1/
The following doesn't do anything since nieuwe_foto is undefined until the next line and div#content is already visible .show() doesn't do anything either.
$('#content').html(nieuwe_foto).show();
The .show() isn't what you're looking for. It will essentially "unhide" an element. So if an element has a display: none style then .show() will restore the initial display style. See the docs.
You're closer with your second attempt though. All you want to do in the $('.foto').click function is set the src of the .slide_foto element to what is currently in the src of the this object.
I am converting flash banner into html5 banner . Everything is working fine except the text animation. The text should work like this but my text is working fine but it is coming over the border it should work like my image animation which is working within the border. Here is my code http://jsfiddle.net/tU9LV/
<div id = "wrapper" >
<div id="mainContainer">
<div>
<img id="introImg" src="http://i.imgur.com/FClbHjn.png"/>
</div>
<div id="images">
<p id="headline1Txt" >Striped Bag</p><br />
<p id="headline2Txt" >$14</p><br />
<p id="headline3Txt" >Sale $25</p><br />
</div>
<div id="ctaBtn">
<button class="btn btn-primary" type="button">SHOP NOW</button>
</div>
</div>
</div>
$(document).ready(function () {
bannerAnimation();
});
function bannerAnimation(){
//Jquery Animation
$("#introImg").animate({ width: "120px",
height: "140px"
}, 1000);
$("#headline1Txt").animate({ left: "20" }, 500, function () {
$("#headline1Txt").animate({ left: "10" }, 200);
});
setTimeout(function () {
$("#headline2Txt").animate({ left: "20" }, 500, function () {
$("#headline3Txt").animate({ left: "20" }, 500, function () {
$("#headline3Txt").animate({ left: "10" }, 200);
});
$("#headline2Txt").animate({ left: "10" }, 200);
});
}, 1000);
}* {
margin:0;
padding:0;
}
#wrapper {
outline: 12px solid rgba(186,202,228 , 1);
width:285px;
height:235px;
position: absolute;
}
#mainContainer{
background: url('https://secure-ds.serving-sys.com/BurstingRes/Site-8188/Type-0/5fefb401-b187-4d82-b4db-cbd2ef29cc48.gif');
width:285px;
height:235px;
overflow: hidden;
position: fixed;
}
#introImg{
position:absolute;
top:80px;
left:150px;
right:100px;
opacity: 100;
}
#ctaBtn{
top:200px;
left:15px;
position:absolute;
}
#headline1Txt, #headline2Txt, #headline3Txt
{
position:absolute;
overflow: hidden;
margin:60px 8px;
left: -120px;
}
#headline2Txt, #headline3Txt
{
font-size:21px;line-height: 2.0;
}
#headline1Txt
{
font-size:26px;line-height: 1.5;
}
The simple solution for this if you can't change your background image is to layover a div for the borders..
http://jsfiddle.net/K3SXu/
I've added:
<div id="borders"></div>
to the html.
and:
#borders { position:absolute; top:0; left:0; z-index:999; border:12px solid rgba(186,202,228,1); width:285px; height:235px;}
to the css. and also removed the 'outline' property from the #wrapper.
it works :)
I am new to this so please bear with me if my question is obviously stupid. I am trying to incorporate the slideshow as shown in this site using caroufredsel http://coolcarousels.frebsite.nl/c/48/
Now I needed to add captions to the images. so after trying to tweak the code unsuccessfully, I created a workaround where I created another carousel for just the captions and synchronized it with the main carousel. It worked that the captions appeared just fine but now I am not able to synchronize it with the click function/feature on the main carousel. if I comment the click function out , it works splendidly, but I need that click function. what am I doing wrong or is there an easier way to do what I want. I went thru the documentation and tried to incorporate a new div with id "item". but then the entire "pager" section disappears etc. I will include the full code here. thanks in advance for the help.
my css looks like this::
html, body {
height: 100%;
padding: 0;
margin: 0px;
}
body {
min-height: 400px;
}
#wrapper {
width: 697px;
height: 400px;
margin: -155px 0 0 -330px;
position: absolute;
top: 270px;
left: 50%;
box-shadow: 0px 1px 20px #c5a101;
border:3px solid #c5a101;
background-color: rgba(246,217,90,0.9);
}
#carousel {
width: 580px;
height: 360px;
overflow: hidden;
position: relative;
z-index: 2;
float:left;
}
#carousel img {
display: block;
float: left;
}
#pager {
width: 112px;
height: 350px;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
}
#pager div {
height: 81px;
width: 100px;
box-shadow: 0px 0px 5px #c5a101;
}
#pager img {
cursor: pointer;
display: block;
height: 81px;
width: 112px;
margin-bottom: 5px;
float: left;
border:3px solid #c5a101;
cursor:default;
}
#texts-wrapper {
width: 700px;
height: 50px;
float: left;
}
#texts > div {
width: 300px;
height: 50px;
position: relative;
float: left;
margin-top: auto;
}
#texts > div > div {
width: 700px;
position: absolute;
left: 2px;
bottom: 5px;
float: right;
padding-top: 25px;
}
#texts a {
color:#083377;
font-family:Trajan Pro;
font-size: 16px;
font-weight: bold;
text-shadow: 0 1px 2px rgba(0,0,0,0.4);
text-decoration: none;
outline: none;
display: block;
background-color: rgba(248,229,145,0.4);
border: 1px solid rgba(246,217,90,0.4);
width: 700px;
height: 85px;
padding-left: 10px;
}
#texts a:hover {
background-color: rgba(255,208,0,0.9);
box-shadow: 0px 2px 15px #c5a101;
color: rgba(227,75,76,0.7);
}
my html code looks like this::
<div id="wrapper">
<div id="inner">
<div id="carousel">
<img src="img/building.jpg" width="580" height="350" />
<img src="img/guytalkingtokids.jpg" width="580" height="350" />
<img src="img/group.jpg" width="580" height="350" />
<img src="img/oath.jpg" width="580" height="350" />
<img src="img/finalists.jpg" width="580" height="350" />
</div>
<div id="pager"></div>
</div>
<div id="texts-wrapper">
<div id="texts">
<div>
<a style="text-decoration:none; " href="blank.html" >
<div><p>The red building across the street.</p> </div></a>
</div>
<div>
<a style="text-decoration:none;" href="blank.html" >
<div><p>How yall doin? blah blah</p> </div></a>
</div>
<div>
<a style="text-decoration:none;" href="blank.html" >
<div><p>Lotsa ppl!.</p></div></a>
</div>
<div>
<a style="text-decoration:none;" href="blank.html" >
<div><p>I put another caption!</p></div></a>
</div>
<div>
<a style="text-decoration:none;" href="blank.html" >
<div> <p>Yay! We won?! How?!</p></div></a>
</div>
</div>
</div>
</div>
And my script tag looks like::
$(function() {
var $carousel = $('#carousel'),
$pager = $('#pager');
// gather the thumbnails
var $thumb = $( '<div class="thumb" />' );
$carousel.children().each(function() {
var src = $(this).attr( 'src' );
$thumb.append( '<img src="' + src.split('/large/').join('/small/') + '" />' );
});
// duplicate the thumbnails
for (var a = 0; a < $carousel.children().length - 1; a++) {
$pager.append( $thumb.clone() );
}
// create large carousel
$carousel.carouFredSel({
items: {
visible: 1,
width: 580,
height: 350
},
//auto:false,/* temporary: to stop automatic scrolling */
scroll: {
fx: 'directscroll',
pauseOnHover:true,
duration: 500,
timeoutDuration: 5500,
onBefore: function( data ) {
var oldSrc = data.items.old.attr('src').split('/large/').join('/small/'),
newSrc = data.items.visible.attr('src').split('/large/').join('/small/'),
$t = $thumbs.find('img:first-child[src="' + newSrc + '"]').parent();
$t.trigger('slideTo', [$('img[src="' + oldSrc + '"]', $t), 'next']);
}
}
});
// create thumb carousels
var $thumbs = $('.thumb');
$thumbs.each(function( i ) {
$(this).carouFredSel({
auto: false,
scroll: {
fx: 'directscroll'
},
responsive:true,
items: {
start: i+1,
visible: 1,
width: 112,
height: 89.6
}
});
// click the carousel---> comment out this portion to disable the click function on small images
$(this).click(function() {
var src = $(this).children().first().attr('src').split('/small/').join('/large/');
$carousel.trigger('slideTo', [$('img[src="' + src + '"]', $carousel), 'next']);
});
});
// comment out the click function and uncomment this section of #texts to have a synchronised carousel with captions but no click function
$('#texts').carouFredSel({
items: 1,
direction: 'left',
responsive:true,
auto: {
play: true,
duration: 500,
easing: 'quadratic',
timeoutDuration: 5500
}
});
});
Now I used jquery version 1.8.2 and caroufredsel version 6.2.1. thanks again for the help in advance. sorry if my code looks messy as well.Latest update as of 3/22/2014:: I went thru the documentation of the plugin CarouFredSel and stumbled upon one of the settable parameters/ configurations called "synchronise". If I understood it right, I can synchronise 2 carousels to respond to the same event. So i added the line of code "synchronise:{"#carousel"} into the text carousel to tell it to synchronise it with the main carousel...
$('#texts').carouFredSel({
items: 1,
direction: 'left',
responsive:true,
synchronise:{"#carousel"},/*This is the new line I added*/
auto: {
play: true,
duration: 500,
easing: 'quadratic',
timeoutDuration: 5500
}
});
Unfortunately that did not work as well. Now there is no timing pattern as well. everytime I click the small image it just went ahead in position at a random rate. So I am still stuck with the same problem if not making it worse. Thanks for the help in advance.
After fighting with the problem for more than a week, I was able to figure out a solution to my problem. Now it may not be the best solution but it worked and hence I am posting it so that in future if somebody else has the same or similar problem, it may be of help.Now if anyone came up with a solution that works better, I would still like you to post it here for I may want to learn what you did, why you did it and learn from the experience. I dont claim to be an expert programmer. I am still learning and this site has been a great learning tool for me so far.Anyway coming back to the problem, I added this piece of code...
//sais try: synchronise texts and carousel to work together and on click
var index = $(this).triggerHandler( 'currentPosition' );
if ( index == 0 ) {
index = $(this).children().length;
}
// trigger the titles carousel
$('#texts').trigger('slideTo', [ index, 'next' ]);
right here...
// create large carousel
$carousel.carouFredSel({
items: {
visible: 1,
width: 580,
height: 350
},
//auto:false,/* temporary: to stop automatic scrolling */
scroll: {
fx: 'directscroll',
pauseOnHover:true,
duration: 500,
timeoutDuration: 3500,
onBefore: function( data ) {
var oldSrc = data.items.old.attr('src').split('/large/').join('/small/'),
newSrc = data.items.visible.attr('src').split('/large/').join('/small/'),
$t = $thumbs.find('img:first-child[src="' + newSrc + '"]').parent();
$t.trigger('slideTo', [$('img[src="' + oldSrc + '"]', $t), 'next']);
/* [ the code goes here!]*/
now with that i was able to synchronise the carousels (#carousel, #texts) together to work with the click function/feature as well. Also I had tried to synchronise the carousel using a synchronise function thats in carouFredSel. Well take that out. It did not work.I dont know if this is going to be useful to anyone else but if it did, thats great. But again if somebody came up with a better solution please do let me know as well. Thanks. Keep up the goo work