Supersized image captions - render outside of JavaScript
- by Sol
I am using the jQuery supersized script for a full screen slideshow (not the WordPress plugin as this didn't give me enough control). However, one issue that I am trying to tackle is how to render the image caption text outside of the javascript slides[ ] call - and instead, render them within the page div - to improve SEO on the page.
My code works fine right now, images and the caption text are correctly displaying, but looking at the source code, there is very little text outside of the javascript (which is bad for SEO), so I would just like to improve it, if possible.
I haven't been able to find any other topic on this subject and so far, I've been unsuccessful at improving on the current code, which is as follows;
<!--
Supersized 3.2.7 - By Sam Dunn / One Mighty Roar (www.onemightyroar.com)
Released under MIT License / GPL License
-->
<script type="text/javascript">
var slides=[];
<?php $my_query = new WP_Query ( array(
'post_status' => 'publish',
'post_type' => 'featured',
//'numberposts' => 5,
'orderby' => 'menu_order',
'order' => 'ASC',
'showposts' => 50 ));
while( $my_query->have_posts() ) : $my_query->the_post();
$slink = get_post_meta($post->ID,'FS_link',true); ?>
slides.push({image : '<?php echo get_image_path(get_post_meta($post->ID, 'FS_slideimage_src', true)); ?>',
title : '<div class="slidecaptioninside"><h1><?php echo the_title(); ?></h1><p><?php echo strip_tags(get_post_meta($post->ID, 'FS_fitemcaption', true)); ?>...<a href="<?php echo $slink;?>">find out more</a></p></div>',
url : '<?php echo $slink;?>'});
<?php endwhile; ?>
// start supersized JS
$j = jQuery.noConflict();
$j(window).load(function() {
$j.supersized({
//Functionality
slideshow: 1,
// ..... additional functions go here...
slide_captions : 1, //Slide caption (Pull from "title" in slides array)
slides : slides,
slide_links : 'blank',
progress_bar : 1,
mouse_scrub: 1
});
});
</script>
<div id="slidecontainer">
<div id="slidecaption"></div>
<!--Thumbnail Navigation-->
<div id="prevthumb"></div>
<div id="nextthumb"></div>
<!--additional tray divs here-->
</div><!--slidecontainer-->
I have tried to get Supersized to output the content into a parent div [div id="supersized"] using $j('#supersized').supersized({ but this doesn't appear to work.
Has anyone managed to do this differently to improve page SEO?
