Bravo List
Register
Go Back   > Bravo List > Source Code > Archived Trackers > Yuna Scatari Edition (YSE)
Reload this Page Movie poster hover
Reply
  #1  
Old 12th February 2014, 22:50
mat22's Avatar
mat22 mat22 is offline
Senior Member
  
Join Date: Jun 2009
Latvia
Posts: 119
Default 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']."&nbsp;<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>&nbsp;&nbsp;<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>
&nbsp;&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp<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);
Click the image to open in full size.
Reply With Quote
  #2  
Old 9th March 2014, 00:25
BitFarmer's Avatar
BitFarmer BitFarmer is offline
Senior Member
  
Join Date: Jan 2012
Latvia
Posts: 99
Default
as you can see for last one there is ment to be 2 images and the down one is not loaded need to see page source (ctrl+u) to fix this one
Reply With Quote
  #3  
Old 9th March 2014, 00:58
joeroberts's Avatar
joeroberts joeroberts is offline
BT.Manager Owner
  
Join Date: Jan 2008
United States
Posts: 2,113
Default
OK I dont normaly reply to post like this one because I normaly sound like a A$$ hole But I well try.

your first mistake
You have this code
Code:
<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>
inside a foreach statement which is wayyy wrong as now it is sending this to the browser for every torrent listed so if you like have 5 torrents listed it sends that out 5 times so your killing java and css
second your not setting the ID rite in your tags

Code:
<div class=\"contenthover\" id=\"1\"><br>
you should only have one id=\"1\" but in your code you well have 16 now how is java going to know which one to use for hover if there all 1 you should alter those with the the torrent ID

Good luck with your code.
__________________
Do not ask me to help you work on your site that is not phpMyBitTorrent
Do not ask me to make a mod for any other source
Do not Ask me to setup your site.
I will no longer help you setup your site, there is a setup script if you have trouble with it post in the forum here or in BT.Manager™ forum
My Current Demo is here http://demo.btmanager.org/
Reply With Quote
  #4  
Old 9th March 2014, 01:27
mat22's Avatar
mat22 mat22 is offline
Senior Member
  
Join Date: Jun 2009
Latvia
Posts: 119
Default
Ok thanks for answers.
The "second" image for the last poster is the one that should show up when I hover my mouse over the actual poster.

And thanks to joeroberts I got an idea for those IDs. I'll check if it works tomorrow and then come back and tell you ASAP.
Reply With Quote
  #5  
Old 9th March 2014, 02:12
joeroberts's Avatar
joeroberts joeroberts is offline
BT.Manager Owner
  
Join Date: Jan 2008
United States
Posts: 2,113
Default
__________________
Do not ask me to help you work on your site that is not phpMyBitTorrent
Do not ask me to make a mod for any other source
Do not Ask me to setup your site.
I will no longer help you setup your site, there is a setup script if you have trouble with it post in the forum here or in BT.Manager™ forum
My Current Demo is here http://demo.btmanager.org/
Reply With Quote
  #6  
Old 10th March 2014, 20:48
mat22's Avatar
mat22 mat22 is offline
Senior Member
  
Join Date: Jun 2009
Latvia
Posts: 119
Default
Ok, so I tried different variations of code but still couldn't get it working.
But I improved code a bit so it now only uses 1 javascript to increase ID every time (and yes, it works fine until last torrent poster on page).

This is the part from movies.php where the actual hover effect is.
Code:
/* Hover funkcija */
?>
<script language="javascript" type="Text/JavaScript">
$('#1').contenthover({
    overlay_background:'#333',
});
</script>
<!-- This increases element id -->
<script language="javascript" type="Text/JavaScript">
var ID = 0;
$('div.cipars').each(function() {
    ID++;
    $(this).attr('id', 'id'+ID);
});
</script>
<!-- id increase end -->
<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=\"/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=\"/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\">
<div id=\"1\" class=\"cipars\"><br>
<a href=\"/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></div>
<hr>
Thing is - first 15 posters (out of 16) work fine and hover effect works just as needed. But the problem is with last one - in page source it shows "id = 1" while for other it's, for example, "id = id29" or "id = id23" or something like that. Looks like last torrent just takes that id from code and I'm not able to figure out how to get it to work correctly. From all other aspects it works perfectly (and yes - I know there are probably better ways to make those id change every time).
Reply With Quote
  #7  
Old 24th January 2016, 21:53
zotya's Avatar
zotya zotya is offline
Member
  
Join Date: Mar 2011
P2P
Posts: 2
Default
Quote:
Originally Posted by mat22 View Post
Hello!
Code:
        $where = 'WHERE year = 20'. $_GET["year"];
Sql Inject!
Reply With Quote
Reply

Tags
hover , movie , poster

« Previous Thread | Next Thread »
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump



All times are GMT +2. The time now is 14:43. vBulletin skin by ForumMonkeys. Powered by vBulletin® Version 3.8.11 Beta 3
Copyright ©2000 - 2023, vBulletin Solutions Inc.


Contact Us - Archive - Top