CarouFredSel Window Resizing - javascript

Im very new to this (so you'll have to dumb it down for me) and i'm trying to understand how to make my CarouFredsel Slider shrink and stay proportional when the browser size is changed. The images cut off and move to the right, and sliders width changes, but not height. Thank for the help in advance.
Heres a link: https://brandon-mciver.squarespace.com
Here is all of my code.
<script type="text/javascript">
$(function() {
$('#slider').carouFredSel({
width: '100%',
align: false,
items: 3,
items: {
width: $('#wrapper').width() * 0.15,
height: 400,
visible: 1,
minimum: 1
},
scroll: {
items: 1,
timeoutDuration : 6000,
onBefore: function(data) {
// find current and next slide
var currentSlide = $('.slide.active', this),
nextSlide = data.items.visible,
_width = $('#wrapper').width();
// resize currentslide to small version
currentSlide.stop().animate({
width: _width * 0.15
});
currentSlide.removeClass( 'active' );
// hide current block
data.items.old.add( data.items.visible ).find( '.slide-block' ).stop().fadeOut();
// animate clicked slide to large size
nextSlide.addClass( 'active' );
nextSlide.stop().animate({
width: _width * 0.7
});
},
onAfter: function(data) {
// show active slide block
data.items.visible.last().find( '.slide-block' ).stop().fadeIn();
}
},
onCreate: function(data){
// clone images for better sliding and insert them dynamacly in slider
var newitems = $('.slide',this).clone( true ),
_width = $('#wrapper').width();
$(this).trigger( 'insertItem', [newitems, newitems.length, false] );
// show images
$('.slide', this).fadeIn();
$('.slide:first-child', this).addClass( 'active' );
$('.slide', this).width( _width * 0.15 );
// enlarge first slide
$('.slide:first-child', this).animate({
width: _width * 0.7
});
// show first title block and hide the rest
$(this).find( '.slide-block' ).hide();
$(this).find( '.slide.active .slide-block' ).stop().fadeIn();
}
});
// Handle click events
$('#slider').children().click(function() {
$('#slider').trigger( 'slideTo', [this] );
});
// Enable code below if you want to support browser resizing
$(window).resize(function(){
var slider = $('#slider'),
_width = $('#wrapper').width();
// show images
slider.find( '.slide' ).width( _width * 0.15 );
// enlarge first slide
slider.find( '.slide.active' ).width( _width * 0.7 );
// update item width config
slider.trigger( 'configuration', ['items.width', _width * 0.15] );
});
})
</script>
<style type="text/css" media="all">
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background: #f9f9f3;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #222;
line-height: 20px;
}
#wrapper {
max-height: 100%;
max-width: 100%;
padding-top: none;
border: 0px solid #fff;
background-color: #fff;
}
#slider {
margin: 75px 0 0 0;
height: 100%;
overflow: hidden;
background: url(https://brandon-mciver.squarespace.com/s/ajax-loader.gif) center center no-repeat;
}
#slider .slide {
position: relative;
display: none;
height: 400px;
float: left;
background-position: center right;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
border-left: 1px solid #fff;
}
#slider .slide:first-child {
border: none;
}
#slider .slide.active {
cursor: default;
}
#slider .slide-block {
position: absolute;
left: 40px;
bottom: 75px;
display: inline-block;
width: 435px;
background-color: #fff;
background-color: rgba(255,255,255, 0.8);
padding: 20px;
font-size: 14px;
color: #134B94;
border: 1px solid #fff;
overflow: hidden;
border-radius: 4px;
}
#slider .slide-block h4 {
font-size: 36px;
font-weight: bold;
margin: 0 0 10px 0;
line-height: 1;
}
#slider .slide-block p {
margin: 0;
}
</style>
<div id="wrapper">
<div id="slider">
<div class="slide" style="background-image: url(https://brandon- mciver.squarespace.com/s/Rotator_TryChurch_3-1-a0wb.jpg);">
<div class="slide-block">
<h4>Title</h4>
<p>Text</p>
</div>
</div>
<div class="slide" style="background-image: url(https://brandon-mciver.squarespace.com/s/Rotator_TryChurch_3-1-a0wb.jpg);">
<div class="slide-block">
<h4>Title</h4>
<p>Text</p>
</div>
</div>
<div class="slide" style="background-image: url(https://brandon-mciver.squarespace.com/s/Rotator_TryChurch_3-1-a0wb.jpg);">
<div class="slide-block">
<h4>Title</h4>
<p>Text</p>
</div>
</div>
</div>
</div>

Related

How to put scroll bar in vertical position and also how to move images with up and down arrows?

I am having difficulty to put the scroll bar in a vertical position instead of horizontal. Also, I want to slide images with up
and down arrow key of the keyboard. Please help me I have an
assignment due. I'll appreciate your help.
For more information please check my code into jsfiddle https://jsfiddle.net/mgj7hb0k/
The code below is from HTML file
<div class="slider-wrap">
<div class="slider" id="slider">
<div class="holder">
<div class="slide" id="slide-0"><span class="temp">74°</span></div>
<div class="slide" id="slide-1"><span class="temp">64°</span></div>
<div class="slide" id="slide-2"><span class="temp">82°</span></div>
</div>
</div>
<nav class="slider-nav">
Slide 0
Slide 1
Slide 2
</nav>
</div>
CSS file. I have added some styles into separate css file.The "slider" (visual container) and the slides need to have explicity the same size. We'll use pixels here but you could make it work with anything.
#import url(https://fonts.googleapis.com/css?family=Josefin+Slab:100);
.slider-wrap {
width: 300px;
height: 500px;
margin: 20px auto;
}
.slider {
overflow-x: scroll;
}
.holder {
width: 300%;
}
.slide {
float: left;
width: 300px;
height: 500px;
position: relative;
background-position: -100px 0;
}
.temp {
position: absolute;
color: white;
font-size: 100px;
bottom: 15px;
left: 15px;
font-family: 'Josefin Slab', serif;
font-weight: 100;
}
#slide-0 {
background-image: url(http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg);
}
#slide-1 {
background-image: url(http://farm8.staticflickr.com/7384/8730654121_05bca33388_z.jpg);
}
#slide-2 {
background-image: url(http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg);
}
.slide:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40%;
background: linear-gradient(transparent, black);
}
.slider-nav {
text-align: center;
margin: 10px 0 0 0;
}
.slider-nav a {
width: 10px;
height: 10px;
display: inline-block;
background: #ddd;
overflow: hidden;
text-indent: -9999px;
border-radius: 50%;
}
.slider-nav a.active {
background: #999;
}
We're going to use jQuery here because we love life. Our goal is the adjust the background-position of the slides as we scroll. We can set background-position in percentages in CSS, but that alone doesn't do the cool hide/reveal more effect we're looking for. Based the amount scrolled (which we can measure in JavaScript), we'll adjust the background-position. Alone, that would look something like this:
Js file
var slider = {
// Not sure if keeping element collections like this
// together is useful or not.
el: {
slider: $("#slider"),
allSlides: $(".slide"),
sliderNav: $(".slider-nav"),
allNavButtons: $(".slider-nav > a")
},
timing: 800,
slideWidth: 300, // could measure this
// In this simple example, might just move the
// binding here to the init function
init: function() {
this.bindUIEvents();
},
bindUIEvents: function() {
// You can either manually scroll...
this.el.slider.on("scroll", function(event) {
slider.moveSlidePosition(event);
});
// ... or click a thing
this.el.sliderNav.on("click", "a", function(event) {
slider.handleNavClick(event, this);
});
// What would be cool is if it had touch
// events where you could swipe but it
// also kinda snapped into place.
},
moveSlidePosition: function(event) {
// Magic Numbers =(
this.el.allSlides.css({
"background-position": $(event.target).scrollLeft()/6-100+ "px 0"
});
},
handleNavClick: function(event, el) {
event.preventDefault();
var position = $(el).attr("href").split("-").pop();
this.el.slider.animate({
scrollLeft: position * this.slideWidth
}, this.timing);
this.changeActiveNav(el);
},
changeActiveNav: function(el) {
this.el.allNavButtons.removeClass("active");
$(el).addClass("active");
}
};
slider.init();

jQuery each() first iteration is wrong, the rest are correct

So, I'm creating a piece of code so the images in my div are automatically centered and adjusted, so they fit in a squared box.
Currently, I've managed to do so, but, something is wrong with the first iteration, because I get the wrong result, let me show you the code.
// news section height calculator
$(window).load(function () {
$('.news-picture').find('img').each(function () {
var screenImage = $(this);
var theImage = new Image();
theImage.src = screenImage.attr("src");
// Get accurate measurements from that.
var imageWidth = theImage.width;
var imageHeight = theImage.height;
var $imgClass = (imageWidth / imageHeight);
var $imgPos = -((imageWidth - $(window).width()) / 2);
console.log(imageWidth);
console.log($(window).width());
if ($imgClass >= 1) {
$(this).addClass('wide').css("left" , $imgPos);
} else {
$(this).addClass('tall');
}
});
});
<div class="news-picture">
<?php the_post_thumbnail('large'); ?>
<div class="news-title">
<h1><?php the_title(); ?></h1>
<div class="datetime"><span><time datetime="<?php the_time('l, F j, Y'); ?>"><?php the_time('l, F j, Y'); ?></time></span></div>
</div>
</div>
As you may notice, I'm working with Wordpress, and specifically with post images.
The case; The iteration runs 3 times, it is supposed to assign a class, and a left value, which will center the image.
But, the first iteration gets the height value of the second iteration, which in first place should be getting the width, of its own iteration. Weird huh.
I'll attach an image of what i'm trying to accomplish, maybe you have suggestions as to how to approach this dilemma.Structure
Thank you for paying attention, I actually fixed by adding two lines only, specifying the current and rendered width and height of the image.
// news section height calculator
$(window).load(function () {
$('.news-picture').find('img').each(function () {
var screenImage = $(this);
var theImage = new Image();
theImage.src = screenImage.attr("src");
theImage.width = screenImage.attr("width");
theImage.height = screenImage.attr("height");
// Get accurate measurements from that.
var imageWidth = theImage.width;
var imageHeight = theImage.height;
var $imgClass = (imageWidth / imageHeight);
var $imgPos = -((imageWidth - $(window).width()) / 2);
console.log(imageWidth);
console.log($(window).width());
if ($imgClass >= 1) {
$(this).addClass('wide').css("left" , $imgPos);
} else {
$(this).addClass('tall');
}
});
});
body {
margin:0;
}
.news-content {
background-color: #fff;
margin: 25px auto;
}
.news-picture {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
position: relative;
overflow: hidden;
width: 100vw;
height: 100vw;
margin: 0 auto;
}
.news-picture:after {
-moz-box-shadow: 0 0 10em #000 inset;
-webkit-box-shadow: 0 0 10em #000 inset;
box-shadow: 0 0 10em #000 inset;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
}
.news-picture a {
border: 0;
display: block;
}
.wide {
height: 100vw;
width: auto;
max-width: initial;
position: relative;
}
h1 {
}
.news-title {
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
position: absolute;
bottom: 0;
width: 100%;
}
.news-title h1 {
padding: 15px 10px 0 10px;
margin: 0;
text-align: center;
line-height: 22px;
font-size: 16px;
}
.news-title h1 a {
color: #fff;
margin: 0;
text-decoration: none;
font-family: "Oswald", sans-serif;
}
.datetime {
font-family: "Titillium Web", sans-serif;
font-size: 10px;
padding: 5px;
margin-bottom: 5px;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="news-container">
<div class="news-content">
<div class="news-picture">
<img width="1298px" height="934px" src="http://www.elliotjaystocks.com/assets/article_digest_1.png">
<div class="news-title">
<h1>First Iteration of the problem</h1>
<div class="datetime"><span><time datetime="Sunday, October 23, 2016">Sunday, October 23, 2016</time></span></div>
</div>
</div>
</div>
<div class="news-content">
<div class="news-picture">
<img src="https://guides.area17.com/app/uploads/sites/2/2015/10/05.08_AI_smart_guides-680x301.png">
<div class="news-title">
<h1>Second Iteration of the problem</h1>
<div class="datetime"><span><time datetime="Sunday, October 23, 2016">Sunday, October 23, 2016</time></span></div>
</div>
</div>
</div>
<div class="news-content">
<div class="news-picture">
<img src="https://s-media-cache-ak0.pinimg.com/736x/d6/05/49/d60549cbc19204feee1a672f71e43cee.jpg">
<div class="news-title">
<h1>Third Iteration of the problem</h1>
<div class="datetime"><span><time datetime="Sunday, October 23, 2016">Sunday, October 23, 2016</time></span></div>
</div>
</div>
</div>
</div>

Move to specific div based on button click

I was trying to move the divs (here it's question number) based on the prev and next button. So that the selected question is always visible on screen.
Here is the demo : http://jsfiddle.net/arunslb123/trxe4n3u/12/
Screen :
click and question number and click prev or next button to understand my issue.
My code :
$("#next")
.click(function () {
$(".c.current-question")
.each(function () {
var divIdx = $(this)
.attr('id');
var scrollTo = $('#' + divIdx)
.position()
.left;
$("#scrollquestion")
.animate({
'scrollLeft': scrollTo
}, 800);
});
});
$("#prev")
.click(function () {
$(".c.current-question")
.each(function () {
var divIdx = $(this)
.attr('id');
var scrollTo = $('#' + divIdx)
.position()
.left;
$("#scrollquestion")
.animate({
'scrollLeft': -scrollTo
}, 800);
});
});
Using scrollLeft is a bit tricky. I did a small redo of your use-case based on positioning and then moving it based on left of the container. The tricky part is to reliably calculate the negative position when scrolled to the extreme right. Also, need to take into account the widths and margins.
Check the below snippet:
var $wrap = $("#numWrap"), $strip = $("#strip"),
$leftArrow = $(".wrapper > .arrows").first(),
wrapWidth = $wrap.width() + $leftArrow.width(),
margin = 10;
fill(20); select($(".numberItem").first());
$strip.on("click", ".numberItem", function() { select($(this)); });
function select($elem) {
$(".numberItem").removeClass("selected");
$elem.addClass("visited").addClass("selected");
focus($elem[0]);
}
function focus(elem) {
var stripPos = $strip.position(),
numPos = $(elem).offset(),
elemWidth = $(elem).width() + margin,
numRight = numPos.left + elemWidth;
if (numRight > wrapWidth) {
$strip.css({"left": stripPos.left - elemWidth});
}
if (numPos.left < (margin + $leftArrow.width())) {
$strip.css({"left": stripPos.left + elemWidth});
}
}
$(".wrapper").on("click", "a.arrow", function() {
var stripPos = $strip.position();
if (this.id == "lft") {
$strip.css({"left": stripPos.left + (wrapWidth / 2)});
} else {
$strip.css({"left": stripPos.left - (wrapWidth / 2)});
}
});
$(".controls").on("click", "a.arrow", function() {
var $sel = $(".selected"), numPos, $sel, elemWidth;
$elem = $sel.length > 0 ? $sel.first() : $(".numberItem").first();
if (this.id == "lft") {
$sel = $elem.prev().length > 0 ? $elem.prev() : $elem;
select($sel);
} else {
$sel = $elem.next().length > 0 ? $elem.next() : $elem;
select($sel);
}
numPos = $sel.offset(); elemWidth = $sel.width() + margin;
numRight = numPos.left + elemWidth;
if (numPos.left > wrapWidth) {
$strip.css({"left": -($sel.text()) * $sel.width() });
}
if (numRight < 0) {
$strip.css({"left": +($sel.text()) * $sel.width() });
}
});
function fill(num){
for (var i = 1; i <= num; i++) {
var $d = $("<a href='#' class='numberItem'>" + i + "</a>");
$strip.append($d);
}
}
* { box-sizing: border-box; padding: 0; margin: 0; font-family: sans-serif; }
div.wrapper {
background-color: #ddd; width: 100vw; height: 64px;
clear: both; overflow: hidden; margin-top: 16px;
}
div.arrows {
float: left; width: 10%; min-width: 24px; height: 64px; line-height: 64px;
text-align: center; vertical-align: middle; overflow: hidden;
}
div.numWrap {
float: left; height: 64px; line-height: 64px;
width: 80%; vertical-align: middle;
overflow: hidden; position: relative;
}
div.strip {
position: absolute; left: 0px;
width: auto; white-space: nowrap;
transition: left 1s;
}
a.numberItem {
display: inline-block; text-align: center; margin: 0px 8px;
background-color: #fff; border-radius: 50%; width: 48px; height: 48px;
font-size: 1.2em; line-height: 48px; text-decoration: none;
}
a.numberItem.visited { background-color: #fff; color: #000; border: 2px solid #01aebc; }
a.numberItem.selected { background-color: #01aebc; color: #fff; }
div.controls { clear: both; }
div.controls > div.arrows { width: auto; margin: 0 12px; }
a, a:focus, a:active, a:link, a:visited {
display: inline-block;
text-decoration: none; font-weight: 600;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="arrows">
<a id="lft" class="arrow" href="#">〈</a>
</div>
<div id="numWrap" class="numWrap">
<div id="strip" class="strip"></div>
</div>
<div class="arrows">
<a id="rgt" class="arrow" href="#">〉</a>
</div>
</div>
<div class="controls">
<div class="arrows">
<a id="lft" class="arrow" href="#">〈 Previous</a>
</div>
<div class="arrows">
<a id="rgt" class="arrow" href="#">Next 〉</a>
</div>
<div>
Explanation:
Using absolute positioning on the number container, which is nested to get 100% width.
Markup:
<div class="wrapper">
<div class="arrows"><a id="lft" class="arrow" href="#">〈</a></div>
<div id="numWrap" class="numWrap">
<div id="strip" class="strip"></div> <!-- nesting here -->
</div>
<div class="arrows"><a id="rgt" class="arrow" href="#">〉</a></div>
</div>
CSS:
div.wrapper {
background-color: #ddd; width: 100vw; height: 64px;
clear: both; overflow: hidden; margin-top: 16px;
}
div.arrows {
float: left; width: 10%; min-width: 24px; height: 64px; line-height: 64px;
text-align: center; vertical-align: middle; overflow: hidden;
}
div.numWrap {
float: left; height: 64px; line-height: 64px;
width: 80%; vertical-align: middle;
overflow: hidden; position: relative; /* relatively positioned */
}
div.strip {
position: absolute; left: 0px; /* absolutely positioned */
width: auto; white-space: nowrap;
transition: left 1s; /* instead of jquery animate */
}
With this structure, we can now use left to control the scrolling.
For partially obscured numbers, try to gently focus-in (nudge into view) a number which is partially obscured. This can be done by checking the position relative to parent and adding the width/margin to it and also accounting for width of the left arrow (it might peep thru).
Javascript:
function focus(elem) {
var stripPos = $strip.position(),
numPos = $(elem).offset(),
elemWidth = $(elem).width() + margin,
numRight = numPos.left + elemWidth;
// if it is towards right side, nudge it back inside
if (numRight > wrapWidth) {
$strip.css({"left": stripPos.left - elemWidth});
}
// if it is towards left side, nudge it back inside
if (numPos.left < (margin + $leftArrow.width())) {
$strip.css({"left": stripPos.left + elemWidth});
}
}
Once the user has scrolled the list too far and then tries to click on previous / next buttons to select a question, then we need to move the entire container upto the selected number. We can easily do this by multiplying the question number with element width and then changing the left in positive (if towards right) or in negative (if towards left).
Javascript:
// if left of element is more than the width of parent
if (numPos.left > wrapWidth) {
$strip.css({"left": -($sel.text()) * $sel.width() });
}
// if right of element is less than 0 i.e. starting position
if (numRight < 0) {
$strip.css({"left": +($sel.text()) * $sel.width() });
}
Here is a fiddle to play with: http://jsfiddle.net/abhitalks/aw166qhx/
You will need to further adapt it to your use-case, but you get the idea.

Tooltip positioning with jQuery's .offset()

UPDATE - Still unresolved, last updated 9 p.m.
Problem
a) How do I use .offset() to position these tooltips relatively close to their image (ie. If I click on the "Allum" headshot, their tooltip pops up above their image)
Where I'm at
I'm trying to use jQuery's .offset() so that when an image (.headshot in index.html) of a politician is clicked, the tooltip/popup, containing information about their age, party etc. is positioned pretty close to their image. Right now I have dynamic content being pulled into these tooltips, but it's always in the same spot.
scripts.js (Politician and Positioning snippet)
// Shows a popup with MLA information
$(".headshot").click(function(){
var idx = $(this).index();
$(".tooltip").fadeIn("slow");
$(".tooltipName").html(MLAs[idx].Name);
$(".tooltipParty").html(MLAs[idx].Party).prepend("<strong>Party: </strong>");
$(".tooltipConstuency").html(MLAs[idx].Constuency).prepend("<strong>Constuency: </strong>");
$(".tooltipEthnicity").html(MLAs[idx].Ethnicity).prepend("<strong>Ethnicity: </strong>");
$(".tooltipAge").html(MLAs[idx].Age).prepend("<strong>Age: </strong>").append(" years old");
});
// Positioning of the tooltips
$('img').each(function(){
var img = $(this);
img.click(function(){
$('.tooltip').show(100)
// .text(img.attr('alt'))
.offset({
top: img.offset().top + img.height(),
left: img.offset().left
});
});
});
index.html(Headshot snippet)
<div class="columns">
<img src="assets/img/headshots/allan.jpg" alt="" id="0" class="headshot NDP Female White">
<img src="assets/img/headshots/allum.jpg" alt="" id="1" class="headshot NDP Male White">
<img src="assets/img/headshots/altemeyer.jpg" alt="" id="2" class="headshot NDP Male White">
</div>
tooltip.scss
/*----------------------------------
TOOLTIP
----------------------------------*/
.tooltip {
display: none;
position: relative;
left: 45px;
top: -5px;
}
.info {
#include serifLight;
background: $yellow;
color: $black;
font-size: 1.4rem;
padding: 12px;
width: 15%;
// text-align: center;
p {
margin: 0px;
padding-top: 2%;
}
}
.tooltipName, {
font-family: 'Roboto Slab',serif;
font-weight: 700;
}
.label {
color: $b;
display: inline;
padding-top: 1.5%;
}
.tooltipEthnicity, .tooltipAge {
display: block;
}
.arrow-down {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 20px solid $yellow;
position: relative;
left: 29px;
}
try this :
var position = $el.data('.elem'),
ImagePosition = $el.offset(),
ImageSize = {
'width': $el.outerWidth(),
'height': $el.outerHeight()
};
'top': ImagePosition.top - el.outerHeight()
'left': ImagePosition.left - (elelment.outerWidth()/2) + (elementSize.width/2)

Alternating Background Image on Load

I am using bootstrap in my rails 4 app.
I've just given up on trying to integrate the bootstrap carousel into my page. (it pushes my text to the next container and doesn't resize the images with my styling).
I have two background images. My objective is to have those rotate from the time the page is loaded, on a timer.
My css has a background image, with text over the top of it and a darkened background over the top of bottom half of the background image so that the text is more clearly readable. I don't want the text to change as the background image changes.
I have the following css and html. I've tried to use js that people have set up for their various events, but nothing is working with this structure.
Does anyone know how to alternate a background image?
HTML:
<div class= "containerfluid">
<div class="collagecontainer">
<div class="row">
<div class="col-md-12">
<div class= "row">
<div class="col-md-12">
<div class="module">
<header>
<h1 style="letter-spacing:2px"><br><br><br>Constant header remains the same</h1>
<h3>constant tagline remains the same</h3>
</header>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.module {
background: image-url('glowc.jpg');
background-color: black;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
width: 100%;
min-height: 600px;
position: relative;
overflow: hidden;
margin: 0px;
}
.module > header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 10px;
background: inherit;
background-attachment: fixed;
overflow: hidden;
}
.module > header::before {
content: "";
position: absolute;
top: -20px;
left: 0;
width: 200%;
height: 200%;
background-color: black;
opacity: 0.6;
background-attachment: fixed;
-webkit-filter: blur(4px) ;
filter: blur(4px) ;
}
.module > header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25)
}
.module > header > h1 {
margin: 0;
color: white;
font-family: 'Quicksand', sans-serif;
font-size: 50px;
position: relative;
z-index: 1;
}
.module > header > h3 {
margin: 0;
padding-left:15%;
padding-right:15%;
padding-top:20px;
color: white;
font-family: 'Quicksand', sans-serif;
font-size: 25px;
color:#E8DA0C;
position: relative;
z-index: 1;
}
* {
box-sizing: border-box;
}
I would like to have the background-image in .module to alternate between glowc.jpg with glowp.jpg. All the rest should remain the same.
JS:
I'm trying to figure this out. I'm up to this point but getting lost and confused.
var images = [
do i put my alternate image here?
];
var index = 0;
setInterval(change_up, 1000);
function change_up(){
index = (index + 1 < images.length) ? index + 1 : 0;
$('.block').fadeOut(300, function(){
$(this).css('background-image', 'url('+ images[index] + ')')
$(this).fadeIn(300);
});
}
You just have to set the class and URLs for images.
DEMO https://jsfiddle.net/maxlipsky/ua337onq/1/
var images = [
"http://upload.wikimedia.org/wikipedia/ru/a/a6/Bender_Rodriguez.png", "http://theinfosphere.org/images/thumb/4/43/Bender.png/180px-Bender.png"
];
var index = 0;
setInterval(change_up, 2000);
function change_up(){
index = (index + 1 < images.length) ? index + 1 : 0;
$('.module').fadeOut(300, function(){
$(this).css('background-image', 'url('+ images[index] + ')')
$(this).fadeIn(300);
});
}

Categories