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?
