Develop Reference

jQuery code to change & fade background-image CSS ONLY

I need a jQuery background fader from background to background.
I have a base to go off, but have had no success.
I have all the proper libraries included, I have triple checked.
//Array of images which you want to show: Use path you want.
var images = new Array('img/bg_0.jpg', 'img/bg_1.jpg', 'img/bg_2.jpg');
var nextimage = 0;
doSlideshow();
function doSlideshow() {
if (nextimage >= images.length) {
nextimage = 0;
}
$('.face')
.css('background-image', 'url("' + images[nextimage++] + '")')
.fadeIn(500, function() {
setTimeout(doSlideshow, 1000);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="face" style="background-image: url('img/bg_5.jpg');" class="face">
<div class="face-body">
<div class="container text-center">
<h1 class="face-title one">
<?php echo SRV_NAME; ?>
</h1>
<h2 class="face-subtitle">
<?php echo SRV_SLOGAN; ?>
</h2>
</div>
</div>
</section>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>

You have to use an <img> element if you wish to fade in/out.
A background can't be animated. Only elements can. A background isn't an element, it is a property of an element.
So what I suggest here is to get rid of the background idea and use an absolute positionned image element (to have it behind your text, as a background does).
Have a look at the snippet below:
//Array of images which you want to show: Use path you want.
var images = new Array('http://www.petmd.com/sites/default/files/hypoallergenic-cat-breeds.jpg', 'https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781', 'https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg');
var nextimage = 0;
doSlideshow();
function doSlideshow() {
if (nextimage >= images.length) {
nextimage = 0;
}
$('.face')
.fadeOut(500,function(){
$(this).attr('src', images[nextimage++])
.fadeIn(500, function() {
setTimeout(doSlideshow, 1000);
});
});
}
.face{
position:absolute;
top:0;
left:0;
z-index:-1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="face">
<img src="https://www.petmd.com/sites/default/files/what-does-it-mean-when-cat-wags-tail.jpg" class="face">
<div class="face-body">
<div class="container text-center">
<h1 class="face-title one">
NAME
</h1>
<h2 class="face-subtitle">
SLOGAN
</h2>
</div>
</div>
</section>

Create Backdrop on Hover

I am currently trying to create functionality exactly as displayed in my JSFIDDLE, Basically to hover over a div and then to have a backdrop beneath that div along with a slide down panel also above the backdrop. the only issue is that the functionality is very buggy and barely works in internet explorer.
Here is the JS:
function darken(panelOpen){
if(panelOpen){
if(jQuery('#menu-backdrop').length){
jQuery("#menu-backdrop").stop().fadeIn(300);
}else{
jQuery(document.body).stop().append(jQuery('<div id="menu-backdrop" class="modal-backdrop"></div>').css('opacity',0.7).hide().fadeIn(300));
}
}else{
jQuery(".modal-backdrop").stop().fadeOut(300);
}
} //Backdrop
jQuery(document).ready(function(e) {
var bioId;
jQuery('.personnel').mouseover(function () {
jQuery(this).css('z-index','1050');
darken(true);
bioId = '#personnel-bio-'+this.id.replace( /[^\d.]/g,'');
var bio = '#personnel-bio-'+this.id.replace( /[^\d.]/g,'');
if(jQuery(bio).is(':visible')){
}else{
jQuery(bio).slideDown(300);
}
}); //dropdown function
jQuery(".wrap").mouseleave(function () {
darken(false);
if(jQuery(bioId).is(':visible')){
jQuery(bioId).slideUp(300);
}else{
}
setTimeout(function() {
jQuery('.personnel').css('z-index','0');
}, 300);
}); // slide up function
});
and the CSS:
.personnel {
position:relative;
}
.personnel-bio {
display:none;
padding:1.2em;
position:relative;
z-index:1050;
margin-bottom:15px;
background:#FFF;
}
And then Finally the HTML:
<div class="wrap">
<div id="personnel-1" class="pull-left personnel">
<div class="personnel-inner">
<div class="thumbnail">
<img src="http://placehold.it/330x290"/>
</div>
<div class="thumbnail-title">
<h4>LAbel</h4>
</div>
</div>
</div>
<div class="clearfix"></div>
<div id="personnel-bio-1" class="personnel-bio">
<h5><strong>Pieter Strydom</strong></h5>
<p>loerm ipsum.</p>
</div>
</div>
I am not quiet Sure what I am doing incorrectly. So Any Help at all will be Greatly Appreciated.

I have tidied up the code a bit, removed unnecessary calls to z-index and stop
The modal-backdrop is in the DOM from the beginning now which also helps to speed things up. The initial CSS is set on that with opacity:0.7; and display:none;
Should work a lot more fluid now.
http://jsfiddle.net/hBB97/2/
HTML:
<div id="menu-backdrop" class="modal-backdrop"></div>
<div class="wrap">
<div id="personnel-1" class="pull-left personnel">
<div class="personnel-inner">
<div class="thumbnail">
<img src="http://placehold.it/330x290" />
</div>
<div class="thumbnail-title">
<h4>Label</h4>
</div>
</div>
</div>
<div class="clearfix"></div>
<div id="personnel-bio-1" class="personnel-bio">
<h5><strong>Pieter Strydom</strong></h5>
<p>loerm ipsum.</p>
</div>
</div>
Javascript:
function darken(panelOpen, personnelContainer) {
if (panelOpen) {
personnelContainer.css('z-index', '1050');
jQuery(".modal-backdrop").fadeIn(300);
} else {
jQuery(".modal-backdrop").fadeOut(300);
personnelContainer.css('z-index', '0');
}
} //Backdrop
jQuery(document).ready(function (e) {
var bioId;
jQuery('.personnel').mouseover(function () {
darken(true, $(this));
bioId = '#personnel-bio-' + this.id.replace(/[^\d.]/g, '');
var bio = '#personnel-bio-' + this.id.replace(/[^\d.]/g, '');
if (jQuery(bio).is(':visible')) {} else {
jQuery(bio).slideDown(300);
}
}); //dropdown function
jQuery(".personnel").mouseleave(function () {
darken(false, $(this));
if (jQuery(bioId).is(':visible')) {
jQuery(bioId).slideUp(300);
}
}); // slide up function
});
CSS:
.personnel {
position:relative;
}
.personnel-bio {
display:none;
padding:1.2em;
position:relative;
z-index:1050;
margin-bottom:15px;
background:#FFF;
}
.modal-backdrop {
display:none;
opacity:0.7;
}

jQuery hover no longer working after executing script

Here's the setup I have:
http://i.stack.imgur.com/varMV.png
If I click on image B, it will switch image A and image B. If I click image E, it will switch image B and image E, and so on.
However, I want to add hover effects so that whenever I hover over an image, it will darken that image. I have that working already but when I click on (for example) image B, it will switch image B and image A but now image B is already dark and the hover effects will not work on image A anymore.
I'm using Wordpress:
<div id="content" class="site-content" role="main">
<div class="content_wrapper">
<div class="content_featured" style="float:left; "></div>
<?php if ( have_posts() ) : ?>
<?php
$i = 1;
?>
<div class="content_children" style="float:right">
<div class="content_left" style="float:left">
<?php while( have_posts() ) : the_post(); ?>
<?php
static $count = 0;
if( $count == 5 ) { break; }
else {
if( $i == 1 ) {
?><span><span class="main active"><div style="background:black; margin:2px;"><?php the_post_thumbnail('full');?></div></span></span><?php
} else {
?><span class="child nonactive"><div style="background:black; margin:2px;"><?php the_post_thumbnail('full'); ?></div></span><?php
}
$i++;
$count++;
}
?>
<?php endwhile; ?>
</div>
<div class="content_right" style="float:right;"></div>
</div>
<?php twentythirteen_paging_nav(); ?>
<?php else : ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>
</div>
</div><!-- #content -->
Here's the script so far:
jQuery(document).ready(function() {
divide_content($);
cycle_images($);
darken_images($);
var main = jQuery(".content_left span:first").html();
jQuery(".content_left span:first").empty();
jQuery(".content_featured").append(main);
});
function cycle_images($) {
$(".nonactive").click(function() {
var a = $(this).html();
var b = $(".active").html();
//alert(a+"\n\n"+b);
$(this).empty();
$(".active").empty();
$(this).append(b);
$(".active").append(a);
});
}
function divide_content($) {
var size = $(".content_left > span").size();
$(".content_left > span").each(function(index) {
if(index >= size / 2) {
$(this).appendTo(".content_right");
}
});
}
function darken_images($) {
$(".nonactive img").hover(function() {
$(this).fadeTo(500, 0.5);
}, function() {
$(this).fadeTo(500, 1);
});
$(".content_featured").hover(function() {
$(".active img").fadeTo(500, 0.5);
//alert("qwe");
}, function() {
$(".active img").fadeTo(500, 1);
});
}
PS I know this is the wrong title but I don't know how else to state it.
EDIT:
Here's the best I could do with fiddle. Link

Set max horizontal scroll of div

I have a jquery images scroller below that just scrolls horizontally left/right. The loop below could include an infinite number of images.
The problem I have is that while it scrolls left and right fine, once the images end you can just keep scrolling so essentially you're just scrolling over white space!
How can I set a max scroll so that when the images end it won't allow it to scroll anymore? Obviously the number of images is dynamic so it can have 1 or 100 images in there.
<div id="imgThumbs" class="scroller" style="position:relative;height:75px;width: 306px; overflow: hidden; white-space: nowrap;">
<a href="#" id="left-button" style="left:14px;top:25px;position:absolute;">
<img src="left-button.png" width="20" height="20" />
</a>
<a href="#" id="right-button" style="right:14px;top:25px;position:absolute;">
<img src="right-button.png" width="20" height="20" />
</a>
<div id="contentScroller">
<?php $counter = 1; while(the_repeater_field('images')): ?>
<a class="fancybox" rel="group" href="<?php echo the_sub_field('high_resolution_image'); ?>" style="text-decoration:none!IMPORTANT;color:white!IMPORTANT;" class="showImg">
<img class="image-<?php echo $counter; ?>" src="<?php echo the_sub_field('image'); ?>" width="90" height="68" alt="<?php echo the_title(); ?> <?php echo $counter; ?>" />
</a>
<?php $counter++; endwhile; ?>
</div>
</div>
<script>
jQuery(document).ready(function ($) {
$('#right-button').click(function() {
$('#contentScroller').animate({
marginLeft: "-=306px"
}, "fast");
});
$('#left-button').click(function() {
$('#contentScroller').animate({
marginLeft: "+=306px"
}, "fast");
});
});
</script>
UPDATE
Here's a fiddle - http://jsfiddle.net/jCskY/2/

Compare the marginLeft with the width calculated by the sum of content a's widths.
If the margin passes the width, it should hide the button. Otherwise, it should show.
Here is a snippet of how it would be implemented.
Also, see this fiddle, for live example!
var updateRightLeftButtons = function() {
if (306 > (parseInt($('#contentScroller').css('marginLeft')) * -1)) {
$('#left-button').hide();
} else {
$('#left-button').show();
}
if ((($('#contentScroller a').width() * $('#contentScroller a').length) - 306) < (parseInt($('#contentScroller').css('marginLeft')) * -1)) {
$('#right-button').hide();
} else {
$('#right-button').show();
}
};
$('#right-button').click(function() {
updateRightLeftButtons();
if ($(this).is(':visible'))
$('#contentScroller').animate({
marginLeft: "-=306px"
}, "fast", updateRightLeftButtons);
});
$('#left-button').click(function() {
updateRightLeftButtons();
if ($(this).is(':visible'))
$('#contentScroller').animate({
marginLeft: "+=306px"
}, "fast", updateRightLeftButtons);
});
updateRightLeftButtons();​

<?php
$dirname = '_/img/album';
$pattern = "/(\.jpg$)/i"; // valid image extensions
if (is_dir($dirname)) {
if ($handle = opendir($dirname)) {
$count = 0;
while (false !== ($file = readdir($handle))) {
// if this file is a valid image
if (preg_match($pattern, $file)) {
$count++;
}
}
closedir($handle);
}
}
?>
then take the count multiplied by 20 and set the value to the width of div container

Add Swipe Event to my WP jQuery // Slide Show?

I'm wondering how I can add the jQuery / Mobile Swipe event to my Wordpress Slide Show:
I'd like to be able to 'Swipe' through my slides with this using at Mobile.
Slide Show Code // Mark-Up with WP's PHP:
<!-- Top of Page Slider FRAGILE -->
<div id="photo-rotatorWrapper">
<div id="photosubwrap" style="min-height: 280px; max-height: 280px;">
<div id="photo-rotator" style="">
<?php $slide_id=1; ?>
<?php
$featuredPosts = new WP_Query();
$featuredPosts->query("showposts=3");
while ($featuredPosts->have_posts()) : $featuredPosts->the_post();
?>
<div id="slide-<?php echo $slide_id; $slide_id++;?>">
<a href="<?php the_permalink() ?>" class="post-image">
<?php the_post_thumbnail( 'rotator-post-image' ); ?>
<span class="title" style="font-style:italic; color:#999;"><?php the_title(); ?></span>
</a>
</div>
<?php endwhile; ?><!--/close loop-->
<ul id="slide-nav">
<?php $nav_id=1; ?>
<?php while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?>
<li>
<a href="#slide-<?php echo $nav_id; ?>">
<span class="thumbnail" style="display:none;">
</span>
<p style="color:#F93; font-family:Georgia, 'Times New Roman', Times, serif; font-size: 18px;"><? the_title(); $nav_id++;?></p>
<div style="">
<!--<?php the_excerpt(); ?>-->
<?php if($text= get_post_meta($post->ID, "slidetext", true)) { ?>
<div class="">
<p style="font-weight: normal; color: #333; font-family: Arial, Helvetica, sans-serif; font-size: 14px;"><?php echo $text; ?></p>
</div>
<?php } //else { print"<div>"; } ?>
</div>
</a>
</li>
<?php endwhile; ?><!--/close loop-->
</ul>
</div>
</div>
</div>
<!-- End Top page Slider FRAGILE -->
Script allowing the Slide Show:
<script type="text/javascript">
jQuery(document).ready(function($){
$("#photo-rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 6000);
});
</script>
Update: I've just tried:
<script>
$("#slide-1").swiperight(function() {
$.mobile.changePage("#slide-2");
});
</script>
With no such luck ~
ANY SUGGESTIONS - ?

To expand on my comment, here is how to programatically change a tab with jQuery UI's tab widget:
//cache all the tabs (I called them slides...)
//get the number of tabs
var $slides = $('div[id^="slide"]')
slideCount = $slides.length;
//bind the event handlers necessary
$slides.bind('swipeleft', function () {
//this is to go to the next index
//get current slide index and figure out the next one
var currentIndex = $(this).index();
if ((currentIndex + 1) < slideCount) {
currentIndex++;
} else {
//the end was reached, so go back to the first tab
currentIndex = 0;
}
//now select the new tab
$("#photo-rotator").tabs( "select" , currentIndex);
}).bind('swiperight', function () {
//this is to go to the previous index
//get current slide index and figure out the previous one
var currentIndex = $(this).index();
if ((currentIndex - 1) >= 0) {
currentIndex--;
} else {
//the beginning was reached, so go to the last tab
currentIndex = slideCount;
}
//now select the new tab
$("#photo-rotator").tabs( "select" , currentIndex);
});