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
Related
How can I convert multiple dynamic div (created at runtime) into image. There are more than 50 div which are created at runtime using php array. I just want all those div to be converted to image seperately.
Here is the code I tried for -
<?php
$names = [" ", "abc", "def", "ghi yfg", "jkl", "mno"];
$i=1;
foreach ($names as $name ) {
?>
<div class='mydivCls' id="mydiv<?php echo $i?>">
<p id="mytext"><?php echo $name ?></p>
</div>
<?php $i++; } ?>
<div id="canvas" style="display:none;">
<p>Canvas:</p>
</div>
<div id="image">
<p>Image:</p>
</div>
My Css code --
<style>
#font-face {
font-family:roboto;
src: url("/roboto/Roboto-Medium.ttf")
}
.mydivCls {
background-image: url("1.png");
width: 325px;
height: 207px;
}
.mydivCls p {
font-family: roboto;
padding-top: 100px;
text-align: center;
}
</style>
And here is my script --
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script>
var i=1;
$(".mydivCls").each (function(){
html2canvas([document.getElementById('mydiv'+i)], {
onrendered: function (canvas) {
document.getElementById('canvas').appendChild(canvas);
var data = canvas.toDataURL('image/png');
var image = new Image();
image.src = data;
document.getElementById('image').appendChild(image);
}
});
i++;
});
</script>
I'm getting following error in my console --
TypeError: document.getElementById(...) is null
document.getElementById('canvas'+i).appendChild(canvas);
Here is the solution I found --
<?php
/**
* This Script is used for converting a particular div to image
*/
?>
and my HTML code --
<?php
$names = [" ", "Kuldeep Kumar", "Rishabh Gaur", "AMIT RANJAN", "Vinay Agarwal", "MANJEET KUMAR", "Shuchi Singla", "Sumit Chaturvedi"];
$i=1;
foreach ($names as $name ) {
?>
<div class='mydivCls' id="mydiv<?php echo $i?>">
<p id="mytext"><?php echo $name ?></p>
</div>
<?php $i++; } ?>
<div id="canvas" style="display:none;">
<p>Canvas:</p>
</div>
<div id="image">
<p>Image:</p>
</div>
and changes in script --
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script>
var i=1;
$(".mydivCls").each (function(){
html2canvas([document.getElementById('mydiv'+i)], {
onrendered: function (canvas) {
document.getElementById('canvas').appendChild(canvas);
var data = canvas.toDataURL('image/png');
var image = new Image();
image.src = data;
document.getElementById('image').appendChild(image);
}
});
i++;
});
</script>
Code for image generation is correct, you have issue in your php part (all div have the same id). Need to increment $i variable:
<?php $i=1;
foreach ($names as $name ) {
?>
<div class='mydivCls' id="mydiv<?php echo $i?>">
<p id="mytext"><?php echo $name ?></p>
</div>
<?php $i++;
} ?>
I have an Isotope filter working with WordPress to filter posts. It uses a masonry layout with a gutter-sizer set as a percentage in the CSS. It all works fantastically on page load until I click something on the filter and then the gutter gap collapses and does't work again until I reload the page or if I resize the browser window.
Any help would be much appreciated, I'm totally lost!
Here's how I'm initialising the code:
$( function() {
$('.container').isotope({
itemSelector: '.item',
percentPosition: true,
layoutMode: 'masonry',
masonry: {
columnWidth: '.grid-sizer',
gutter: '.gutter-sizer'
}
})
});
Edit:
Here's the CSS
.gutter-sizer {
width: 1.7241379%;
}
.item, .grid-sizer {
width: 100%; // width of each brick less the padding inbetween
margin-bottom: 20px;
#include border-radius(2px);
#include shadow;
background-color: $white;
#media only screen and (min-width: 600px) {
width: 49.13793105%;
}
#media only screen and (min-width: 900px) {
width: 23.7068966%;
}
}
And here is the code for the filter and the masonry posts:
<!-- #filter-menu --> <nav id="filter-navigation" class="main-filter-navigation item" role="navigation">
<button class="filter-toggle"><?php _e( 'Filter', 'cambridgerules' ); ?><i class="fa fa-filter"></i></button>
<ul class="filters">
<li class="filter-all">All</li>
<li class="interpret-filter-label">Interpreted Worldwide:</li>
<?php
$terms = get_terms("type"); // get all categories, but you can use any taxonomy
$count = count($terms); //How many are they?
if ( $count > 0 ){ //If there are more than 0 terms
foreach ( $terms as $term ) { //for each term:
echo "<li class='".$term->slug."'><a href='#' data-filter='.".$term->slug."'>" . $term->name . "</a></li>\n";
//create a list item with the current term slug for sorting, and name for label
}
}
?>
</ul>
</nav><!-- #filter-menu -->
<div class="container">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<?php $the_query = new WP_Query( array(
'showposts' => 50,
'post_type' => array('interpreted')
)
); //Check the WP_Query docs to see how you can limit which posts to display ?>
<?php if ( $the_query->have_posts() ) : ?>
<div id="isotope-list">
<?php while ( $the_query->have_posts() ) : $the_query->the_post();
$termsArray = get_the_terms( $post->ID, "type" ); //Get the terms for this particular item
$termsString = ""; //initialize the string that will contain the terms
foreach ( $termsArray as $term ) { // for each term
$termsString .= $term->slug.' '; //create a string that has all the slugs
}
?>
<div class="<?php echo $termsString; ?> item"> <?php // 'item' is used as an identifier (see Setp 5, line 6) ?>
<h3><?php the_title(); ?></h3>
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail();
} ?>
</div> <!-- end item -->
<?php endwhile; ?>
</div> <!-- end isotope-list -->
<?php endif; ?>
</div> <!-- end container -->
Ok, sorted it out by using the following code:
jQuery(function ($) {
var $container = $('.container'); //The ID for the list with all the blog posts
$container.isotope({ //Isotope options, 'item' matches the class in the PHP
itemSelector : '.item',
layoutMode : 'masonry',
masonry: {
columnWidth: '.grid-sizer',
gutter: '.gutter-sizer'
}
});
//Add the class selected to the item that is clicked, and remove from the others
var $optionSets = $('.filters'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSets = $this.parents('.filters');
$optionSets.find('.selected').removeClass('selected');
$this.addClass('selected');
//When an item is clicked, sort the items.
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
});
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 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);
});