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);
});
Related
this is the script i used for loadmore function and its working and the problem am facing here is am not getting loadmore as per the initial value given and the limit.
this is my script
<script type="text/javascript">
$(document).ready(function () {
size_div = $("#maincontent div").size();
x=5;
$('#maincontent div:lt('+x+')').show();
$('#loadMore').click(function () {
x= (x+3 <= size_div) ? x+3 : size_div;
$('#maincontent div:lt('+x+')').show();
if(x == size_div){
$('#loadMore').hide();
$('#alert-msg').html('no more images to show!');
}
});
});
Here the initial images to be displayed is 5 and on clicking each loadmore button 3 more images to be displayed but here initailly single image is displaying and on clicking loadmore each time a image is dispalying.
this is my view page
<div class="row" id="maincontent">
<?php foreach($gallery as $row){?>
<?php $images=json_decode($row->image);{?>
<div class="col-md-3 col-sm-6">
<div class="teacher-item">
<div class="thumb-holder"> <img src="<?php echo base_url();?>uploads/<?php echo $images[0];?>" alt="" style="width: 250px;height: 180px;">
<div class="hover-content">
<a href="<?php echo base_url();?>uploads/<?php echo $images[0];?>" target="_blank" class="impromptu-gallery img-responsive">
<h3>Gallery</h3>
<h4>Photoghaphy Master</h4>
</a>
</div>
</div>
</div>
</div>
<?php }}?>
</div>
my css looks like this
<style>
#maincontent div {
display:none;
}
#loadMore {
color:green;
cursor:pointer;
}
#loadMore:hover {
color:black;
}
</style>
hi man your selector is wrong, please try following:
size_div = $("#maincontent > div").size();
x=5;
$('#maincontent > div:lt('+x+')').show();
$('#loadMore').click(function () {
x= (x+3 <= size_div) ? x+3 : size_div;
$('#maincontent > div:lt('+x+')').show();
if(x == size_div){
$('#loadMore').hide();
$('#alert-msg').html('no more images to show!');
}
});
go with a css style:
#maincontent > div{display:none;}
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
I have this structure:
<div style="background-color:#FFF;height:49px;border-top:1px solid #ef4723;clear:both">
<div id="marka-slider" class="row">
<ul>
<?php if (($references = Reference::getAll())) :
foreach ($references as $r) :
?>
<li>
<img src="<?php echo Reference::getUploadPath() . '/' . $r->mediapath; ?>"
alt="<?php echo $r->title; ?>" title="<?php echo $r->title; ?>"/>
<!-- <?php CVarDumper::dump(array('ref: ' => $r->attributes), 5, 1); ?> -->
</li>
<?php endforeach; ?>
<?php endif; ?>
</ul>
</div>
</div>
JS:
var slider;
$(document).ready(function () {
slider = $('#marka-slider ul li');
setTimeout(function() {
bgscroll('right');
}, 1000);
});
function bgscroll(direction) {
var sign;
if (direction === 'left') {
slider.stop().animate({'background-position': '+=10000'}, 200000, 'linear', bgscroll);
} else {
slider.stop().animate({'background-position': '-=10000'}, 200000, 'linear', bgscroll);
}
But it isn't working. When I check via Firebug, it doesn't give a error. How can I solve it?
DEMO
http://jsfiddle.net/xpVRT/2/
You were animating background image of the li tag, while the images were inside li in the img tags.
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
I'm trying to change the background image of a link when it is clicked via Javascript. I five tabs and when the user clicks on a tab, I want the background image of that tab to change to a plain white image. Where as the other four tabs should be changed to a grey image.
So my CSS is as follows:
.listingindex li a {
background:url(../images/tabe-nomal.jpg) left top no-repeat;
color:#333333;
display: inline-block;
text-decoration:none;
width:229px;
padding:14px 0px 14px 10px;
}
.listingindex li a:hover {
background:url(../images/tabe-over.jpg) left top no-repeat;
}
and my code looks like this:
<div class="listingindex">
<?php
$catId = get_cat_id('featured');
$childOf = 'child_of='.$catId;
$subCats = get_categories($childOf);
// Slice array so only 5 categories can be displayed.
$subCats = array_slice($subCats, 0, 5);
foreach ($subCats as $value) {
$subCatsStr .= $value->cat_ID.'|';
}
foreach ($subCats as $subCat) {
?>
<ul>
<li><a id="tab_<?=$subCat->cat_ID?>" href="javascript:toggle(<?=$subCat->cat_ID?>,'<?=$subCatsStr?>')"><?=$subCat->name?></a></li>
</ul>
<ul id="thumbnails_<?=$subCat->cat_ID?>" class="listingarea">
<?php $query = new WP_Query('category_name='.$subCat->name.'&posts_per_page=9');
while( $query->have_posts() ) : $query->the_post();?>
<li>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?
$id = $post->ID;
$filename = $_SERVER["DOCUMENT_ROOT"].'/xxxxxxx/xxxxxx/xxxxx/xxxxxx/images/thumbnails/image_'.$id.'.jpg';
if (file_exists($filename)) {
?><img src="<?php echo $templateDir; ?>/images/thumbnails/image_<?=$id;?>.jpg" alt="Image_<?=$id;?>" /><?
}else{
?><img src="<?php echo $templateDir; ?>/images/thumbnails/no_image.jpg" alt="No Image" /><?
}?>
</a>
</li>
<?php endwhile; ?>
</ul>
<?}?>
</div>
Lastly my JS looks like this:
function toggle(catID, subCatsStr) {
document.getElementById('thumbnails_'+catID).style.display = "block";
document.getElementById('tab_'+catID).style.backgroundImage = "url(/images/tabe-over.jpg)";
subCatsArr = subCatsStr.split('|');
for (i = 0; i <= subCatsArr.length - 2; i++){
if (subCatsArr[i] != catID){
document.getElementById('thumbnails_'+subCatsArr[i]).style.display = "none";
document.getElementById('tab_'+catID).style.backgroundImage = "url(images/tabe-nomal.jpg) left top no-repeat";
}
}
}
At the moment, this code simply removes the grey image (tabe-nomal.jpg) when a tab is clicked.
Any help appreciated.
Regards...
Looks like your backgroundImage urls might not be correct -- try using the same path (../images/..) as in your initial css rule
To solve the problem in the end I had to specify the full path name:
document.getElementById('tab_'+catID).style.backgroundImage = "url(http://www.xxxxxx.ie/xxxxxxx/wp-content/themes/xxxxxxx/images/tabe-over.jpg)";
Not sure why, but this solved the problem. Its a Wordpress theme so maybe this had something to do with it.