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?
