This is my wp loop:
<?php get_header(); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
<div style="background:url(<?php echo $url; ?>);">
<button id="change">preview</button>
</div>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
<?php get_footer(); ?>
After clicking on button "change" it should change my body background to $url for e.g.
<body style="background:url($url);
where $url is thumbnail url
Any ideas how to make it?
Greetings
EDIT: I noticed you are using id="change". Id is unique and if your loop makes more than one button with the same Id, it won't work. make class="change". I've edited the rest for you.
here is a jsfiddle. http://jsfiddle.net/Grimbode/2bt8Q/1/
You should essentially load your url's as the value of a hidden input, like so:
<body>
<div>
<button class="change">preview<input type="hidden" value="http://pngimg.com/upload/tree_PNG2517.png"/></button>
</div>
</body>
Then using jQuery:
$('.change').on('click', function(){
$(document.body).css('background', 'url('+$(this).find('input').val()+')');
});
When the button is clicked, it will change your document.body's background to whatever the URL is.
Thus your php file should look like this:
<?php get_header(); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
<div>
<button class="change">preview<input type="hidden" value="<?php echo $url; ?>"/></button>
</div>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
<?php get_footer(); ?>
Hope this helps, cheers.
Related
I am working with wordpress and jquery tabs and was wondering if somebody can help me. My example is similar to this one jQuery UI Tabs
Here is my php code
<?php if (!defined('FW')) die( 'Forbidden' ); ?>
<?php $tabs_id = uniqid('fw-image-tabs-'); ?>
<div class="fw-image-tabs-container" id="<?php echo esc_attr($tabs_id); ?>">
<div class="fw-image-tabs">
<?php foreach ($atts['image_tabs'] as $key => $tab) : ?>
<div class="fw-image-tabs-content" id="<?php echo esc_attr($tabs_id . '-' . ($key + 1)); ?>">
<h3 class="fw-image-tabs-content"><?php echo $tab['tab_image_title']; ?></h3>
<img src="<?php echo esc_attr( $tab['tab_image']['url']); ?>">
</div>
<?php endforeach; ?>
<ul>
<?php foreach ($atts['image_tabs'] as $key => $tab) : ?>
<li><?php echo $tab['tab_title']; ?></li>
<?php endforeach; ?>
</ul>
<?php foreach ( $atts['image_tabs'] as $key => $tab ) : ?>
<div class="fw-image-tabs-content" id="<?php echo esc_attr($tabs_id . '-' . ($key + 1)); ?>">
<p><?php echo do_shortcode( $tab['tab_content'] ) ?></p>
</div>
<?php endforeach; ?>
</div>
</div>
And my script
jQuery(document).ready(function ($) {
$('.fw-image-tabs-container').tabs();
});
The trouble i am having is that i cannot hide the second <div class="fw-image-tabs-content"></div>. Both divs have the same class name and the same id. For some reason only the first id works. How can i show/hide the text for both divs?
Thanks
Have you tried this?
jQuery(document).ready(function ($) {
$('.fw-image-tabs').tabs();
});
I'm trying to make the product filter for a magento shop collapsible. I tried editing the view.phtml in template/category/layer/view.phtml But it's not working.
I Edited these lines: <dt><?php echo $this->__($_filter->getName()) ?></dt>
to <dt><?php echo $this->__($_filter->getName()) ?></dt>
and i added some jquery like this:
<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function(){
jQuery("dl#narrow-by-list> dd:not(:first)").hide();
jQuery("dl#narrow-by-list> dt a").click(function(){
jQuery("dl#narrow-by-list> dd:visible").slideUp("fast");
jQuery(this).parent().next().slideDown("fast");
return false;
});
});
/* ]]> */
</script>
Current code:
?>
<?php if($this->canShowBlock()): ?>
<div class="block block-layered-nav">
<div class="block-title">
<strong><span><?php echo $this->__('Shop By') ?></span></strong>
</div>
<div class="block-content">
<?php echo $this->getStateHtml() ?>
<?php if ($this->getLayer()->getState()->getFilters()): ?>
<div class="actions"><?php echo $this->__('Clear All') ?></div>
<?php endif; ?>
<?php if($this->canShowOptions()): ?>
<p class="block-subtitle"><?php echo $this->__('Shopping Options') ?></p>
<dl id="narrow-by-list">
<?php $_filters = $this->getFilters() ?>
<?php foreach ($_filters as $_filter): ?>
<?php if($_filter->getItemsCount()): ?>
<div class="<?php if(strcasecmp($_filter->getName(), 'PRICE') == 0) echo 'layered-price'; else echo 'layered-attribute'; ?>">
<div class="title-layered"><dt><?php echo $this->__($_filter->getName()) ?></dt></div>
<dd><?php echo $_filter->getHtml() ?></dd>
</div>
<?php endif; ?>
<?php endforeach; ?>
</dl>
<script type="text/javascript">decorateDataList('narrow-by-list')</script>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function(){
jQuery("#narrow-by-list> dd:not(:first)").hide();
jQuery("#narrow-by-list> dt a").click(function(){
jQuery("#narrow-by-list> dd:visible").slideUp("fast");
jQuery(this).parent().next().slideDown("fast");
return false;
});
});
/* ]]> */
</script>
Anyone any idea why this is not working?
You made a click event on a link tag
You can trick your javascript with this href attribute:
<dt> <?php echo $this->__($_filter->getName()) ?></dt>
and then your jquery click function will be triggered as usual.
In my latest Wordpress project I'm trying to figure out how to use JQuery tabs in combination with the ACF repeater fields. The first one works but now I want multiple divs containing a few tabs on a single page. The following ones don't show the content in tabs (the script is not working on these). As far as I understand this is caused by the ID of the div (#tabs). Therefore I like to add something to this ID to see if this fixes my problem; like #tabs1, #tabs2, #tabs3, etc. I can't give each div it's own ID manually as they are created in a loop (ACF repeater field). Been searching for days and can't seem to find how to do this in the script. Hope someone can guide me in the right direction.
<script>
jQuery(document).ready(function($) {
$('#tabs').tabs();
})
</script>
The loop to create the tabs:
<?php if( have_rows('slider') ): ?>
<div id="tabs">
<?php while(have_rows('slider') ): the_row(); ?>
<div id="<?php the_sub_field('tab_title');?>">
<?php the_sub_field('tab_content');?>
</div>
<?php endwhile; ?>
<ul>
<?php while(have_rows('slider') ): the_row(); ?>
<li><?php the_sub_field('tab_title'); ?></li>
<?php endwhile; ?>
</ul>
</div>
<?php endif; ?>
Here's an example of a website that has a set up kind of like what I'm trying to achieve... note that each section has a slide show with buttons (in my case the 'tabs') underneath to select a different slide show.
http://partnersandspade.com/studio/
I believe the problem lies here <div id="<?php the_sub_field('tab_title');?>">.
If your tab_title have spaces, comma, quotes (which is most likely since it's a title and not a slug) and you use it as an element id then this isn't valid and will likely cause some problem.
Use simple ids instead. tab-1, tab-2, tab-2 etc.,
e.g.
<?php if( have_rows('slider') ): ?>
<div id="tabs">
<?php $i = 1; ?> <!-- initiate the loop count var -->
<?php while(have_rows('slider') ): the_row(); ?>
<div id="#tab-<?php echo $i;?>">
<?php the_sub_field('tab_content');?>
</div>
<?php $i++; ?>
<?php endwhile; ?>
<ul>
<?php $i = 1; ?> <!-- initiate the loop count var -->
<?php while(have_rows('slider') ): the_row(); ?>
<li><?php the_sub_field('tab_title'); ?></li>
<?php $i++; ?>
<?php endwhile; ?>
</ul>
</div>
<?php endif; ?>
UPDATE
Changing to class should work but if it doesn't I would suggest to change your ACF structure a bit. You could include the slider repeater in another repeater field "tabs" then you would be able to loop in the loop (docs - nested lops) and that way you will give each "tabs" an unique id. See the code below:
<?php if( have_rows('tabs') ): ?>
<?php $i = 1; while(have_rows('tabs') ): the_row(); ?>
<div id="tabs<?php echo $i++; ?>">
<?php while(have_rows('slider') ): the_row(); ?>
<div id="<?php the_sub_field('tab_title');?>">
<?php the_sub_field('tab_content');?>
</div>
<?php endwhile; ?>
<ul>
<?php while(have_rows('slider') ): the_row(); ?>
<li><?php the_sub_field('tab_title'); ?></li>
<?php endwhile; ?>
</ul>
</div>
<?php endwhile; ?>
<?php endif; ?>
I've misunderstood at the first time. Did you consider changing id="tabs" to class="tabs". This should solve the problem:
<script>
jQuery(document).ready(function($) {
$('.tabs').tabs();
})
</script>
Markup:
<div class="tabs">
IGONRE BELOW:
Add variable $i with value "1" and increase its value on the end on the loop.
Replace
<?php the_sub_field('tab_title');?>
with
tabs<?php echo $i;?>
All together this should give you unique id for each row.
<?php $i = 1; while(have_rows('slider') ): the_row(); ?>
<div id="tabs<?php echo $i;?>">
<?php the_sub_field('tab_content');?>
</div>
<?php $i++; endwhile; ?>
This is where I'm at now...
I managed to give all tab wrappers (#tabs) it's own ID and all the tabs inside this wrapper will get a unique ID too.
<?php $tabsId = 1; while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'cf' ); ?> role="article">
<header class="article-header">
<h1 class="h2 entry-title"><?php the_title(); ?></h1>
</header>
<?php if( have_rows('slider') ): ?>
<div id="tabs<?php echo $tabsId; ?>">
<?php $tabId = 1; while(have_rows('slider') ): the_row(); ?>
<div id="tab<?php echo $tabId;?>">
<?php the_sub_field('tab_content');?>
</div>
<?php $tabId++; endwhile; ?>
<ul class="tabs">
<?php $tabId = 1; while(have_rows('slider') ): the_row(); ?>
<li><?php the_sub_field('tab_title'); ?></li>
<?php $tabId++; endwhile; ?>
</ul>
</div>
<?php endif; ?>
<section class="entry-content cf">
<?php the_content(); ?>
</section>
</article>
<?php $tabsId++; endwhile; ?>
However I think I need to change the script somehow so it knows that I'm not targeting the #tabs div but I'm targeting #tabs1, #tabs2, #tabs3 etc. Here's the script I'm using as i'm using it. Is there way to change this so it runs on each #tabs.. div?
jQuery(document).ready(function($) {
$('#tabs1').each(function(){
// For each set of tabs, we want to keep track of
// which tab is active and it's associated content
var $active, $content, $links = $(this).find('a');
// If the location.hash matches one of the links, use that as the active tab.
// If no match is found, use the first link as the initial active tab.
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.addClass('active');
$content = $($active[0].hash);
// Hide the remaining content
$links.not($active).each(function () {
$(this.hash).hide();
});
// Bind the click event handler
$(this).on('click', 'a', function(e){
// Make the old tab inactive.
$active.removeClass('active');
$content.hide();
// Update the variables with the new link and content
$active = $(this);
$content = $(this.hash);
// Make the tab active.
$active.addClass('active');
$content.show();
// Prevent the anchor's default click action
e.preventDefault();
});
});
})
I have some code that pulls in wordpress posts, I want to just pull in the image. Then when the image is clicked, more info to appear in a div at the right side of the page. Been trying a few things myself but can't seem to get it to work correctly.
This is my wordpress code, i'm incrementing the posts to add showdiv-1, showdiv-2 etc... then incrementing the information div to be storeinfo-1, storeinfo-2 etc...
Clickable logos:
<ul class="store_list">
<?php $i = 1; ?>
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts('cat=3'.$cat.'&order=ASC&showposts=100&paged=' . $paged);
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li class="one-third nomargin">
<a id="showdiv-<?php echo $i; ?>" class="store-logo" title="View <?php echo $post->post_title; ?> shop info"><?php
$thumbnail_id = get_post_meta($post->ID, 'Store Logo', true);
echo wp_get_attachment_image($thumbnail_id, 'Store Logo');
?></a>
</li>
<?php $i++; ?>
<?php endwhile; else: ?>
<p><?php _e('No shops to view in this category.'); ?></p>
<?php endif; ?>
</ul>
Divs to show when logo is clicked:
<?php $m = 1; ?>
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts('cat=3'.$cat.'&order=ASC&showposts=100&paged=' . $paged);
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div id="storeinfo-<?php echo $m; ?>">
<h1 class="shop-name"><?php echo $post->post_title; ?></h1>
<p class="shop-telephone nop">Tel: <?php getCustomField('Telephone'); ?></p>
<div class="shop-openinghours">
<?php the_content(); ?>
</div>
<p class="shop-website nop"> <a target="_blank" href="http://<?php getCustomField('Website'); ?>">Visit Site</a></p>
</div>
<?php $m++; ?>
<?php endwhile; else: ?>
<p><?php _e('No shops to view in this category.'); ?></p>
<?php endif; ?>
Thanks in advance!
You can do that with following steps;
You have already give ids, ok. Those images are related to specific information divs.(I assume store-info-* divs are hidden first). Simply write a jquery function. I am giving your updated code, and my new implemented jquery code.
EDIT: In order to hide previous ones when you click show info, I have added a class to store-info-* divs and added jquery code to my implementation to hide all open stores and show clicked one.
<ul class="store_list">
<?php $i = 1; ?>
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts('cat=3'.$cat.'&order=ASC&showposts=100&paged=' . $paged);
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li class="one-third nomargin">
<a id="showdiv-<?php echo $i; ?>" class="store-logo" title="View <?php echo $post->post_title; ?> shop info" class="images"><?php
$thumbnail_id = get_post_meta($post->ID, 'Store Logo', true);
echo wp_get_attachment_image($thumbnail_id, 'Store Logo');
?></a>
</li>
<?php $i++; ?>
<?php endwhile; else: ?>
<p><?php _e('No shops to view in this category.'); ?></p>
<?php endif; ?>
</ul>
<?php $m = 1; ?>
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts('cat=3'.$cat.'&order=ASC&showposts=100&paged=' . $paged);
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div id="storeinfo-<?php echo $m; ?>" style="display:none;" class="stores">
<h1 class="shop-name"><?php echo $post->post_title; ?></h1>
<p class="shop-telephone nop">Tel: <?php getCustomField('Telephone'); ?></p>
<div class="shop-openinghours">
<?php the_content(); ?>
</div>
<p class="shop-website nop"> <a target="_blank" href="http://<?php getCustomField('Website'); ?>">Visit Site</a></p>
</div>
<?php $m++; ?>
<?php endwhile; else: ?>
<p><?php _e('No shops to view in this category.'); ?></p>
<?php endif; ?>
jQuery(function ($) {
$(".images").on('click', function() {
$(".stores").hide();
var idObj = $(this).attr("id").split("-");
var id = idObj[1];
$("#storeinfo-" + id).show();
});
});
I would like to display multiple slideshow on one page from my website.
I'm using a repeater ACF to enter my images.
I'm not able to know in advance how many slideshows are going to be displayed
when one slideshow is displayed, everything works perfectly, but when 2 are displayed, It doesn't work anymore.
does anyone knows how I can fix it ?
here is a basic code without the repeater and with 2 slideshows :
http://jsfiddle.net/XRpeA/13/
<div id="slideframe">
<img class="image_news" src="http://s1.lemde.fr/image/2007/07/09/534x0/933544_5_aa6d_polynesie-bora-bora_0608bcead896ce3f59fc0e2fb3cc7435.jpg" />
<img class="image_news" src="http://production.slashmedias.com/main_images/images/000/005/357/IMAGE-PENSEE-HD-1_original_original_large.jpg?1372235419" />
<img class="image_news" src="http://images.telerama.fr/medias/2013/03/media_94814/une-image-un-film-l-auberge-de-dracula-1931,M106823.jpg" />
</div>
<br>
<div id="counter">image <span id="current">1</span> / <span id="total"></span></div>
<br><br>
<div id="slideframe">
<img class="image_news" src="http://s1.lemde.fr/image/2007/07/09/534x0/933544_5_aa6d_polynesie-bora-bora_0608bcead896ce3f59fc0e2fb3cc7435.jpg" />
<img class="image_news" src="http://production.slashmedias.com/main_images/images/000/005/357/IMAGE-PENSEE-HD-1_original_original_large.jpg?1372235419" />
<img class="image_news" src="http://images.telerama.fr/medias/2013/03/media_94814/une-image-un-film-l-auberge-de-dracula-1931,M106823.jpg" />
</div>
<br>
<div id="counter">image <span id="current">1</span> / <span id="total"></span></div>
and here is my code with the repeater :
http://jsfiddle.net/XRpeA/14/
<?php if(get_field('images')): ?>
<div id="counter_2"><span id="current">1</span> / <span id="total"></span></div>
<div id="slideframe">
<?php while(has_sub_field('images')): ?>
<?php if(get_sub_field('image') != ''){ ?>
<img class="image_news" src="<?php the_sub_field('image'); ?>"/>
<?php } ?>
<?php endwhile; ?>
</div>
<?php endif; ?>
thanks a lot
Ok, so I did it just for you as I promiced, thought I thought it will be faster :)
Result
http://skyloveagency.com/new/
(will remove tomorrow)
Fields:
photo_repeater - repeater
---photo_slider - repeater
------photo_block - image with URL output
Full script, not optimized but works perfectly
<?php
/**
* Template Name: Profiles2
*/
get_header(); ?>
<?php
// query
$args = array(
'post_type' => 'profiles',
'show' => 1
);
$wp_query = new WP_Query($args);
?>
<?php $random = 0;
if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<?php if(get_field('photo_repeater')): ?>
<?php while(has_sub_field('photo_repeater')): ?>
<?php $random++; ?>
<div id="slideframe<?php echo $random; ?>">
<?php if(get_sub_field('photo_slider')): ?>
<?php while( has_sub_field('photo_slider') ): ?>
<?php
$img_url = get_sub_field('photo_block');
$image = aq_resize( $img_url, 200, 200, true );
?>
<img class="image_news" src="<?php echo $image; ?>" alt="111" />
<?php endwhile; ?>
<?php endif; ?>
</div>
<br>
<div id="counter<?php echo $random; ?>">image <span id="current<?php echo $random; ?>">1</span> / <span id="total<?php echo $random; ?>"></span></div>
<script>
var count<?php echo $random; ?> = $('#slideframe<?php echo $random; ?> .image_news').length;
$("#total<?php echo $random; ?>").text(count<?php echo $random; ?>);
// set display:none for all members of ".pic" class except the first
$('#slideframe<?php echo $random; ?> .image_news:gt(0)').hide();
// stores all matches for class="pic"
var $slides<?php echo $random; ?> = $('#slideframe<?php echo $random; ?> .image_news');
$slides<?php echo $random; ?>.click(function () {
// stores the currently-visible slide
var $current<?php echo $random; ?> = $(this);
if ($current<?php echo $random; ?>.is($slides<?php echo $random; ?>.last())) {
$("#current<?php echo $random; ?>").text("1");
$current<?php echo $random; ?>.hide();
$slides<?php echo $random; ?>.first().show();
}
// else, hide current slide and show the next one
else {
$("#current<?php echo $random; ?>").text($current<?php echo $random; ?>.next().index()+1);
$current<?php echo $random; ?>.hide().next().show();
}
});
</script>
<br><br>
<?php endwhile; ?>
<?php endif; ?>
<?php endwhile; ?>
<?php get_footer(); ?>