scrollable post thumbnail WordPress

Denzel Chia comments:

Correction on the_content(); and assuming all your other codes are correct.

PHP setup

<!-- "previous page" action -->
<a class="prev browse left"></a>

<!-- root element for scrollable -->
<div class="scrollable">

<!-- root element for the items -->
<div class="items">

<div>
<?php
$video_gallery = get_posts('category=9&numberposts=-1&orderby=post_name&order=ASC');
foreach($video_gallery as $post) : setup_postdata($post);
?>

<img src="<?php video_thumbnail(); ?>" />
<p><?php the_title(); ?></p><p class="test"><? the_content(); ?></p>

<?php endforeach; ?>

</div>

</div>

</div>

<!-- "next page" action -->
<a class="next browse right"></a>


Denzel Chia comments:

Hi,

Sorry mistake on the PHP setup again. Please use this;


<!-- "previous page" action -->
<a class="prev browse left"></a>

<!-- root element for scrollable -->
<div class="scrollable">

<!-- root element for the items -->

<div class="items">

<?php

$video_gallery = get_posts('category=9&numberposts=-1&orderby=post_name&order=ASC');
foreach($video_gallery as $post) : setup_postdata($post);

?>

<div>
<img src="<?php video_thumbnail(); ?>" />
<p><?php the_title(); ?></p><p class="test"><? the_content(); ?></p>
</div>

<?php endforeach; ?>

</div>

</div>

<!-- "next page" action -->
<a class="next browse right"></a>


qny comments:

thanks denzel for answering

but i need a simple thumbnails scrollbar and when i click i can see the whole post in a top div

this is the example i picked for http://flowplayer.org/tools/demos/scrollable/gallery.html

thanks

Denzel Chia comments:

Hi,

Ok, the following codes are changed according to http://flowplayer.org/tools/demos/scrollable/gallery.html

PHP and HTML code

<!-- wrapper element for the large image -->
<div id="image_wrap">

<!-- Initially the image is a simple 1x1 pixel transparent GIF -->
<img src="http://static.flowplayer.org/tools/img/blank.gif" width="500" height="375" />

</div>

<!-- "previous page" action -->

<a class="prev browse left"></a>

<!-- root element for scrollable -->

<div class="scrollable">

<!-- root element for the items -->

<div class="items">

<div>

<?php

$video_gallery = get_posts('category=9&numberposts=-1&orderby=post_name&order=ASC');

foreach($video_gallery as $post) : setup_postdata($post);

?>

<img src="<?php video_thumbnail(); ?>" />

<p><?php the_title(); ?></p><p class="test"><? the_content(); ?></p>

<?php endforeach; ?>

</div>

</div>

</div>

<!-- "next page" action -->

<a class="next browse right"></a>


CSS

<style>


/* styling for the image wrapper */
#image_wrap {
/* dimensions */
width:677px;
margin:15px 0 15px 40px;
padding:15px 0;

/* centered */
text-align:center;

/* some "skinning" */
background-color:#efefef;
border:2px solid #fff;
outline:1px solid #ddd;
-moz-ouline-radius:4px;
}
</style>



Javascript

<script>
$(function() {

$(".scrollable").scrollable();

$(".items img").click(function() {

// see if same thumb is being clicked
if ($(this).hasClass("active")) { return; }

var url = $(this).attr("src");

// get handle to element that wraps the image and make it semi-transparent
var wrap = $("#image_wrap").fadeTo("medium", 0.5);

// the large image from www.flickr.com
var img = new Image();


// call this function after it's loaded
img.onload = function() {

// make wrapper fully visible
wrap.fadeTo("fast", 1);

// change the image
wrap.find("img").attr("src", url);

};

// begin loading the image from www.flickr.com
img.src = url;

// activate item
$(".items img").removeClass("active");
$(this).addClass("active");

// when page loads simulate a "click" on the first image
}).filter(":first").click();
});
</script>



Thanks.

qny comments:

hey denzel thanks but still nothing

Denzel Chia comments:

Hi,

Never mind. Just saw what you want to achieve on http://taohealingartscenter.com/home-test
The post content cannot be shown in flowplayer, unless you modify the flowplayer script.

This is beyond me.

To make things easier for you, you should find a jQuery content slider that accepts some kind of caption, in order for the post title and excerpt to show. This will minimize the need to change the codes.

Thanks.

qny comments:

thanks denzel for your effort.

i think we have to edit the script code to read not only the img but the whole content.

unfortunately i have to do something like this http://creativix.iwebix.de/ but with video inside the post

thanks again

qny comments:

hi seb

this is the visible page http://taohealingartscenter.com/, in this case i use only jscroller to have the scrollbar effect, now i would like to open that post on the gray box on top, the current video is entered on page dashboard.

this is the test page http://taohealingartscenter.com/home-test where i'm trying the flowplayer script, please don't take care about the style and the contet, is very confused

thanks

Sébastien | French WordpressDesigner comments:

so, if i understand, you have two request.
1-you want an horizontal scrollbar
2-you want that the post appears in the gray box when i click on its thumbnail in the bar (with scroll)
is it ?

qny comments:

i don't know if this is a double request but yes you understood well.

probably this is a better example http://creativix.iwebix.de/

that plugin doesn't worked for me because that thumbnails have always video inside