SimplePortal

Customization => Custom Coding => Topic started by: agent47 on July 07, 2011, 01:13:34 PM

Title: jQuery carousel to make images slide
Post by: agent47 on July 07, 2011, 01:13:34 PM

Here's a code that was created by one of my good friends on TP.
What I would like help is with to combine my already created gallery script (which nabs the first image from a topic) with google's jQuery carousel script | http://code.google.com/p/jquery-infinite-carousel/ and make it auto-slide until mouse is rolled over along with the left and right arrow buttons. This would basically put my site in the "mission accomplished" stage. ;)

Here's is my already created gallery script:

Code: [Select]

echo '
<center><img src="..//Themes/newbalance_20/images/custom/recent-comics.png" align="center"> ';


// Block to display images embedded in forum posts from a particular board.
// Shows the first image from the first post of most recently active topics.
// Works with Aeva media package. 
// Embedded images must be the first image in the post and within the first 1600 characters (as set in code).
// Use the Aeva url's for the image. For example...
// [img]http://localhost/forum7/MGalleryItem.php?id=5[/img]
// Will ignore topics without an image.
// Tested on SMF2.0RC4, TP1.0RC1, AevaMedia1.4c
// Author: Freddy, Tiny Portal Support.


// ### Configuration ###

// Specify the board(s) that holds the images.  Comma separated.
$include_boards = array(6,33,34,35,46,47,48,49,50,51,52);

// Specify how many images to try and show.
$num_images = 8;

// Specify how many columns the table should have.
$columns = 4;

// ### End Config ###


global $smcFunc, $scripturl;

// Find all the most recent active topics with images in the first post.
$request = $smcFunc['db_query']('substring', '
SELECT
m.subject, m.id_topic,
SUBSTRING(m.body, 1, 1600) AS body
FROM {db_prefix}topics AS t
INNER JOIN {db_prefix}messages AS m ON (m.id_msg = t.id_first_msg)
INNER JOIN {db_prefix}boards AS b ON (b.id_board = t.id_board)
WHERE
b.id_board IN ({array_int:include_boards})
AND m.body REGEXP {string:regexp}
ORDER BY t.id_last_msg DESC
LIMIT ' . $num_images,
array(
'include_boards' => $include_boards,
'regexp' => 'MGalleryItem.php\?id=[0-9]+',
)
);

$posts = array();

while ($row = $smcFunc['db_fetch_assoc']($request))
{
$row['body'] = strip_tags($row['body']);

$image_id = '';

if (preg_match("/MGalleryItem.php\?id=[0-9]+/", $row['body'], $matches))
{
if (preg_match("/id=[0-9]+/", $matches[0], $matches))
$image_id = str_replace("id=", "in=", $matches[0]);
}

// Build the array.
$posts[] = array(
'topic' => $row['id_topic'],
'body' => $row['body'],
'link' => '<a href="' . $scripturl . '?topic=' . $row['id_topic'] . '" rel="nofollow">' . $row['subject'] . '</a>',
'image_id' => $image_id,
'image_thumb' => '<img src="' . $scripturl . '?action=media;sa=media;' . $image_id . ';thumb" alt="Comic Book Cover" />'
);
}

$smcFunc['db_free_result']($request);


// Output, style this as you see fit.

$column_count = 0;

echo '
<table style="margin: auto; font-size: 11px" cellspacing="1" cellpadding="10">
<tr>';

foreach($posts as $post)
{
if ($column_count >= $columns)
{
echo '
</tr>
</tr>';

$column_count = 0;
}

echo '
<td style="text-align: center; vertical-align: top;">

' , $post['image_thumb'] , '<br />
<div style="margin: auto;width: 130px">' , $post['link'] , '</div>
</td>';

$column_count++;
}

while ($column_count < $columns)
{
echo '
<td>
</td>';

$column_count++;
}

echo '
</tr>
</table>';Since Aeva don't support their mod anymore, this place is my only hope so fingers crossed :)

Title: Re: jQuery carousel to make images slide
Post by: agent47 on July 21, 2011, 08:15:41 AM

Someone please help me out with this. It would mean a whole lot guys so please...... block geniuses...