Load embedded video code

JavaScript
1

I’ve been working on a rebuild for a while, but am stuck on loading embedded video. It worked on the old site, but I don’t know how to get it to work on the new site. All of the embedded code is stored in a database and I’m trying to load it when somebody clicks a thumbnail. The code that worked on the old site was this:

<script type="text/javascript">
	jQuery(document).ready(function($) {
		$("#gallery #videos #loader").empty().html('<img src="/css/loader.gif" alt="" />')
		$('#gallery #videos').load($('ul.thumbs li a:first').attr('href'));
	
		$('.thumb').click(function(e){
			$("#gallery #videos #loader").empty().html('<img src="/css/loader.gif" alt="" />')
			$('#gallery #videos').load($(this).attr('href'));
			e.preventDefault();
		});
		
	});
</script>

but as the old site used Cake I don’t know how to change this so that it works.
The entire code I have is this:

<div class="artists view">
<!-- Start Advanced Gallery Html Containers -->
				<div id="thumbs" class="navigation">
										<ul class="thumbs noscript">
										<?php include 'includes/db.php'; ?>
<?php
$con = mysql_connect($host,$username,$password);
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db($database, $con);
$result = mysql_query("SELECT images.foreign_id, images.filename, videos.embed_code, videos.title, videos.order, videos.artist_id, artists.first_name, artists.last_name, artists.slug as artslug, videos.slug as videoslug
FROM images, videos, artists
WHERE videos.artist_id = $id AND images.foreign_id = videos.id AND artists.id = $id AND images.class = 'Video'
GROUP BY images.filename
ORDER BY videos.order ASC");
while($row = mysql_fetch_array($result))
{
echo "<li><a href=\\"/video/{$row['artslug']}/{$row['videoslug']}\\" class=\\"thumb\\"><img src=\\"/uploads/image/filename/thumb/thumbnailbig/". $row['filename'] . "\\" alt=\\"{$row['first_name']} {$row['last_name']} {$row['title']}\\" title=\\"{$row['first_name']} {$row['last_name']} {$row['title']}\\" /></a></li>";
}
mysql_close($con);
?>
										</ul>
								</div>
				<div id="gallery" class="content">
					<div id="videos">
						<div id="loader">
						</div>
					</div>
				
				</div>
</div>
				
				<script type="text/javascript">
	jQuery(document).ready(function($) {
		$("#gallery #videos #loader").empty().html('<img src="/css/loader.gif" alt="" />')
		$('#gallery #videos').load($('ul.thumbs li a:first').attr('href'));
	
		$('.thumb').click(function(e){
			$("#gallery #videos #loader").empty().html('<img src="/css/loader.gif" alt="" />')
			$('#gallery #videos').load($(this).attr('href'));
			e.preventDefault();
		});
		
	});

I’d be grateful for any help as I’m not sure how to fix this and the client is on my back to get this fixed.

Thanks in advance

2

Hi thehappyappy,

If the click event is not working then please try with adding live to it :

$(‘.thumb’).live(‘click’,function(e)

3

Thanks, it was working but it wasn’t loading anything except a blank page. In the end I realised that I needed to create a page that stored the embedded code and then call that in the link instead. It now works.

Thanks