Show Posts

Mods & Plugins (Releases & Support) / [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.

« on: August 16, 2009, 07:38:12 PM »

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 Demo Gallery, where you can try this mod (go on the details of an image): http://www.pawlikonline.de/temp/4images/
This is v.1.0 of the Ajax Star Rating. Soon I will release a v.1.1. Then you'll be able to use this star rating element on categories and index pages aswell. Until I will implement it into this install description, please stick to the information of this post http://www.4homepages.de/forum/index.php?topic=25666.msg140435#msg140435 , after you have done the steps below. Thanks!

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.php

Locate:
$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---
//--------------------------------------------------END

2. Open includes/constants.php
Locate:
define('MAX_RATING', 5);

Replace with:
define('MAX_RATING', 6);

3. Open includes/functions.php
Locate:
$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---
//--------------------------------------------------END

4. Open lang/(your_lang)/main.php
Locate:
$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.html
At the very top locate:

Code: [Select]

{header}
Insert _after:

Code: [Select]

<!-- ----------------------------------------------- -->
<!-- [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.

Code: [Select]

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.

Code: [Select]

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:

Code: [Select]

									{if rate_form}
                  <br />
									<div align="center">{rate_form}</div>
                  {endif rate_form}

Replace with:

Code: [Select]

<div align="center">{rate_form}</div>
Put the following code anywhere on your details page (usually directly below the div tag posted beforehand:

Code: [Select]

<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.html
Locate:

Code: [Select]

{if has_rss}
Insert ^before:

Code: [Select]

<!-- ----------------------------------------------- -->
<!-- [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.html
Replace the whole file with the following code:

Code: [Select]

<!-- ----------------------------------------------- -->
<!-- [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.css
At the very end insert:

Code: [Select]

/*-----------------------------------------------------*/
/*--- [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.php
Locate:

//-----------------------------------------------------
//--- 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.

4images Forum & Community

News:

Topics - bash-t

Discussion & Troubleshooting / Problem der Bilddarstellung bei Sonderzeichen in Dateinamen

Mods & Plugins (Releases & Support) / [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.