Hello everybody!
Since KurtW's mods went away, I was missing a way to place an image-rating without page reload. So I programmed a mod, that will let the user rate a picture with stars, like seen on Youtube e.g.
I made the frontend in base of the Star-Display of waynenort of this Thread:
http://www.4homepages.de/forum/index.php?topic=25451.0 Thanksgiving to him from my side for providing the code!
Some annotations before I will start:
This will be my first mod. So please take this into consideration if you comment my mod (which I really would appreciate)
Update: I made a few screenshots, so that you can take a picture:
Initial look of a non-rated image:
- Image not longer available - While mouse-over, the stars and the label changes:
- Image not longer available - Rate image without page reload. Immediately see the changes in the rating
- Image not longer available - It is still not possible to flood the rating:
- Image not longer available - Let's go now:
Summary of files affected[change] details.php
[change] includes/constants.php
[change] includes/functions.php
[change] includes/page_header.php
[change] lang/(your_lang)/main.php
[change] templates/(your_template)/details.html
[change] templates/(your_template)/header.html
[change] templates/(your_template)/rate_form.html
[change] templates/(your_template)/style.css
[new] ajaxrating.php
[new] scripts/ajaxrating.js
[new] scripts/yui/2.7.0/build/connection/connection-min.js
[new] scripts/yui/2.7.0/build/json/json-min.js
[new] scripts/yui/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js
[new] templates/(your_template)/images/stars.gif
[new] templates/(your_template)/rate_form_readonly.html
1. Open details.phpLocate:
$site_template->print_template($site_template->parse_template($main_template));Insert
before:
//-----------------------------------------------------
//--- [MOD] Ajax Star Rating --------------by Bash-T---
//START------------------------------------------------
$site_template->register_vars(array(
"ajax_rating_labels_0" => $lang['ajax_rating_labels'][0],
"ajax_rating_labels_1" => $lang['ajax_rating_labels'][1],
"ajax_rating_labels_2" => $lang['ajax_rating_labels'][2],
"ajax_rating_labels_3" => $lang['ajax_rating_labels'][3],
"ajax_rating_labels_4" => $lang['ajax_rating_labels'][4],
"ajax_rating_labels_5" => $lang['ajax_rating_labels'][5],
"ajax_rating_messages_0" => $lang['ajax_rating_messages'][0],
"ajax_rating_messages_1" => $lang['ajax_rating_messages'][1],
"ajax_rating_messages_2" => $lang['ajax_rating_messages'][2],
"ajax_rating_messages_3" => $lang['ajax_rating_messages'][3],
"ajax_rating_points" => $lang['ajax_rating_points']
));
//-----------------------------------------------------
//--- [MOD] Ajax Star Rating --------------by Bash-T---
//--------------------------------------------------END2. Open includes/constants.phpLocate:
define('MAX_RATING', 5);Replace with:
define('MAX_RATING', 6);3. Open includes/functions.phpLocate:
$rate_form = "";
if (check_permission("auth_vote", $image_row['cat_id'])) {
$site_template->register_vars("rate", $lang['rate']);
$rate_form = $site_template->parse_template("rate_form");
}
$site_template->register_vars("rate_form", $rate_form);Replace with:
//-----------------------------------------------------
//--- [MOD] Ajax Star Rating --------------by Bash-T---
//START------------------------------------------------
$rate_form = "";
if (check_permission("auth_vote", $image_row['cat_id'])) {
$rate_form = $site_template->parse_template("rate_form");
}
else {
$site_template->register_vars(
"ajax_rating_messages_3", $lang['ajax_rating_messages'][3]);
$rate_form = $site_template->parse_template("rate_form_readonly");
}
$site_template->register_vars("rate_form", $rate_form);
/*The original code goes here:
$rate_form = "";
if (check_permission("auth_vote", $image_row['cat_id'])) {
$site_template->register_vars("rate", $lang['rate']);
$rate_form = $site_template->parse_template("rate_form");
}
$site_template->register_vars("rate_form", $rate_form);*/
//-----------------------------------------------------
//--- [MOD] Ajax Star Rating --------------by Bash-T---
//--------------------------------------------------END4. Open lang/(your_lang)/main.phpLocate:
$lang['voting_success'] = "Ihre Bewertung wurde gespeichert";
$lang['voting_error'] = "Bewertung ungültig!";
$lang['already_voted'] = "Sie haben dieses Bild bereits bewertet!";Replace with:
//$lang['voting_success'] = "Ihre Bewertung wurde gespeichert";
//disabled due to AJAX rating MOD
//$lang['voting_error'] = "Bewertung ungültig!";
//disabled due to AJAX rating MOD
//$lang['already_voted'] = "Sie haben dieses Bild bereits bewertet!";//disabled due to AJAX rating MOD
At the very end Locate:
?>Insert
before:
//-----------------------------------------------------
//--- [MOD] Ajax Star Rating --------------by Bash-T---
//START------------------------------------------------
$lang['ajax_rating_labels'] = array (
0 => "Noch nicht bewertet",
1 => "Öde",
2 => "Nichts besonderes",
3 => "Sehenswert",
4 => "Echt cool",
5 => "Genial!"
);
$lang['ajax_rating_messages'] = array (
0 => "Bewertung ungültig", //voting_error
1 => "Vielen Dank für Deine Bewertung!", // voting_success
2 => "Du hast das Bild bereits bewertet.", //already_voted
3 => "Weitere Bewertungen sind für dieses Bild deaktiviert."
);
$lang['ajax_rating_points'] = "Punkte";
//-----------------------------------------------------
//--- [MOD] Ajax Star Rating --------------by Bash-T---
//--------------------------------------------------END
5. Open templates/(your_template)/details.htmlAt the very top locate:
{header}Insert
after:
<!-- ----------------------------------------------- -->
<!-- [MOD] Ajax Star Rating -------------- by Bash-T -->
<!-- START ----------------------------------------- -->
<script type="text/javascript">
YAHOO.namespace('rating');
YAHOO.rating.star={
display_percentage : false, //set to true if a percentaged value shall be shown beneath the stars.
display_lables: true, //set to true if a ranking label shall be displayed beneath the stars at mouseover.
//do not modify the properties below!
num : 0,
successfully_voted : false,
labels : [ '{ajax_rating_labels_0}' , '{ajax_rating_labels_1}', '{ajax_rating_labels_2}', '{ajax_rating_labels_3}', '{ajax_rating_labels_4}', '{ajax_rating_labels_5}'],
msgs : [ '{ajax_rating_messages_0}' , '{ajax_rating_messages_1}', '{ajax_rating_messages_2}']
};
</script>
<script type="text/javascript" src="scripts/ajaxrating.js"></script>
<!-- ----------------------------------------------- -->
<!-- [MOD] Ajax Star Rating -------------- by Bash-T -->
<!-- END ----------------------------------------- -->Note: The code above will give you two configuration triggers:
1.
display_percentagechange this attribute to true, then a number will be posted right beside the stars, that will show you the current rating level in percent (0% - 100%)
2.
display_lablesif you set this attribute to true, a label will be shown beside the stars, showing a textual kind of rating. The values of the $lang['ajax_rating_labels'] array will be shown here.
Note: the variable {rate_form} of the following code will provide both: displaying the rating and give the user the chace to place a rating (if it is allowed for this category).
Therefore it is no need to use the {if rate_form} tag, as it will be checked within the variable.
Locate:
{if rate_form}
<br />
<div align="center">{rate_form}</div>
{endif rate_form} Replace with:
<div align="center">{rate_form}</div>Put the following code anywhere on your details page (usually directly below the div tag posted beforehand:
<span id="ajax_rating_count">{image_votes}</span> {lang_votes} | <span id="ajax_rating_rate">{image_rating}</span> {ajax_rating_points}6. Open templates/(your_template)/header.htmlLocate:
{if has_rss}Insert
before:
<!-- ----------------------------------------------- -->
<!-- [MOD] Ajax Star Rating -------------- by Bash-T -->
<!-- START ----------------------------------------- -->
<script type="text/javascript" src="scripts/yui/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="scripts/yui/2.7.0/build/json/json-min.js"></script>
<script type="text/javascript" src="scripts/yui/2.7.0/build/connection/connection-min.js"></script>
<!-- ----------------------------------------------- -->
<!-- [MOD] Ajax Star Rating -------------- by Bash-T -->
<!-- END ----------------------------------------- -->
Open templates/(your_template)/rate_form.htmlReplace the whole file with the following code:
<!-- ----------------------------------------------- -->
<!-- [MOD] Ajax Star Rating -------------- by Bash-T -->
<!-- START ----------------------------------------- -->
<form method="post" id="ajax_rate_form">
<div id="star"><br style="clear: both;" />
<ul id="star0" class="star" onmousedown="YAHOO.rating.star.update(event,this)" onmousemove="YAHOO.rating.star.mouse(event,this)">
<li id="starCur0" class="curr" title="{image_rating}" style="width: 0px;"></li>
</ul>
<div style="color: rgb(136, 136, 136);" id="starUser0" class="user" percent="0"></div>
<div id="star_rating_label" class="user"></div>
<div id="star_rating_msg" class="user"></div>
</div>
<input type="hidden" name="rating" value="0" />
<input type="hidden" name="action" value="rateimage" />
<input type="hidden" name="id" value="{image_id}" />
</form>
<br style="clear: both;" />
<!--
<form method="post" action="{self}">
<table border="0" cellspacing="0" cellpadding="1">
<tr>
<td class="head1">
<table border="0" cellspacing="0" cellpadding="3" class="row1">
<tr>
<td valign="bottom">
<select name="rating" class="select">
<option value="">--</option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
</select>
</td>
<td>
<input type="hidden" name="action" value="rateimage" />
<input type="hidden" name="id" value="{image_id}" />
<input type="submit" value="{rate}" class="button" name="submit" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>-->
<!-- ----------------------------------------------- -->
<!-- [MOD] Ajax Star Rating -------------- by Bash-T -->
<!-- END ----------------------------------------- -->7. Open templates/(your_template)/style.cssAt the very end insert:
/*-----------------------------------------------------*/
/*--- [MOD] Ajax Star Rating --------------by Bash-T---*/
/*START------------------------------------------------*/
#star ul.star { LIST-STYLE: none; MARGIN: 0; PADDING: 0; WIDTH: 85px; HEIGHT: 20px; LEFT: 0px; TOP: -5px; POSITION: relative; FLOAT: left; BACKGROUND: url('images/stars.gif') repeat-x; CURSOR: pointer; }
#star li { PADDING: 0; MARGIN: 0; FLOAT: left; DISPLAY: block; WIDTH: 85px; HEIGHT: 20px; TEXT-DECORATION: none; text-indent: -9000px; Z-INDEX: 20; POSITION: absolute; PADDING: 0; }
#star li.curr { BACKGROUND: url('images/stars.gif') left 25px; left:0px; FONT-SIZE: 1px; }
#star div.user { LEFT: 15px; POSITION: relative; FLOAT: left; FONT-SIZE: 11px; FONT-FAMILY: Arial; COLOR: #717E7D; }
/*-----------------------------------------------------*/
/*--- [MOD] Ajax Star Rating --------------by Bash-T---*/
/*--------------------------------------------------END*/8. Open includes/page_header.phpLocate:
//-----------------------------------------------------
//--- Save Rating -------------------------------------
//-----------------------------------------------------
if ($action == "rateimage" && $id) {
$rating = intval($HTTP_POST_VARS['rating']);
$cookie_name = (defined("COOKIE_NAME")) ? COOKIE_NAME : "4images_";
$cookie_rated = isset($HTTP_COOKIE_VARS[$cookie_name.'rated']) ? unserialize(stripslashes($HTTP_COOKIE_VARS[$cookie_name.'rated'])) : array();
if ($rating && $rating <= MAX_RATING && $id) {
if (!isset($session_info['rated_imgs'])) {
$session_info['rated_imgs'] = $site_sess->get_session_var("rated_imgs");
}
$split_list = array();
if (!empty($session_info['rated_imgs'])) {
$split_list = explode(" ", $session_info['rated_imgs']);
}
if (!in_array($id, $split_list) && !in_array($id, $cookie_rated)) {
$session_info['rated_imgs'] .= " ".$id;
$session_info['rated_imgs'] = trim($session_info['rated_imgs']);
$site_sess->set_session_var("rated_imgs", $session_info['rated_imgs']);
$cookie_rated[] = $id;
$cookie_expire = time() + 60 * 60 * 24 * 4;
setcookie($cookie_name.'rated', serialize($cookie_rated), $cookie_expire, COOKIE_PATH, COOKIE_DOMAIN, COOKIE_SECURE);
update_image_rating($id, $rating);
$msg = $lang['voting_success'];
}
else {
$msg = $lang['already_voted'];
}
}
else {
$msg = $lang['voting_error'];
}
}
and delete this block or comment it like this one:
//-----------------------------------------------------
//--- Save Rating -------------------------------------
//-----------------------------------------------------
/* [MOD] Ajax Star Rating. Code block disabled. Modified code in /ajaxrating.php
if ($action == "rateimage" && $id) {
$rating = intval($HTTP_POST_VARS['rating']);
$cookie_name = (defined("COOKIE_NAME")) ? COOKIE_NAME : "4images_";
$cookie_rated = isset($HTTP_COOKIE_VARS[$cookie_name.'rated']) ? unserialize(stripslashes($HTTP_COOKIE_VARS[$cookie_name.'rated'])) : array();
if ($rating && $rating <= MAX_RATING && $id) {
if (!isset($session_info['rated_imgs'])) {
$session_info['rated_imgs'] = $site_sess->get_session_var("rated_imgs");
}
$split_list = array();
if (!empty($session_info['rated_imgs'])) {
$split_list = explode(" ", $session_info['rated_imgs']);
}
if (!in_array($id, $split_list) && !in_array($id, $cookie_rated)) {
$session_info['rated_imgs'] .= " ".$id;
$session_info['rated_imgs'] = trim($session_info['rated_imgs']);
$site_sess->set_session_var("rated_imgs", $session_info['rated_imgs']);
$cookie_rated[] = $id;
$cookie_expire = time() + 60 * 60 * 24 * 4;
setcookie($cookie_name.'rated', serialize($cookie_rated), $cookie_expire, COOKIE_PATH, COOKIE_DOMAIN, COOKIE_SECURE);
update_image_rating($id, $rating);
$msg = $lang['voting_success'];
}
else {
$msg = $lang['already_voted'];
}
}
else {
$msg = $lang['voting_error'];
}
}*/In the attached zip file you will find all the files, that are marked as [new] in the agenda above.
Please keep the directory structure and provide the html files in your specific template.
If everything worked well, then you should see the new star-rating element at the place, where you put the {rate_form} Tag.
Please let me know what you think of this mod.
Kind regards,
Bash-T
Bugfixes: 18.08.09 15:15
- Fixes CSS Display Bug in IE. Perform Step 7 again to display the stars properly in Internet Explorer
17.08.09 22:59
- Edited some HTML Comments, as they seem to not close correctly in some case.
17.08.09 21:22
- IE Display Bugfix in ajaxrating.js - download attatched zip for update
17.08.09 17:22
- Step 8 fixed (a closing "}" was missing)
- Demo HP added
16.08.09 20:32
- Step 8 added.
Show Posts
