Movie poster hover
Hello!
So, I have this page "Movies" where I put all new movies that come out. I wanted to update it a bit and make so some hover effects happend when I put my mouse on movie poster.
Everything works fine but there's a problem with the last movie cover. Hover effect doesn't work for it. Been looking at the code for 2 days now and can't figure it out myself.
I added filmas.php which is the page where the movies are shown and hover effect javascript file. And I also added a picture where you can see problem. First 2 posters are how they look when I don't have mouse on them, 3rd is with mouse and last one is the one that doesn't work.
Movies.php
Code:
<?
require_once("include/bittorrent.php");
dbconn();
loggedinorreturn();
error_reporting(0);
/* --- Ieslēdzam, ja gribam izvēlēties gadus --- */
$where = ""; //Default
if(isset($_GET["year"]))
{
if($_GET["year"] == 'all')
{
$where ='';
}
else
{
$where = 'WHERE year = 20'. $_GET["year"];
}
}
/* --- End --- */
$res1 = mysql_query("SELECT COUNT(*) FROM premieres " . $where);
/* --- Aizvietojam ar $res1 = mysql_query("SELECT COUNT(*) FROM premieres"); ja negribam gada izvēli --- */
$row1 = mysql_fetch_array($res1);
$count = $row1[0];
$limit = 16;
list($pagertop, $pagerbottom, $limit) = pager($limit, $count, "/filmas.php?", array('nopage' => true));
stdhead($tracker_lang['movies']);
?>
<style>
.wrapper { white-space: nowrap; }
.wrapper .field {
width: 175px;
overflow: hidden;
display: block;
text-overflow: ellipsis;
}
.wrapper .field:hover {
position: relative;
overflow: visible; }
.wrapper .field span { background: #ffffff; }
</style>
<script src="js/glossy.js" language="javascript" type="Text/JavaScript"></script>
<script src="http://www.filebitz.org/js/jquery.contenthover.js" language="javascript" type="Text/JavaScript"></script>
<?
/* --- Lai ieslēgtu gada izvēli --- */
if(get_user_class() >= UC_MODERATOR){
print("<table width='100%' border='0' cellspacing='0' cellpadding='0'>
<table width='100%' border='0' cellpadding='0' cellspacing='0'><tr>
<td class='block' width='14' align='left'><img src='themes/".$ss_uri."/images/mala_kreisaa.png' width='14' height='24'></td>
<td class='block' width='100%' align='center' valign='middle' background='themes/".$ss_uri."/images/vidus.png'>");
print("<a href=\"addfilmas.php\">Pievienot jaunu filmu</a></td>
<td class='block' width='15' align='right'><img src='themes/".$ss_uri."/images/mala_labaa.png' width='14' height='24'>
</td></tr>"); }
print("<table width=\"100%\" class=\"main\" cellpadding=\"4\">");
print("<tr><td>");
print("<form method=\"get\" action=\"filmas.php\"><p align=\"center\">".$tracker_lang['gads_izvele']." <select name=\"year\">
<option value=\"all\">".$tracker_lang['visi']."</option>
<option value=\"00\">2000</option>
<option value=\"01\">2001</option>
<option value=\"02\">2002</option>
<option value=\"03\">2003</option>
<option value=\"04\">2004</option>
<option value=\"05\">2005</option>
<option value=\"06\">2006</option>
<option value=\"07\">2007</option>
<option value=\"08\">2008</option>
<option value=\"09\">2009</option>
<option value=\"10\">2010</option>
<option value=\"11\">2011</option>
<option value=\"12\">2012</option>
<option value=\"13\">2013</option>
<option value=\"14\">2014</option>
<option value=\"15\">2015</option>
<option value=\"16\">2016</option>
<option value=\"17\">2017</option>
<option value=\"18\">2018</option>
<option value=\"19\">2019</option>
<option value=\"20\">2020</option>
</select> <input class=\"btn\" type=\"submit\" value=\"".$tracker_lang['sp_gatavs']."\" /></p></form>");
print("</td></tr>");
print("</table>");
/* --- End --- */
print("<table width='100%' border='0' cellspacing='0' cellpadding='0'>
<table width='100%' border='0' cellpadding='0' cellspacing='0'><tr>
<td class='block' width='14' align='left'><img src='themes/".$ss_uri."/images/mala_kreisaa.png' width='14' height='24'></td>
<td class='block' width='100%' align='center' valign='middle' background='themes/".$ss_uri."/images/vidus.png'><font class='block-title' valign='bottom'><strong>".$tracker_lang['new_movies']."</strong></font></td>
<td class='block' width='15' align='right'><img src='themes/".$ss_uri."/images/mala_labaa.png' width='14' height='24'>
</td></tr>");
print("<table width=\"100%\" class=\"main\" cellpadding=\"4\">");
print("<tr>");
$res = mysql_query("SELECT premieres.id, premieres.name, premieres.year, premieres.genre, premieres.imdb, premieres.imdb_rating, premieres.uploaded, premieres.url, premieres.poster, premieres.owner, premieres.ori_name, users.username, users.class FROM premieres LEFT JOIN users ON premieres.owner = users.id $where ORDER BY year DESC $limit");
if(mysql_num_rows($res) > 0){
while($arr = mysql_fetch_array($res))
{
$id = $arr['id'];
$name = $arr['name'];
$ori_name = $arr['ori_name'];
$year = $arr['year'];
$genre = $arr['genre'];
$imdb = $arr['imdb'];
$imdb_rating = $arr['imdb_rating'];
$lang = $arr['lang'];
$year = $arr['year'];
$uploaded = $arr['uploaded'];
$url = $arr['url'];
$search_name = preg_replace("/[^-_a-z0-9]+/i", "+", $ori_name);
$poster = "<a href=\"http://filebitz.org/browse.php?c25=1&c26=1&c24=1&c41=1&c47=1&c23=1&search=$search_name\"><img src=\"$arr[poster]\" width=\"170\" height=\"228\" border=\"0\" class=\"glossy\"></a>";
$shortname = myTruncate($ori_name, 25, " ");
$shortname2 = myTruncate($name, 25, " ");
/* Hover funkcija */
?>
<script language="javascript" type="Text/JavaScript">
$('#1').contenthover({
overlay_background:'#333',
});
</script>
<script language="javascript" type="Text/JavaScript">
var i=0;
$('.cipars').each(function(){
i++;
var newID='1'+i;
$(this).attr('id',newID);
$(this).val(i);
});
</script>
<script language="javascript" type="Text/JavaScript">
var i=0;
$('.contenthover').each(function(){
i++;
var newID='1'+i;
$(this).attr('id',newID);
$(this).val(i);
});
</script>
<style>
.contenthover { padding:20px 20px 10px 20px; display:inline-block; max-width:170px; }
.contenthover, .contenthover h3, contenthover a { color:#fff; display:inline-block; max-width:170px; }
.contenthover h3, .contenthover p { margin:0 0 10px 0; padding:0; display:inline-block; max-width:170px; }
.contenthover a.mybutton { display:inline-block; padding:0 0; max-width:170px; background:#3c9632; color:#fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
.contenthover a.mybutton:hover { background:#34742d display:inline-block; max-width:170px; }
</style>
<?
/* Hover funkcija */
print("<td align=\"center\" colspan=\"0\" border=\"0\" width=\"175\"><div align=\"center\" width=\"170\"><hr>
<div width=\"170\"><a href=\"http://filebitz.org/browse.php?c25=1&c26=1&c24=1&c41=1&c47=1&c23=1&search=$search_name\" title=\"$name\"><b><u>$shortname2</u></b></a>
<br><small><a href=\"http://filebitz.org/browse.php?c25=1&c26=1&c24=1&c41=1&c47=1&c23=1&search=$search_name\" title=\"$ori_name\"><b><a href=\"#\" title=\"$ori_name\">$shortname</b></a></small>
</div><hr>
<div><div id=\"1\" class=\"cipars\">$poster</div>
<div class=\"contenthover\" id=\"1\"><br>
<a href=\"http://filebitz.org/browse.php?c25=1&c26=1&c24=1&c41=1&c47=1&c23=1&search=$search_name\"><img src=\"https://cdn1.iconfinder.com/data/icons/VistaICO-File-Icons/256/Video/XVID.png\" width=\"20\"/></a>
</div></div>
<hr><div class=\"wrapper\"><span class=\"field\"><span><b>".$tracker_lang['genrei']."</b>: <font color=\"red\">$genre</font></span></span></div>
<br><b>".$tracker_lang['my_year']."</b>: <font color=\"red\">$year</font>
<br><a href=$imdb><img src=\"pic/filmas/imdb.png\" align=absmiddle alt=IMDB title=IMDB width=35 height=35/></a>
<a href=$url><img src=\"pic/filmas/youtube.png\" alt=YouTube align=absmiddle title=YouTube width=50 height=17/></a>
<br><b>IMDB Rating:</b> <fony color=\"red\">$imdb_rating/10</font>");
if(get_user_class() >= UC_MODERATOR || $CURUSER['id'] == $arr['owner']){
print("<br><a href=\"takefilmas.php?p=delete&id=$id\"><b title=\"Dzēst filmu\"><span style=\"color: #CC3333;\"><small>[Dzēst]</small></span></b></a>  <a href=\"filmasedit.php?id=$id\"><b title=\"Rediģēt filmu\"><span style=\"color: #CC3333;\"><small>[Rediģēt]</small></span></b></a>");
}
print("<p></p></div>");
++$pre[$res];
if ($pre[$res] <=3 ){
print('</td>');
}else{
print('</td></tr>');
$pre[$res] = 0;
}
}
print("<tr><td class=\"index\" colspan=\"12\">");
print("<center>". $pagerbottom ."</center>");
print("</td></tr>");
}else{
print("<center>".$tracker_lang['no_movies']."</center>");
}
print("</table></table></table>");
stdfoot();
?>
jquery.contenthover.js
Code:
/*!
* ContentHover jQuery plugin v0.1
* http://www.backslash.gr/demos/contenthover-jquery-plugin/
*
* Copyright 2011 by Nikos Tsaganos
* http://www.backslash.gr/
*/
(function($){
var methods = {
init : function(options) {
var defaults = {
data_selector: '.contenthover', // The selector for the element that will be the content of the overlay element to show on hover
width: 170, // Set to 0 to let the plugin figure it out
height: 0, // Set to 0 to let the plugin figure it out
overlay_width: 170, // The overlay element's width. Set to 0 to use the same as 'width'
overlay_height: 0, // The overlay element's height. Set to 0 to use the same as 'height'
overlay_x_position: 'center', // [center, left, right] The position of the overlay horizontally (if overlay_width is different from width)
overlay_y_position: 'bottom', // [center, top, bottom] The position of the overlay vertically (if overlay_width is different from width)
overlay_background: '', // The css background of the overlay element
overlay_opacity: 1, // [0-1] The opacity of the overlay element
effect: 'slide', // [fade, slide, show] The effect to use
fade_speed: 400, // Effect ducation for the 'fade' effect only
slide_speed: 300, // Effect ducation for the 'slide' effect only
slide_direction: 'bottom', // [top, bottom, right, left] From which direction should the overlay apear, for the slide effect only
zindex: 0, // The base z-index value
wrapper_class: 'ch_wrapper', // CSS class to add to the wrapper
normal_class: 'ch_normal', // CSS class to add to the 'normal' element
hover_class: 'ch_hover', // CSS class to add to the 'hover' element
onshow: function(){}, // Callback function when the 'hover' element is shown
onhide: function(){} // Callback function when the 'hover' element is hidden
},
settings = $.extend({}, defaults, options);
return this.each(function(){
var $this = $(this),
w = 170,
h = $this.height() ? $this.height() : settings.height,
overlay_w = settings.overlay_width ? settings.overlay_width : w,
overlay_h = settings.overlay_height ? settings.overlay_height : h,
$data = $this.next(settings.data_selector);
if ($data.length) {
$data.hide();
var $ch_wrapper = $('<div>').addClass('ch_element').addClass(settings.wrapper_class).css({ 'width':w, 'height':h, 'position':'relative', 'overflow':'hidden' }).insertAfter($this);
var $ch_normal = $('<div>').addClass(settings.normal_class).css({ 'width':w, 'height':h, 'position':'absolute', 'z-index':settings.zindex }).appendTo($ch_wrapper);
$this.clone().appendTo($ch_normal);
$this.hide();
var $ch_hover = $('<div>').addClass(settings.hover_class).css({ 'width':overlay_w, 'height':overlay_h, 'position':'absolute', 'z-index':settings.zindex-1 }).appendTo($ch_wrapper);
$data.clone().show().appendTo($ch_hover);
var ch_hover_css = {};
if (settings.overlay_background) {
ch_hover_css.background = settings.overlay_background;
}
if (settings.overlay_opacity<1) {
ch_hover_css.opacity = settings.overlay_opacity;
}
if (settings.overlay_x_position=='left') {
ch_hover_css.left = 0;
} else if (settings.overlay_x_position=='right') {
ch_hover_css.left = (w-overlay_w)+'px';
} else {
ch_hover_css.left = (w/2 - overlay_w/2)+'px';
}
if (settings.overlay_y_position=='top') {
ch_hover_css.top = 0;
} else if (settings.overlay_y_position=='bottom') {
ch_hover_css.top = (h-overlay_h)+'px';
} else {
ch_hover_css.top = (h/2 - overlay_h/2)+'px';
}
$ch_hover.css(ch_hover_css);
// slide effect
if (settings.effect=='slide'){
var initial_css = {};
if (settings.slide_direction=='top') {
initial_css = { top:('-'+overlay_h+'px') };
}
if (settings.slide_direction=='bottom') {
initial_css = { top:h+'px' };
}
if (settings.slide_direction=='left') {
initial_css = { left:('-'+overlay_w+'px') };
}
if (settings.slide_direction=='right') {
initial_css = { left:w+'px' };
}
$ch_hover.css('z-index',settings.zindex+1).css(initial_css);
$ch_wrapper.hover(function () {
$ch_hover.stop(true, true).animate({ 'top': ch_hover_css.top, 'left': ch_hover_css.left }, settings.slide_speed, settings.onshow());
}, function () {
$ch_hover.stop(true, true).animate(initial_css, settings.slide_speed, settings.onhide());
});
// fade effect
} else if (settings.effect=='fade') {
$ch_hover.css('z-index',settings.zindex+1).hide();
$ch_wrapper.hover(function () {
$ch_hover.stop(true, true).fadeIn(settings.fade_speed, settings.onshow());
}, function () {
$ch_hover.stop(true, true).fadeOut(settings.fade_speed, settings.onhide());
});
// just show/hide
} else {
$ch_hover.css('z-index',settings.zindex+1).hide();
$ch_wrapper.hover(function () {
$ch_hover.show(0, settings.onshow());
}, function () {
$ch_hover.hide(0, settings.onhide());
});
}
}
});
},
stop : function() {
return this.each(function(){
var $this = $(this),
$data = $this.next('.ch_element');
$this.show();
$data.remove();
$this.unbind('.contenthover');
});
},
destroy : function() {
return this.each(function(){
$(this).show();
$('.ch_element').remove();
$(window).unbind('.contenthover');
});
}
};
$.fn.contenthover = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method '+ method +' does not exist in contentHover plugin.');
}
};
})(jQuery);
|