JQuery + Wordpress PHP variable - php

Question

I'm using the jquery cycle to create a slideshow in my Wordpress template. The "pager" is creating buttons that overlay the slideshow and rollover advances the slides. The trouble I'm running into is that I need the rollover to stay the same, but I also need to set an href so that clicking on the buttons takes the user to a specific page.
I need to retrieve the variable $target from my slideshow for the href.
I need the onclick to make the button clickable.
As I stated above, I'm new at this and it's quite possible that this is terrible code/can't be done/I'm a moron.
My jquery:
<script src="<?php bloginfo('stylesheet_directory'); ?>/scripts/jquery.cycle.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
if ( $('.slides > .slide').size() > 1 ) {
$('.slides')
.cycle({
timeout: 6000,
speed: 1000,
pager: '#slides #mainNav',
pauseOnPagerHover: 200,
pagerEvent: 'mouseover',
pause: true,
pagerAnchorBuilder: function(idx, slide) {
var slideImage = $(slide).find('img');
var slideTitle = slideImage.attr('title');
var slideURL = "<?php echo $target; ?>";
return '<li>' + slideTitle + /* '<br /><span class="description">' + slideDescr + '</span>*/'</li>';
}
});
}
});
</script>
and my Wordpress slideshow:
<?php if ( is_front_page() && $slides = get_posts(array('numberposts' => -1, 'orderby' => 'menu_order', 'order' => 'ASC', 'post_type' => 'slide')) ) : ?>
<div id="mainImg">
<div id="slides">
<div class="slides">
<?php foreach ($slides as $slide) : ?>
<?php $title = $slide->post_title; ?>
<?php $content = wpautop($slide->post_content); ?>
<?php $description = get_post_meta($slide->ID, 'description', true); ?>
<?php $thumb = get_the_post_thumbnail($slide->ID, 'slide', array('title' => $title, 'alt' => $description)); ?>
<?php $url = get_post_meta($slide->ID, '_slide_url', true); ?>
<?php $target = (get_post_meta($slide->ID, '_slide_url_blank', true)) ? 'target="_blank"' : ''; ?>
<div class="slide">
<?php if ($url) : ?>
<a href="<?php echo $url; ?>" <?php echo $target; ?>><?php echo $thumb; ?></a>
<?php else: ?>
<?php echo $thumb; ?>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
<div id="mainNav"></div>
</div>
</div><!--end mainImg-->
<?php endif; ?>
Thank you in advance for your help.

Answer 1

Where you have:
var slideURL = "<?php echo $target; ?>"
Replace it with:
var slideURL = $(slide).find('a').attr('target');
What you are doing above is getting the slide object, finding the 'a' tag in the slide, and then getting the "target" attribute of the 'a' tag. This value is then assigned to the slideURL variable (which will either be '_blank' or undefined). For more information on how to use jQuery to get HTML elements and/or their attributes, you should familiarise yourself more with jQuery's Traversing and Attributes methods.
You should never mix Javascript code with PHP or even HTML code anyway. Read up more on "Unobtrusive JavaScript".