4images Forum & Community

4images Modifications / Modifikationen => Mods & Plugins (Releases & Support) => Topic started by: bash-t on August 16, 2009, 07:38:12 PM

Title: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: bash-t 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 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.
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc
Post by: rinaldos on August 16, 2009, 07:46:30 PM
Sounds good, but is it possible to see a DEMO?
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Sunny C. on August 16, 2009, 08:22:37 PM
NICE NICE NICE!
More of that!

Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc
Post by: rinaldos on August 16, 2009, 09:46:21 PM
@Sumale.in
Hast du es ausprobiert?
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Sunny C. on August 16, 2009, 09:55:38 PM
Hy,

nein noch nicht! Wollte das gleich mal testen und dann eventuell in die Liste aufnehmen!
Werde bescheid geben! Ca. in einer Stunde weiß ich mehr!

Edit://

Fehler:

Quote
Parse error: syntax error, unexpected '}' in /www/htdocs/w00b2576/anitube/includes/page_header.php on line 359

//-----------------------------------------------------
//--- 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'];
  }
}*/
}

Die letzte Klammer stört wohl! (hier zeile 35) Wenn ich diese entferne, dann kann ich die Seite wieder betreten!

Nächste Problem: Detailsansicht.
Da wo eigentlich das Rateform sein sollte, sehe ich nur folgendes:
(http://s6.directupload.net/images/090816/uw4lxmlu.png)

Ich bin die Installation zweimal durchgegangen!

Edit:2//
Bis jetzt war ich nicht in der Lage es einzubauen!
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: bash-t on August 17, 2009, 10:35:28 AM
Hallo zusammen,

ich habe die Anleitung auf Basis meiner gemoddeten 4images Version erstellt. Es kann sein, dass noch hier und da ein kleiner Schönheitsfehler drin ist. Wenn ich heute Abend die Zeit finde, werde ich den Mod auf einer frischen Installation auf Basis meiner obigen Anleitung erstellen und die Fehler ausmerzen.

Sorry schon mal, dass es nicht auf anhieb geklappt hat.

Viele Grüße,
Bash-T
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Sunny C. on August 17, 2009, 10:41:06 AM
Hy,

ist doch alles kein Problem.
Schön, dass es jemand neues gibt der diverse Modifikationen erstellt und auch alte, wie in diesem Fall "Ajax Starrating" *neu schreibt.

Ps.: Hab dir mal eine PN geschrieben!

Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Nicky on August 17, 2009, 02:26:09 PM
bash-t,

vorerst, vielen dank für deine bemühungen, nur weiter so!  :)

wäre aber auch nicht schlecht wenn es eine DEMO zum ansehen gäbe..

btw.
Benny, bash-t, schöne Avatars habt ihr da ;)

btw.2
bash-t, jetzt wird's Sumale.nin(Benny) website erst nicht fertig  :P
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Sunny C. on August 17, 2009, 02:52:09 PM
Nicky,

hättest du auch gern solch ein Avatar? Rinaldos habe ich auch schon eines via Pn geschickt.

Zur Webseite:
:D, immer das gleiche ^^, aber keine Sorge. Dauert nicht mehr allzulang. Derweil bin ich ja auch daran das All-In-One Paket zu erstellen. Aber in Moment ist einfach meine Familie mir wichtiger.
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: bash-t on August 17, 2009, 05:28:50 PM
Fehler:

Quote
Parse error: syntax error, unexpected '}' in /www/htdocs/w00b2576/anitube/includes/page_header.php on line 359

//-----------------------------------------------------
//--- 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'];
  }
}*/
}

Die letzte Klammer stört wohl! (hier zeile 35) Wenn ich diese entferne, dann kann ich die Seite wieder betreten!

Du hast recht, es fehlte die auskommentierung der letzten schließenden geschweiften Klammer. Habe dies oben im Code berichtigt.

Nächste Problem: Detailsansicht.
Da wo eigentlich das Rateform sein sollte, sehe ich nur folgendes:
(http://s6.directupload.net/images/090816/uw4lxmlu.png)

Hmm, kannst Du mir mal bitte den umgebenden HTML Code der fertig gerenderten Seite posten? (Oder einen Link wo ich es mir ansehen kann?)
Es scheint mir so, als ob sich bei dir irgend ein sich öffnendes <input type="submit" Tag oder dergleichen noch versteckt.

Ich habe den Code eben 1:1 (bis auf ein paar fehlende Kommentare) in einer frischen Installation eingebaut:
http://www.pawlikonline.de/temp/4images/details.php?image_id=1

Dort funktioniert es einwandfrei.

Allerdings zickt der IE wohl noch rum, da er wohl mit dem einen von mir selbst definierten Attribut eines DIV-Tags nicht klar kommt. Das schaue ich mir heute Abend mal an.

Grüße,
Bash-T
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Sunny C. on August 17, 2009, 09:24:51 PM
Soweit hat die Installation nun geklappt, aber die Darstellung klappt nicht:
(http://s6.directupload.net/images/090817/wa7s2ed4.png)

details.html:
Code: [Select]
{header}
<!-----------------------------------------------------
//--- [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-->
<div id="content">
  <div id="sidebar">
    <div id="submenu">
      <h1>Lesezeichen</h1>
      <br />
      <ul>
        {clickstream}
      </ul>
    </div>
  </div>
  <div id="text">
    <h1>Videodetails</h1>
    <div id="modul">
      <div id="modul_portfolio">
        <table summary="text" border="0" cellpadding="0" cellspacing="0" width="100%">
          <tbody>
            <tr>
              <td align="left" width="50%"><p><b>{image_name}</b>{if cat_is_new}<span style="color:#093"> <sup>{lang_new}</sup></span>{endif cat_is_new}</p></td>
              <td align="right" width="50%"><p>{if prev_image_name}<a href="{prev_image_url}" title="{lang_prev_image} {prev_image_name}">«</a>&nbsp;{endif prev_image_name}{if next_image_name}<a title="{lang_next_image} {next_image_name}" href="{next_image_url}">»</a>{endif next_image_name}</p></td>
            </tr>
          </tbody>
        </table>
        <div class="show"> {image} <img src="http://demo.cms2day.de/includes/upload/echoimwald_1-show.jpg" alt="" style="display: none;" border="0">
          <div id="screen_navi"><a id="vollbild1" title="Echo im Wald | Mittwoch, 17. Juni 2009, 11:22 Uhr" rel="lytebox" href="http://demo.cms2day.de/includes/upload/echoimwald_1.jpg">{lightbox_button} {postcard_button}</a></div>
          <div id="portfolio_navi">{if admin_links}{admin_links}{endif admin_links}</div>
          <div align="center">{rate_form}</div>
          <span id="ajax_rating_count">{image_votes}</span> {lang_votes} | <span id="ajax_rating_rate">{image_rating}</span> {ajax_rating_points} </div>
        <h1>Informationen</h1>
        <p class="portfolio_headline">{image_name}</p>
        <table width="100%" border="0" cellpadding="3" cellspacing="0">
          <tr>
            <td valign="top" class="row2"><b>{lang_keywords}</b></td>
            <td valign="top" class="row2">{image_keywords}</td>
          </tr>
          <tr>
            <td valign="top" class="row1"><b>{lang_date}</b></td>
            <td valign="top" class="row1">{image_date}</td>
          </tr>
          <tr>
            <td valign="top" class="row2"><b>{lang_hits}</b></td>
            <td valign="top" class="row2">{image_hits}</td>
          </tr>
          <tr>
            <td valign="top" class="row2"><b>{lang_rating}</b></td>
            <td valign="top" class="row2">{image_rating} ({image_votes}
              {lang_votes})</td>
          </tr>
          <tr>
            <td valign="top" class="row1"><b>{lang_file_size}</b></td>
            <td valign="top" class="row1">{image_file_size}</td>
          </tr>
          <tr>
            <td valign="top" class="row2"><b>{lang_added_by}</b></td>
            <td valign="top" class="row2">{user_name_link}</td>
          </tr>
        </table>
        <p class="portfolio_headline">{lang_description}</p>
        {image_description} <br />
        <br />
        <p>
        <h1>Download</h1>
        </p>
        <p class="portfolio_headline">Einstellungen</p>
        Das Feature, um die Videos downloaden zu können, stammt von <a href="http://www.filsh.net" target="_blank">Filsh.net</a>. Hier habt ihr direkt die Möglichkeit das Video in dem Format <strong>*.mp4</strong> zu downloaden. Auf <a href="http://www.filsh.net" target="_blank">Filsh.net</a> gibt es allerdings noch mehr Möglichkeiten das Video optimal einzustellen.<br />
        Was <a href="http://www.filsh.net" target="_blank">Filsh.net</a> ist? Hier die Antwort: <strong><a href="http://www.filsh.net/howto/" class="float-right help" target="_blank">Anleitungsvideo</a></strong>
        <!-- Filsh.net Video Download -->
        <script type="text/javascript" src="http://www.filsh.net/static/javascript/environment.js"></script>
        <script type="text/javascript" src="http://www.filsh.net/static/javascript/jquery.js"></script>
        <script type="text/javascript">
var lang = {'accept_rules': 'Bitte akzeptiere die Nutzungsbedingungen von Filsh.net, um mit dem Download fortzufahren.'};
</script>
        <script type="text/javascript" src="http://www.filsh.net/static/javascript/jquery.ui.core.js"></script>
        <script type="text/javascript" src="http://www.filsh.net/static/javascript/jquery.ui.slider.js"></script>
        <script type="text/javascript" src="http://www.filsh.net/static/javascript/form.js"></script>
        <script type="text/javascript" src="http://www.filsh.net/static/javascript/startup.js"></script>
        <script type="text/javascript" src="http://www.filsh.net/static/javascript/AC_RunActiveContent.js"></script>
        <script type="text/javascript" src="http://www.filsh.net/static/javascript/swfobject.js"></script>
        <style type="text/css">
/* Slider styling */
.slider { width:250px; margin-top: 10px; }

.ui-slider { position: relative; text-align: left; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 12px; height: 18px; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; }

.ui-slider-horizontal { height: 1px; }
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

.ui-slider-vertical { width: .8em; height: 100px; }
.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.ui-slider-vertical .ui-slider-range-max { top: 0; }

.ui-widget { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1.1em/*{fsDefault}*/; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1em; }
.ui-widget-content { border: 1px solid #dedfe0/*{borderColorContent}*/; background-color: #ffffff/*{bgColorContent}*/; color: #222222/*{fcContent}*/; }
.ui-widget-content a { color: #222222/*{fcContent}*/; }
.ui-widget-header { border: 1px solid #aaaaaa/*{borderColorHeader}*/; background-color: #cccccc/*{bgColorHeader}*/ ; color: #222222/*{fcHeader}*/; font-weight: bold; }
.ui-widget-header a { color: #222222/*{fcHeader}*/; }

.ui-state-default, .ui-widget-content .ui-state-default { margin-top: -3px; border: none; /*{borderColorDefault}*/; background: #e6e6e6/*{bgColorDefault}*/ url(/static/images/slider.png)/*{bgImgUrlDefault}*/ 0/*{bgDefaultXPos}*/ 50%/*{bgDefaultYPos}*/ repeat-x/*{bgDefaultRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #555555/*{fcDefault}*/; outline: none; cursor: pointer; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555/*{fcDefault}*/; text-decoration: none; outline: none; }

.sidebar-entry {
width: 220px;
padding: 10px;
padding-right: 15px;
background-image: url('http://www.filsh.net/static/images/sidebar-background.png');
background-repeat: repeat-x;
background-position: bottom center;
border-top: 2px solid #e9e9ea;
font: normal 14px 'Myriad Pro',helvetica,arial,sans-serif;
color: #878787;
padding-bottom: 20px;
margin-bottom: 20px;
}

.sidebar-entry h3 {
font: normal 18px 'Myriad Pro',helvetica,arial,sans-serif;
color: #4c4b4b;
}

</style>
        <div class="content">
          <div class="clearfix">
            <div class="main-left">
              <form action="http://www.filsh.net/process/" method="post" onsubmit="return checkRules();" target="_blank">
                <div class="step-image step-1"></div>
                <div class="step-content">
                  <input name="url" value="http://www.{url}" class="styled-input" type="hidden">
                </div>
                <div class="step-content" id="options-container">
                  <div class="option" id="format">
                    <div class="option-label" style="color:#5C8CD8"><strong>Format:</strong></div>
                    <div class="option-form">
                      <select name="format" onchange="showOptionsForFormat(this.value)">
                        <option value="mp4" selected="selected">&nbsp;&nbsp;.MP4 (MPEG4 + AAC, iTunes/iPod/iPhone/PSP)</option>
                        <option value="none">(Keine Umwandlung)</option>
                      </select>
                    </div>
                  </div>
                  <!-- /option[format] -->
                  <input name="volume" id="volume-input" value="0" type="hidden">
                  <div class="option" id="volume">
                    <div class="option-label" style="color:#5C8CD8"><strong>Lautstärke:</strong></div>
                    <div class="option-form">
                      <div id="slider-volume" class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><a style="left: 50%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div>
                    </div>
                    <div class="option-value" id="volume-value">0%</div>
                  </div>
                  <!-- /option[volume] -->
                  <input name="audiobit" id="audiobit-input" value="128" type="hidden">
                  <div class="option" id="audiobit">
                    <div class="option-label" style="color:#5C8CD8"><strong>Audio-Bitrate:</strong></div>
                    <div class="option-form">
                      <div id="slider-audiobit" class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><a style="left: 33.3333%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div>
                    </div>
                    <div class="option-value" id="audiobit-value">128 kbit/s</div>
                  </div>
                  <!-- /option[audiobit] -->
                  <input name="videobit" id="videobit-input" value="192" type="hidden">
                  <div class="option" id="videobit">
                    <div class="option-label" style="color:#5C8CD8"><strong>Video-Bitrate:</strong></div>
                    <div class="option-form">
                      <div id="slider-videobit" class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><a style="left: 13.3333%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div>
                    </div>
                    <div class="option-value" id="videobit-value">192 kbit/s</div>
                  </div>
                  <!-- /option[videobit] -->
                  <div class="option" id="dimensions">
                    <div class="option-label" style="color:#5C8CD8"><strong>Auflösung:</strong></div>
                    <div class="option-form">
                      <select name="dimensions">
                        <option value="none" selected="selected">(Original)</option>
                        <option value="128x96">128x96</option>
                        <option value="176x144">176x144</option>
                        <option value="220x176">220x176</option>
                        <option value="320x240">320x240</option>
                        <option value="480x320">480x320</option>
                      </select>
                    </div>
                  </div>
                  <!-- /option[timespan] -->
                  <div class="option" id="timespan">
                    <div class="option-label" style="color:#5C8CD8"><strong>Zeitspanne:</strong></div>
                    <div class="option-form"> von
                      <input name="timespan-start" value="00:00:00" id="timespan-start" size="8" maxlength="8" class="light" disabled="true" type="text">
                      &nbsp;&nbsp;&nbsp;
                      <input name="timespan-from-start" checked="checked" id="timespan-from-start" onchange="toggleEnabled('timespan-start','timespan-from-start')" type="checkbox">
                      <strong>Anfang</strong>&nbsp;&nbsp;&nbsp;bis
                      <input name="timespan-end" value="99:99:99" id="timespan-end" size="8" maxlength="8" class="light" disabled="true" type="text">
                      &nbsp;&nbsp;&nbsp;
                      <input name="timespan-to-end" checked="checked" id="timespan-to-end" onchange="toggleEnabled('timespan-end','timespan-to-end')" type="checkbox">
                      <strong>Ende</strong> </div>
                  </div>
                  <!-- /option[timespan] -->
                </div>
                <div class="rules-container">
                  <div class="rules float-right"> <span class="rules_text"><a onclick="toggleRules()">Ja, ich stimme den </a><a href="http://www.filsh.net/termsofuse" target="_blank">Nutzungsbedingungen</a> von <a href="http://www.filsh.net" target="_blank">Filsh.net</a> zu.</span>
                    <input name="rules_accepted" id="rules_accepted" type="checkbox">
                  </div>
                </div>
                <div class="submit-button float-right"> <span class="button">
                  <input name="submit" value="{image_name} Downloaden" type="submit">
                  </span> </div>
              </form>
            </div>
          </div>
          <!-- Filsh.net Video Download -->
        </div>
      </div>
    </div>
  </div>
</div>
{footer}

Ich weis nicht woran das liegt!
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: bash-t on August 17, 2009, 09:36:59 PM
Update:
Für den IE Javascript Bug habe ich die ajaxrating.js aus der Zip angepasst!
Falls jemand nicht die gesamte Zip herunterladen möchte, hier die Anpassungen:
scripts/ajaxrating.js
Locate:
Code: [Select]
failure:handleFailure,
replace with:
Code: [Select]
failure:handleFailure
Locate:
Code: [Select]
targetForm = YAHOO.util.Dom.get('ajax_rate_form');
Since the YUI has a bug while getting the form element, if an input field inside this form is named "id" (for further information read this: http://tinyurl.com/lqmtwy )
replace with:
Code: [Select]
targetForm = document.getElementById('ajax_rate_form');

Damit wären die JS Fehler behoben!
Allerdings gibt es im IE noch einen CSS-Bug :( und vielleicht kann mir jemand von Euch weiterhelfen...
Siehe folgenden Screenshot:
(http://www.250kb.de/u/090817/j/20de2a85.jpg)

Wie man an der Wertung unten erkennt, sollten 2,81 Sterne ausgefüllt sein. Leider fangen die roten Sterne erst bei dem Wert 2,81 an...
Im Firefox & Co. wird die CSS korrekt interpretiert.
Hier einmal die dafür verwendeten CSS Properties und das HTML Snippet:
Es handelt sich dabei um das LI-Element, welches mit roten Sternen dargestellt auf dem UL-Element (welches die blauen Sterne darstellt) geklebt ist. Im IE ist die Position des LI Elements aus irgend einer Weise verschoben...
Code: [Select]
#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; FONT-SIZE: 1px; }
#star div.user { LEFT: 15px; POSITION: relative; FLOAT: left; FONT-SIZE: 11px; FONT-FAMILY: Arial; COLOR: #717E7D; }

Code: [Select]
<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>

Wenn jemand eine Idee hat, nur raus damit :)


SOLVED!
Es ich habe dem #star li.curr ein left 0px; spendiert und schon hat der IE auch keine Anzeigeprobleme!

Grüße,
Bash-T
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Sunny C. on August 18, 2009, 02:59:51 PM
Saubere Arbeit.
Danke für deine Tolle Hilfe und für die Super Mod.
Habs in meiner Liste aufgenommen:
http://www.4homepages.de/forum/index.php?topic=24888.0
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: bash-t on August 18, 2009, 03:53:01 PM
Ich habe eine Lösung für den IE CSS Bug aus dem vorletzten Post!

Eingebaut ist dieser ganz oben bereits in Schritt 7.

Jeder, der den Fix nachträglich einbauen möchte, hier die Änderung:

Open templates/(your_template)/style.css

Locate:
Code: [Select]
#star li.curr { BACKGROUND: url('images/stars.gif') left 25px; FONT-SIZE: 1px; }
Replace with:
Code: [Select]
#star li.curr { BACKGROUND: url('images/stars.gif') left 25px; left:0px; FONT-SIZE: 1px; }
Grüße,
Bash-T
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: mawenzi on August 18, 2009, 06:15:04 PM
... das sieht nun sehr gut und auch fehlerlos auf der Demoseite aus ...
... die erfolgreiche Installation nach der MOD-Beschreibung hat zwar noch keiner gemeldet, aber trotzdem ...
... MOD verschoben nach Mods & Plugins (Releases & Support) ...

... danke Bash-T für die top Arbeit und das Veröffentlichen hier im Forum ...
... denke bitte noch daran, den MOD im ersten Post immer auf dem aktuellen Stand zu halten ...
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Sunny C. on August 18, 2009, 06:36:24 PM
@ Bash-T,
klasse Arbeit :D!!!!!!

@ mawenzi,
im Prinzip wurde bestätigt das die Modifikation läuft:
Saubere Arbeit.
Danke für deine Tolle Hilfe und für die Super Mod.
Habs in meiner Liste aufgenommen:
http://www.4homepages.de/forum/index.php?topic=24888.0

Ich hatte ein Fehler gemacht! Die Modifikation läuft und auch sehr stabil!
Darum habe ich es in meiner Liste aufgenommen, da sich dort nur getestete Modifikationen befinden!
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: waynenort on August 22, 2009, 02:17:04 PM
Nice one Bash-T.  :D

Great job.  I've given your mod a 5 star rating  :wink:

Cheers, Wayne
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: bash-t on August 29, 2009, 09:51:59 AM
I made an enhancement by request of "eeyipes" for my Ajax Star Rating Mod.

With the instructions described here: http://www.4homepages.de/forum/index.php?topic=25666.msg140435#msg140435 you will be able to have starRating-Elements not even on the details page, but on the categories and index page aswell.

Soon I will release a version 1.1 and put the changes onto the 1st post of this thread, but until then, please stick to the instructions in the given link.

Regards,
Bash-T
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Sunny C. on September 24, 2009, 03:59:18 PM
Hi,

ist es auch möglich eventuell ein Rating Script zu schreiben, was auf dem Fishey-Menü aufbaut?
http://demos.dojotoolkit.org/demos/fisheye/

Das wäre ja mal was richtig geiles!
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: fermachado on September 25, 2009, 10:11:12 AM
Hi,

Can help me!

How to make to a user can only vote if make a comment?

Thanks and sorry the english.
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: bash-t on September 25, 2009, 01:34:55 PM
Hi,

ist es auch möglich eventuell ein Rating Script zu schreiben, was auf dem Fishey-Menü aufbaut?
http://demos.dojotoolkit.org/demos/fisheye/

Das wäre ja mal was richtig geiles!

Hallo!

Das ist mit Sicherheit möglich, allerdings verwendet das Fisheye Menü das Dojo-Toolkit. Diese Javascript API ist mir gänzlich unbekannt, weswegen sich dies jemand anschauen müsste, der sich damit auskennt ;)

Grüße
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Rembrandt on September 25, 2009, 01:52:13 PM
...
Hallo!

Das ist mit Sicherheit möglich, allerdings verwendet das Fisheye Menü das Dojo-Toolkit. Diese Javascript API ist mir gänzlich unbekannt, weswegen sich dies jemand anschauen müsste, der sich damit auskennt ;)

Grüße

unter den namen fisheye war mir das gänzlich unbekannt, man findet diese javascripts eher unter den bekannten namen "Mac style menu"oder "mac style menu flash".
@bash-t, wenn dú vielleicht mal zeit dazu und lust hättest?  :mrgreen:
meine wünsche dazu: vertical und horizontal, den bogen in grad einstellbar, oder zumindest nach oben, mitte und unten, analog bei der verticalen version.  :D

mfg Andi
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: bash-t on October 12, 2009, 10:52:37 AM
Hallo zusammen!

@Andy: Wie Du anhand meiner Reaktionszeit feststellen kannst habe ich leider momentan keine Zeit dazu, Deinen Wünschen bzgl. des Mac-Style Menues nachzukommen :-/

Ich habe beruflich viel mit der YUI zu tun, weswegen ich diese auch für das hier gezeigte Ajax Star Rating verwendet habe.

Die Dojo-API ist mir allerdings gänzlich unbekannt. Daher, und aus dem Grund, dass ich zur Zeit kaum Freizeit habe - um mich da rein zu arbeiten - meinte ich: Falls sich jemand mit dem Dojo-Toolkit auskennt, dann kann derjenige gerne das MOD hier als Grundlage nehmen :-)

Viele Grüße und bis bald,
Bash-T
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: winracer on November 20, 2009, 03:42:32 PM
here is the english translate

Code: [Select]
//-----------------------------------------------------
//--- [MOD] Ajax Star Rating --------------by Bash-T---
//START------------------------------------------------
$lang['ajax_rating_labels'] = array (
0 => "Not Yet Rated",
1 => "desolation",
2 => "Nothing special",
3 => "Worth",
4 => "Real cool",
5 => "Excellent!"
);
$lang['ajax_rating_messages'] = array (
0 => "vote invalid", //voting_error
1 => "Thank you for your vote!", // voting_success
2 => "You have already rated this image.", //already_voted
3 => "Some ratings are disabled for this image."
);
$lang['ajax_rating_points'] = "Score";
//-----------------------------------------------------
//--- [MOD] Ajax Star Rating --------------by Bash-T---
//--------------------------------------------------END
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Habi86 on November 20, 2009, 06:47:02 PM
HI  :D

Der Mod ist einsame klasse  :!: :!: :!:
Hab mich total darüber gefreut und gleich den alten gelöscht  :roll:
Funktionierte auch gleich auf anhieb ^_^  :)

Nur eine kleine Frage ^^
Da ist doch was falsch oder x_x bei der Demo hab ich auch geguckt

Hab ich was überlesen?

Angezeigt werden 4 rote Sterne obwohl es 5.00 Punkte sind ?_? da sollten doch auch 5 rote Sterne angezeigt werden - oder nicht?

Kann das jemand einem Noob erklären bitte  :lol:


Liebe Grüße & weiter so  :!:
Habi
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: winracer on November 20, 2009, 07:09:04 PM
HI  :D

Der Mod ist einsame klasse  :!: :!: :!:
Hab mich total darüber gefreut und gleich den alten gelöscht  :roll:
Funktionierte auch gleich auf anhieb ^_^  :)

Nur eine kleine Frage ^^
Da ist doch was falsch oder x_x bei der Demo hab ich auch geguckt

Hab ich was überlesen?

Angezeigt werden 4 rote Sterne obwohl es 5.00 Punkte sind ?_? da sollten doch auch 5 rote Sterne angezeigt werden - oder nicht?

Kann das jemand einem Noob erklären bitte  :lol:


Liebe Grüße & weiter so  :!:
Habi





I had same trouble on found out that I had this code below on more then just the details.html page. I also had it in the header.html. page the home.html and the catrgories page. check al them and see if it is in more then one place
Code: [Select]
<!-- ----------------------------------------------- -->
<!-- [MOD] Ajax Star Rating -------------- by Bash-T -->
<!-- START ----------------------------------------- -->
<script type="text/javascript">
YAHOO.namespace('rating');
YAHOO.rating.star={
display_percentage : true, //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 ----------------------------------------- -->

the only trouble i am having is  that if not login then beside the stars will display "Some ratings are disabled for this image."
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: bash-t on November 20, 2009, 08:07:03 PM
HI  :D

Der Mod ist einsame klasse  :!: :!: :!:
Hab mich total darüber gefreut und gleich den alten gelöscht  :roll:
Funktionierte auch gleich auf anhieb ^_^  :)

Nur eine kleine Frage ^^
Da ist doch was falsch oder x_x bei der Demo hab ich auch geguckt

Hab ich was überlesen?

Angezeigt werden 4 rote Sterne obwohl es 5.00 Punkte sind ?_? da sollten doch auch 5 rote Sterne angezeigt werden - oder nicht?

Kann das jemand einem Noob erklären bitte  :lol:


Liebe Grüße & weiter so  :!:
Habi

Hallo,

ich gebe zu es in in Deinem Beispiel etwas irritierend. Der Grund ist, dass die Punktanzeige Dezimalwerte sind, die mit mindestens 1,0 beginnen.
Am deutlichsten wird es mit einem Beispiel:
- Füllst Du den ersten Stern halb auf, so steht dort 1,5 Punkte, obwohl eigentlich nur ein halber Stern ausgefüllt ist.
- In Deinem Beispiel sind sind genau 4 Sterne voll, also fängt der 5. Stern sich gerade an zu füllen - also steht dort eine 5,0.
- Der höchste Wert, der demnach jemals erreicht werden kann sind 5 gefüllte Sterne. Das entspricht einem Wert von 5,99.


Ich hoffe das war nun verständlich :)

Viele Grüße,
Bash-T
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Habi86 on November 20, 2009, 08:14:02 PM
Hallo,

ich gebe zu es in in Deinem Beispiel etwas irritierend. Der Grund ist, dass die Punktanzeige Dezimalwerte sind, die mit mindestens 1,0 beginnen.
Am deutlichsten wird es mit einem Beispiel:
- Füllst Du den ersten Stern halb auf, so steht dort 1,5 Punkte, obwohl eigentlich nur ein halber Stern ausgefüllt ist.
- In Deinem Beispiel sind sind genau 4 Sterne voll, also fängt der 5. Stern sich gerade an zu füllen - also steht dort eine 5,0.
- Der höchste Wert, der demnach jemals erreicht werden kann sind 5 gefüllte Sterne. Das entspricht einem Wert von 5,99.


Ich hoffe das war nun verständlich :)

Viele Grüße,
Bash-T

Achsoooooo ist das aufgebaut - klar halben stern gibts ja nicht - na hoffentlich haben meine mitglieder eine ruhige hand um 5,99 zu werten  :lol:
Ich glaub am Best ich erkläre das dann auch auf meiner Hauptseite ^_^

Danke für die schnelle Antwort und *spamhug* für den tollen Mod den du gezaubert hast :)


@winracer thanks for your answer too ^_^ sry cant help you with your problem =/ maybe you set the rights wrong in ACP for guests?


Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: tirakle on January 24, 2010, 12:25:40 PM
langsam macht sich bei mir die verzweiflung breit.
habe den mod nun x-mal installiert und bin mir sicher, dass alles passt. ich habe aber immer das selbe problem:

die sterne werden blau angezeigt. wenn ich mit dem coursor darüber fahre verändern sie auch die farbe. ein text wie z.b. "noch nicht bewertet" wird allerdings nicht angezeigt. außerdem kann ich nicht speichern bzw. bewerten. es bleibt immer beo 0 Stimmen und 0 Punkt.

an was kann das liegen ?

ich nutzt 1.7.7. und habe das script in einem unterverzeichnis am laufen.

weiß jemand rat ?
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Marcovich on January 28, 2010, 05:55:58 PM
I have problem, please help me!
2 scripts does not working together for some reason, i'll exaplain.
I have menu and rating with javascript (Menu of downloads & Share & details- see picture).

I try to find the good place to put each code that both will work, but i dont know how..

Picture 1: Menu is not working

(http://img704.imageshack.us/img704/7652/screenrjs.jpg)

here the code:
Code: [Select]
<head>

<title>{image_name} High Definition Wallpaper, HD Wallpaper</title>


<META NAME="Description" CONTENT="{image_name} High Definition Wallpaper, click now and find more High Definition Wallpapers of {image_name} and much more">


<base href="http://www.backgroundscity.net">

<link rel="shortcut icon" href="{template_url}/images/icon1.ico">


<script src="/stats/?js" type="text/javascript"></script>

<meta http-equiv="content-type" content="text/html; charset={charset}" />

<script src="http://cdn.gigya.com/wildfire/js/wfapiv2.js"></script>

<script type="text/javascript">

function highlight(field) {
        field.focus();
        field.select();
}
</script>


<link type="text/css" href="{template_url}/css/flick/jquery-ui-1.7.2.custom.css" rel="stylesheet" />



<script type="text/javascript" src="{template_url}/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="{template_url}/js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(function(){


// Tabs
$('#tabs').tabs();



//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);

});
</script>


<style type="text/css">
/*demo page css*/
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
</style>





<link rel="stylesheet" href="{template_url}/style.css" />

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

<!-----------------------------------------------------
//--- [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 : {image_id},
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-->

{if has_rss}

<link rel="alternate" type="application/rss+xml" title="{rss_title}" href="{rss_url}" />

{endif has_rss}

</head>

Picture 2: Rating star isnt working ([COLOR="RoyalBlue"]see online:[/COLOR] http://www.backgroundscity.net/lions_112/lion-closeup-by-ng-25433.htm (http://"http://www.backgroundscity.net/lions_112/lion-closeup-by-ng-25433.htm"))

[SIZE="5"]you can see the stars but they arent working![/SIZE]

(http://img63.imageshack.us/img63/3880/screen2jav.jpg)

Code: [Select]
<head>

<title>{image_name} High Definition Wallpaper, HD Wallpaper</title>


<META NAME="Description" CONTENT="{image_name} High Definition Wallpaper, click now and find more High Definition Wallpapers of {image_name} and much more">


<base href="http://www.backgroundscity.net">

<link rel="shortcut icon" href="{template_url}/images/icon1.ico">


<script src="/stats/?js" type="text/javascript"></script>

<meta http-equiv="content-type" content="text/html; charset={charset}" />

<script src="http://cdn.gigya.com/wildfire/js/wfapiv2.js"></script>

<script type="text/javascript">

function highlight(field) {
        field.focus();
        field.select();
}
</script>


<link type="text/css" href="{template_url}/css/flick/jquery-ui-1.7.2.custom.css" rel="stylesheet" />

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

<!-----------------------------------------------------
//--- [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 : {image_id},
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-->


<script type="text/javascript" src="{template_url}/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="{template_url}/js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(function(){


// Tabs
$('#tabs').tabs();



//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);

});
</script>


<style type="text/css">
/*demo page css*/
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
</style>





<link rel="stylesheet" href="{template_url}/style.css" />


{if has_rss}

<link rel="alternate" type="application/rss+xml" title="{rss_title}" href="{rss_url}" />

{endif has_rss}

</head>

Please, help!?
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: coloresonline on February 20, 2010, 11:15:49 PM
I have this mod working perfectly in Firefox and Chrome,.. but i have problems in IE8. I thinks it doesn´t load js libraries. (I hate ie8.)

The problem is that stars are not working..are fixed with the last vote.

Can anyone tell me where can be the solution? Specially to load js in internet exploreer correctly,. It gives a lot of problems.

Thanks in advance.

D.
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: diehard on February 22, 2010, 01:03:34 PM
And my stars not working on IE  :? I update to ajaxrating.js v1.1 but nothing happened ....
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: exceLLency on February 27, 2010, 12:17:26 AM
Not working a Internet explorer :(
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: coloresonline on March 01, 2010, 07:16:32 PM
Please, any solution to fix this???
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: dp on March 18, 2010, 02:47:01 PM
Thanx very much for sharing this!
Works perfectly, both with Firefox 3.6 and IE 8.
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: coloresonline on March 22, 2010, 06:43:34 PM
Can you say if you did something to work correctly on IE8, because to me it doesn´t works on IE8.
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Sunny C. on April 23, 2010, 10:07:17 AM
Ist es denn eigentlich möglich, dass man in einzelnen Templates extra bewerten kann?
z.B ich lege eine seite an index.php?template=xtra-image
Ist es möglich auch dort zu bewerten?
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: coloresonline on June 02, 2010, 01:00:00 AM
Can someone give a solution for this solution to works properly on IE8.
Thanks in advance...
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Sunny C. on June 05, 2010, 07:26:18 PM
Ich habe ein Problem mit dem Javascript von hier und dem Tooltip Javascript welches ich verwende, beides zusammen funktioniert nicht.

Tooltip-Javascript
/*
Script: TipsX3.js
Tooltips, BubbleTips, whatever they are, they will appear on mouseover

License:
MIT-style license.

Credits:
The idea behind Tips.js is based on Bubble Tooltips (<http://web-graphics.com/mtarchive/001717.php>) by Alessandro Fulcitiniti <http://web-graphics.com>
TipsX3.js is based on Tips.js, with slight modifications, by razvan@e-magine.ro
*/

/*
Class: TipsX3
Display a tip on any element with a title and/or href.

Note:
Tips requires an XHTML doctype.

Arguments:
elements - a collection of elements to apply the tooltips to on mouseover.
options - an object. See options Below.

Options:
maxTitleChars - the maximum number of characters to display in the title of the tip. defaults to 30.

onShow - optionally you can alter the default onShow behaviour with this option (like displaying a fade in effect);
onHide - optionally you can alter the default onHide behaviour with this option (like displaying a fade out effect);

showDelay - the delay the onShow method is called. (defaults to 100 ms)
hideDelay - the delay the onHide method is called. (defaults to 100 ms)

className - the prefix for your tooltip classNames. defaults to 'tool'.

the whole tooltip will have as classname: tool-tip

the title will have as classname: tool-title

the text will have as classname: tool-text

offsets - the distance of your tooltip from the mouse. an Object with x/y properties.
fixed - if set to true, the toolTip will not follow the mouse.

loadingText - text to display as a title while loading an AJAX tooltip.

errTitle, errText - text to display when there's a problem with the AJAX request.

Example:
(start code)
<img src="/images/i.png" title="The body of the tooltip is stored in the title" class="toolTipImg"/>
<script>
var myTips = new Tips($$('.toolTipImg'), {
maxTitleChars: 50 //I like my captions a little long
});
</script>
(end)

Note:
The title of the element will always be used as the tooltip body. If you put :: on your title, the text before :: will become the tooltip title.
If you put DOM:someElementID in your title, $('someElementID').innerHTML will be used as your tooltip contents (same syntax as above).
If you put AJAX:http://www.example.com/path/to/ajax_file.php in your title, the response text will be used as tooltip contents (same syntax as above). Either absolute or relative paths are ok.
*/

var TipsX3 = new Class({

options: { // modded for X3
onShow: function(tip){
tip.setStyle('visibility', 'visible');
},
onHide: function(tip){
tip.setStyle('visibility', 'hidden');
},
maxTitleChars: 30,
showDelay: 100,
hideDelay: 100,
className: 'tool',
offsets: {'x': 16, 'y': 16},
fixed: false,
loadingText: 'Loading...',
errTitle: 'Oops..',
errText: 'There was a problem retrieving the tooltip.'
},

initialize: function(elements, options){
this.setOptions(options);
this.toolTip = new Element('div', {
'class': this.options.className + '-tip',
'styles': {
'position': 'absolute',
'top': '0',
'left': '0',
'visibility': 'hidden'
}
}).inject(document.body);
this.wrapper = new Element('div').inject(this.toolTip);
$$(elements).each(this.build, this);
if (this.options.initialize) this.options.initialize.call(this);
},

build: function(el){ // modded for X3
el.$tmp.myTitle = (el.href && el.getTag() == 'a') ? el.href.replace('http://', '') : (el.rel || false);
if (el.title){

// check if we need to extract contents from a DOM element
if (el.title.test('^DOM:', 'i')) {
el.title = $(el.title.split(':')[1].trim()).innerHTML;
}

// check for an URL to retrieve content from
if (el.title.test('^AJAX:', 'i')) {
el.title = this.options.loadingText + '::' + el.title;
}

var dual = el.title.split('::');
if (dual.length > 1) {
el.$tmp.myTitle = dual[0].trim();
el.$tmp.myText = dual[1].trim();
} else {
el.$tmp.myText = el.title;
}

el.removeAttribute('title');
} else {
el.$tmp.myText = false;
}
if (el.$tmp.myTitle && el.$tmp.myTitle.length > this.options.maxTitleChars) el.$tmp.myTitle = el.$tmp.myTitle.substr(0, this.options.maxTitleChars - 1) + "&hellip;";
el.addEvent('mouseenter', function(event){
this.start(el);
if (!this.options.fixed) this.locate(event);
else this.position(el);
}.bind(this));
if (!this.options.fixed) el.addEvent('mousemove', this.locate.bindWithEvent(this));
var end = this.end.bind(this);
el.addEvent('mouseleave', end);
el.addEvent('trash', end);
},

start: function(el){ // modded for X3
this.wrapper.empty();

// check if we have an AJAX request - if so, show a loading animation and launch the request
if (el.$tmp.myText && el.$tmp.myText.test('^AJAX:', 'i')) {
//if (this.ajax) this.ajax.cancel();
this.ajax = new Ajax (el.$tmp.myText.replace(/AJAX:/i,''), {
onComplete: function (responseText, responseXML) {
el.title = responseText;
this.build(el);
this.start(el);
}.bind(this),
onFailure: function () {
el.title = this.options.errTitle + '::' + this.options.errText;
this.build(el);
this.start(el);
}.bind(this),
method: 'get'
}).request();
el.$tmp.myText = '<div class="' + this.options.className + '-loading">&nbsp;</div>';
}

if (el.$tmp.myTitle){
this.title = new Element('span').inject(
new Element('div', {'class': this.options.className + '-title'}).inject(this.wrapper)
).setHTML(el.$tmp.myTitle);
}
if (el.$tmp.myText){
this.text = new Element('span').inject(
new Element('div', {'class': this.options.className + '-text'}).inject(this.wrapper)
).setHTML(el.$tmp.myText);
}
$clear(this.timer);
this.timer = this.show.delay(this.options.showDelay, this);
},

end: function(event){
$clear(this.timer);
this.timer = this.hide.delay(this.options.hideDelay, this);
},

position: function(element){
var pos = element.getPosition();
this.toolTip.setStyles({
'left': pos.x + this.options.offsets.x,
'top': pos.y + this.options.offsets.y
});
},

locate: function(event){
var win = {'x': window.getWidth(), 'y': window.getHeight()};
var scroll = {'x': window.getScrollLeft(), 'y': window.getScrollTop()};
var tip = {'x': this.toolTip.offsetWidth, 'y': this.toolTip.offsetHeight};
var prop = {'x': 'left', 'y': 'top'};
for (var z in prop){
var pos = event.page[z] + this.options.offsets[z];
if ((pos + tip[z] - scroll[z]) > win[z]) pos = event.page[z] - this.options.offsets[z] - tip[z];
this.toolTip.setStyle(prop[z], pos);
};
},

show: function(){
if (this.options.timeout) this.timer = this.hide.delay(this.options.timeout, this);
this.fireEvent('onShow', [this.toolTip]);
},

hide: function(){
this.fireEvent('onHide', [this.toolTip]);
}

});

TipsX3.implement(new Events, new Options);

ajaxrating.js
//-----------------------------------------------------
//--- [MOD] Ajax Star Rating --------------by Bash-T---
//-----------------------------------------------------
function submitRatingRequest(frm) {
var ajax_rating_rate = YAHOO.util.Dom.get('ajax_rating_rate');
var ajax_rating_count = YAHOO.util.Dom.get('ajax_rating_count');
var rating_msg = YAHOO.util.Dom.get('star_rating_msg');
var rating_value = YAHOO.util.Dom.get('starCur0');
var stars = YAHOO.util.Dom.get('star0');

var handleSuccess = function(o){
if(o.responseText !== undefined){
var response = YAHOO.lang.JSON.parse(o.responseText);
var rating = parseFloat(response.Result.rating);
rating_msg.innerHTML = YAHOO.rating.star.msgs[response.Result.msgKey];
rating_value.title = rating;
YAHOO.rating.star.revert();

ajax_rating_count.innerHTML = response.Result.votes;
ajax_rating_rate.innerHTML = rating;
if(response.Result.successfully_voted == 1)
{
YAHOO.rating.star.successfully_voted = true;
YAHOO.util.Dom.setStyle(stars , "cursor" , "default" );
}
}
};

var handleFailure = function(o){
};

var callback = {
  success:handleSuccess,
  failure:handleFailure
};

YAHOO.util.Connect.setForm(frm);
YAHOO.util.Connect.asyncRequest("POST", "ajaxrating.php", callback);
}


function $(v,o) { return((typeof(o)=='object'?o:document).getElementById(v)); }
function $S(o) { return((typeof(o)=='object'?o:$(o)).style); }
function agent(v) { return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); }
function abPos(o) { var o=(typeof(o)=='object'?o:$(o)), z={X:0,Y:0}; while(o!=null) { z.X+=o.offsetLeft; z.Y+=o.offsetTop; o=o.offsetParent; }; return(z); }
function XY(e,v) { var o=agent('msie')?{'X':event.clientX+document.body.scrollLeft,'Y':event.clientY+document.body.scrollTop}:{'X':e.pageX,'Y':e.pageY}; return(v?o[v]:o); }


YAHOO.rating.star.mouse=function(e,o) {
if((YAHOO.rating.star.stop || isNaN(YAHOO.rating.star.stop))
&& !YAHOO.rating.star.successfully_voted) {
YAHOO.rating.star.stop=0;
document.onmousemove=function(e) {
var n=YAHOO.rating.star.num;
var pos=abPos($('star'+n)),
x=XY(e),
oX=x.X-pos.X,
oY=x.Y-pos.Y;
YAHOO.rating.star.num=o.id.substr(4);

if(oX<1 || oX>84 || oY<0 || oY>19) {
YAHOO.rating.star.stop=1; YAHOO.rating.star.revert();
}

else {
$S('starCur'+n).width=oX+'px';
$S('starUser'+n).color='#111';
var p = Math.round(oX/84*100); //percent
YAHOO.util.Dom.setAttribute($('starUser'+n), "percent", p);

if(YAHOO.rating.star.display_percentage) {
$('starUser'+n).innerHTML=percent+'%';
}

if(YAHOO.rating.star.display_lables) {
var l = YAHOO.rating.star.labels;
YAHOO.util.Dom.get('star_rating_label').innerHTML = (p>=1&&p<=20)?l[1]:(p>=21&&p<=40)?l[2]:(p>=41&&p<=60)?l[3]:(p>=61&&p<=80)?l[4]:(p>=81&&p<=100)?l[5]:'';
}
}
};
}
};

YAHOO.rating.star.update=function(e,o) {
if(!YAHOO.rating.star.successfully_voted)
{
var n=YAHOO.rating.star.num,
v=parseInt(YAHOO.util.Dom.getAttribute($('starUser'+n), "percent"));
n=o.id.substr(4);
targetForm = document.getElementById('ajax_rate_form');
factor = parseFloat('0.05');
rating = 1+v*factor-factor;
targetForm.rating.value = rating;
submitRatingRequest(targetForm);
}
};

YAHOO.rating.star.revert=function() {
var n=YAHOO.rating.star.num,
v=parseFloat($('starCur'+n).title);
factor = parseFloat('0.05');
percent = (v>0)? (v+factor-1)/factor : 0;

$S('starCur'+n).width=Math.round(percent*84/100)+'px';
if(YAHOO.rating.star.display_percentage) {
$('starUser'+n).innerHTML=(percent>0?Math.round(percent)+'%':'');
}
$('starUser'+n).percent=(percent>0?Math.round(percent):'');
$('starUser'+n).style.color='#888';

if(YAHOO.rating.star.display_lables) {
YAHOO.util.Dom.get('star_rating_label').innerHTML=(percent==0)?YAHOO.rating.star.labels[0]:'';
}

document.onmousemove='';
};

YAHOO.util.Event.onDOMReady(function() {
YAHOO.rating.star.revert();
});



bash-t, kannst du das irgendwie abgleichen? Ich bekomme es nicht hin!
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Sunny C. on June 08, 2010, 10:36:44 AM
Keiner eine Idee?
Ich weis nicht was ich umändern muss damit es harmoniert
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Saschilys on June 22, 2010, 06:57:02 PM
Keiner eine Idee?
Ich weis nicht was ich umändern muss damit es harmoniert

Ich habe auch das Problem, das diese JS sich mit einem meiner anderen Js´s nicht verträgt.
Wie ich haber heirim Forum gesehen habe, scheint es noch jemand zu geben, der das Problem hat http://www.4homepages.de/forum/index.php?topic=26728.0
Eine Lösung würde mir auch gefallen
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: weili61 on August 27, 2010, 01:36:02 PM
Why not run in the 1.7.8 version?
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: x23piracy on October 23, 2010, 06:47:15 PM
Hi,

has anybody running that MOD under 1.7.8?
any other code changes made exhaust the first post?


Greetz X23
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Nosferatu on December 11, 2010, 02:10:19 PM
läuft der mod in 1.7.9 ??? möchte nicht umbedingt ewig installieren und dann funkt er nicht ...
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: x23piracy on December 11, 2010, 02:14:35 PM
Hi,

bei meinen Versuchen mit 1.7.8 und 1.7.9 und Iceberg Template gabs
immer irgendeinen css Stress, technisch funktioniert der MOD aber es
ist durchaus möglich das es aktuell in jedem Template das Problem gibt.

Ich hab mal versucht den Fehler zu finden und zu beheben aber erfolglos,
habe dann irgendwann aufgegeben.

Außerdem zickt das yahoo script evtl. mit einem deiner bestehenden js.


Gruß Jens
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Nosferatu on December 11, 2010, 02:39:09 PM
hi,

also ich habs jetzt doch installiert ;)

es lauft bei mir 1.7.9 ohne probleme ich verwende das "default_full" template

Beispiel:
http://www.pj-firepower.com/picgallerie/details.php?image_id=9614

das einzige was ich nicht schaffe ist, die sterne zu zentrieren oder so die bleiben immer Linksbündig ... hab schon einiges rumprobiert

aber im prinzip laufts perfekt
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: x23piracy on December 11, 2010, 02:59:41 PM
Hi,

das einzige was ich nicht schaffe ist, die sterne zu zentrieren oder so die bleiben immer Linksbündig ... hab schon einiges rumprobiert

das liegt daran das deinem div indem die rate_form steckt kein align="center" hat.

Code: [Select]
<div>Vote: <!-- ----------------------------------------------- -->
<!-- [MOD] Ajax Star Rating -------------- by Bash-T -->
<!-- START ----------------------------------------- -->

Bau das mal ein dann hast du es auch zentriert.

Sieht dann im Quelltext so aus:

Code: [Select]
<div align="center">Vote: <!-- ----------------------------------------------- -->
<!-- [MOD] Ajax Star Rating -------------- by Bash-T -->
<!-- START ----------------------------------------- -->

Steht aber auch so im ersten Post das zu das so einfügen sollst:

Replace with:
Code: [Select]
<div align="center">{rate_form}</div>

Gruß Jens
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Nosferatu on December 11, 2010, 03:25:36 PM
So hatte ich es anfangs.

hab es wieder mit center gemacht zum anschauen...
jedoch bleiben die Sterne Links der rest zentriert sich. hab sogar alles in eine Zeile geschrieben ;)


details.php
Code: [Select]
<div align="center">{if rate_form}Vote: {rate_form}{endif rate_form} <span id="ajax_rating_count">{image_votes}</span> {lang_votes} | <span id="ajax_rating_rate">{image_rating}</span> {ajax_rating_points}</div>

Gruß
Jeff
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: rsmarty on February 02, 2011, 02:55:27 PM
SUPER SACHE  :D

Funktioniert auch in der neuesten Version und geändertem Template/Style hervorragend! Auch im IE 9/64Bit  :lol:

greez

rsmarty
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: MrAndrew on March 17, 2011, 09:01:02 AM
How to make a same stars as attach???

And how to make sum of voting?

For example: (1 user gave) 5.95 + (2 users gave 4.00) = 9.95
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: haider512 on March 23, 2011, 08:27:26 PM
have any one installed this mod.. can i see the demo please.. ?? the images are not working..

@bash-t
Many Thanks for mods.. and working hard for this community.. Just was letting you know that try photobucket.com , its very much reliable and their links dont go down.. im using it..and it is working great for me.. rest of them always die , just matter of time.
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Markus/TSC on May 02, 2011, 01:06:28 PM
Hi,

das einzige was ich nicht schaffe ist, die sterne zu zentrieren oder so die bleiben immer Linksbündig ... hab schon einiges rumprobiert

das liegt daran das deinem div indem die rate_form steckt kein align="center" hat.

Code: [Select]
<div>Vote: <!-- ----------------------------------------------- -->
<!-- [MOD] Ajax Star Rating -------------- by Bash-T -->
<!-- START ----------------------------------------- -->

Bau das mal ein dann hast du es auch zentriert.

Sieht dann im Quelltext so aus:

Code: [Select]
<div align="center">Vote: <!-- ----------------------------------------------- -->
<!-- [MOD] Ajax Star Rating -------------- by Bash-T -->
<!-- START ----------------------------------------- -->

Steht aber auch so im ersten Post das zu das so einfügen sollst:

Replace with:
Code: [Select]
<div align="center">{rate_form}</div>

Gruß Jens

Ich habe selbiges Problem, bekomme die Sterne nicht zentriert obwohl ich oben zitiertes eingebaut habe. Nachdem sieht das Ergebnis so aus:

Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Nosferatu on June 19, 2011, 02:35:52 AM
hat schon jemand eine Lösung wie man die Sternie zentriert bekommt ?

egal wie man den code zentriert .... die sterne bleiben immer links ....

ich habs bei mir vorerst links stehen... sieht sonst was kake aus ^^ naja so auch nen wenig .... hoffe es hat bald mal wer ne lösung
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Nosferatu on June 24, 2011, 02:42:31 PM
Soooo ich hatte nun was zeit und hab mich da hingesetzt um nach einer lösung zu suchen..

es gibt nur 1 Lösung die funktioniert hat und zwar "arbeitetet mit tabellen"

details.html
Code: [Select]
<table width="300" border="0" cellspacing="0" cellpadding="1">
<tr>
<td valign="top" class="row2">{if rate_form}<b>Vote:</b>{rate_form}{endif rate_form} <span id="ajax_rating_count">{image_votes}</span> {lang_votes} | <span id="ajax_rating_rate">{image_rating}</span> {ajax_rating_points}</td>
</tr>
</table>

Variante 1 mit Muli-Download box:
http://www.pj-firepower.com/picgallerie/details.php?image_id=5965

Variante 2 standard (nur noch für kurze Zeit verfügbar, war noch zufaul um die box überall zu aktievieren ;) ):

http://www.pj-firepower.com/picgallerie/details.php?image_id=11415

mfg
jeff
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Rembrandt on June 24, 2011, 03:01:01 PM
funktioniert im IE nicht..
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Nosferatu on June 24, 2011, 06:56:13 PM
und was genau geht nicht Oo???

bei mir mir funkt das voten bei IE9 + FireFox 5

einzige was ich gesehen habe, dass die im IE bei den Bildern die homepage sooo riesig dargestellt wird .... was ich mir aber nicht erklären kann.... warum...

Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Rembrandt on June 24, 2011, 07:02:13 PM
das voten an sich funktioniert, nur wenn man auf den sternen den mauszeiger hin und her beweg bleibt die grafik (rot) hängen.
wenn man mit der maus von ausserhalb auf einen bereich der sterne fährt dann wird es richtig dargestellt, nur eben beim hin und her fahren nicht.

da hast du igendwo in den tabellen ein par "100%" angaben zuviel.
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Nosferatu on June 24, 2011, 07:12:42 PM
ich habs jetzt probiert selbst wenn ich alle % angaben weg mache bleibt die größe ......

aber es dürfte am zentralen bild liegen wenn ich das weg mache passt die seite ......

wenn ich es hingebe nicht ... da ist es egal ob ich es 10px groß mache oder 10000 die seite wird zu groß...


hm.... den fehler mit den sternen kann ich leider nicht bestätigen.... im 64bit IE9 und auch im 32bit IE9 funktioniert das voten und die sterne ohne probleme.

hängen tut sie nur wenn man abgestimmt hat bei mir , aber das doch normal oder ?
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Markus/TSC on August 01, 2011, 05:43:39 PM
Hallo!

Zunächst vielen Dank für den Mod, die Installation klappte einwandfrei und es funktioniert!

Folgendes Problem habe ich festgestellt: In meiner Galerie hattte ich mal einen Bewertungsmod mit bis zu 10 Sternen. Bilder, die damals höher als 5 bewertet wurden, stehen auch jetzt noch mit 10 oder 9, 8,5 usw da. Bei unbewerteten Bildern, die jetzt nach diesem Mod bewertet werden, tritt das Problem nicht auf, es geht nicht höher wie 10.

MFG

Markus
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Rembrandt on August 01, 2011, 07:07:29 PM
... stehen auch jetzt noch mit 10 oder 9, 8,5 usw da.
Bei unbewerteten Bildern, die jetzt nach diesem Mod bewertet werden, tritt das Problem nicht auf, es geht nicht höher wie 10.
..
ist ja das gleiche, was möchtest du jetzt?
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Markus/TSC on August 01, 2011, 08:52:45 PM
Bild 1 wurde vor dem Mod irgendwann früher mit 10 bewertet

Bild 3 ist Bild 1 nur nochmal bewertet, aber über die 5 Sterne aus dem neuen Mod hinaus, das meine ich!

Bild 2 wurde noch nie bewertet und es stehen auch nur 5 Sterne zur Auswahl und nicht 10 vom alten Mod.

Was ich fragen will, ist, ob man bei den Bildern, die man immer noch über 5 bewerten kann, es zu unterbinden geh...!

Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Rembrandt on August 01, 2011, 09:03:36 PM
wie auch immer, die alte bewertung bis 10 steht in der DB, entweder du löscht diese oder du bewertest auch die neuen bis 10.

mfg Andi
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Markus/TSC on August 03, 2011, 08:12:26 AM
1. Open details.php

Insert before:
//-----------------------------------------------------
//--- [MOD] Ajax Star Rating --------------by Bash-T---
//START------------------------------------------------
$site_template->register_vars(array(
[b] "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],[/b]
"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);



4. Open lang/(your_lang)/main.php
[php]//-----------------------------------------------------
//--- [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";

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" 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 ----------------------------------------- -->

Danke für die Info! Wenn ich es auf 10 Bewertungspunkte ändern will, muss ich demzufolge die Ergänzungen in oben zitierten, von mir fett markierten Bereich entsprechend ergänzen, richtig?

Gruß
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: pwa on November 06, 2011, 08:00:53 PM
Hi all!

I am preparing own site based on 4images...
Ajax star rating is very nice mod - work properly... but...  :-(
there is some conflict with mod for image text overlaying (http://www.4homepages.de/forum/index.php?topic=29572.0

Ajax Star rating works well but overlay text dont apear over image...
if I remove from detail.html
Code: [Select]
<script type="text/javascript" src="scripts/ajaxrating.js"></script>overlaing works (but ajax stars of course not)

same suggestion? can you help?

edit:
error message from FF console:
 $("div.description") is null @ ....../details.php?image_id=5:63

Code: [Select]
<script type="text/javascript">
$(window).load(function(){
//for each description div...
$('div.description').each(function(){
//...set the opacity to 0...
$(this).css('opacity', 0);
//..set width same as the image...
$(this).css('width', $(this).siblings('img').width());
//...get the parent (the wrapper) and set it's width same as the image width... '
$(this).parent().css('width', $(this).siblings('img').width());
//...set the display to block
$(this).css('display', 'block');
});

$('div.wrapper').hover(function(){
//when mouse hover over the wrapper div
//get it's children elements with class descriptio
//and show it using fadeTo
$(this).children('.description').stop().fadeTo(500, 0.7);
},function(){
//when mouse out of the wrapper div
//use fadeTo to hide the div
$(this).children('.description').stop().fadeTo(500, 0);
});

});
</script>
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: sathishIPL on November 22, 2011, 05:53:55 AM
I think Jquery selectors is conflicting with other Javacscript framework  i.e yahoo libraries

I am not 100% sure will this code work or not .But just give a try

I didnt test the CODE

please replace the below jquery code in Imageoverlay text[mod].

<script type="text/javascript">
$.noConflict();
jQuery(window).load(function(){
//for each description div...
jQuery('div.description').each(function(){
//...set the opacity to 0...
jQuery(this).css('opacity', 0);
//..set width same as the image...
jQuery(this).css('width', jQuery(this).siblings('img').width());
//...get the parent (the wrapper) and set it's width same as the image width... '
jQuery(this).parent().css('width', jQuery(this).siblings('img').width());
//...set the display to block
jQuery(this).css('display', 'block');
});

jQuery('div.wrapper').hover(function(){
//when mouse hover over the wrapper div
//get it's children elements with class descriptio
//and show it using fadeTo
jQuery(this).children('.description').stop().fadeTo(500, 0.7);
},function(){
//when mouse out of the wrapper div
//use fadeTo to hide the div
jQuery(this).children('.description').stop().fadeTo(500, 0);
});

});
</script>
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: chrissim on December 19, 2011, 04:54:29 AM
hi,

Im trying to align the word "Vote" next to the rating stars but it seem it can't be done here.

For example : Vote : star star star star star

Any guru here can show me or guide on these issue?

Thanks
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Bugfixed on May 04, 2012, 05:26:07 PM
Hello thanks for mod.
I've installed the first version of it. did not work.
After I updated the above version 1.1. still does not work.
This mode does not work in any browsers   :(

As with the mouse on the stars seem to work.
However, do not understand where you click and vote not fixed stars .. voting does not seem to have any symptoms that had been given. However, re-install as the page (f5) is understood given votes.

My system: 4images 1.7.10, Httpd 2.2.21.x, Php 5.3.10.x, mysql 5.5.23.x on centos 5.8

Please update mod. thanks.
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: wallward on May 04, 2012, 07:12:22 PM
 :( ajax not work, please see this page , after vote need refresh to update voite result
http://wallward.net/details.php?image_id=1&sessionid=d1e6ec902be2079749e2bac515b95c4d

ver 1.7.10
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: CodeMan on April 06, 2013, 08:45:15 PM
Hi,

I installed this MOD and it seems to work fine.
I was wondering if it's possible to show the result image (which is shown after vote is placed) on other pages.
Now the result image (stars) shows only on the detail.html, but how can I show the image (stars) on other page like Home or in the thumbnail_bit.
Which code should I use?

Thanks!
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: MrAndrew on April 07, 2013, 01:22:55 AM
CodeMan, at which pages do you want to show results? What result? Only voted image? Or all votes, maybe must voted??
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: CodeMan on April 07, 2013, 10:57:20 AM
MrAndrew,

when someone votes, an image of stars is shown.
This image of stars is the result/score of the voting.

Now, this is image is only shown in the detail.html (where the rating code is located).

But how can I show this image of stars on the index.php?
I want to show just the image (result/score), not the whole rating system on other pages.


In the other MOD (Star rating) it is possible to show the mentioned image by using the code <img src="{template_url}/images/{rating_pic}" width="90" height="21" />.



Thanks.
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: MrAndrew on April 09, 2013, 10:32:49 PM
CodeMan, I`ll try to help you...

Firstly, install this MOD: http://www.4homepages.de/forum/index.php?topic=6123.0

Important! Install variant "A" of the MOD. (A - will uses new table in the database)

When OK and checked, we will go next
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: CodeMan on April 11, 2013, 10:03:27 PM
MrAndrew,

thanks for offering your help.
Unfortunately, now I have another problem.
After I posted my questions above, I decided to remove this MOD AJAX star rating and so I replaced it with the other MOD Star rating.
Then, when I read your last post I installed the AJAX star rating MOD again.
But now it doesn’t work anymore.
The rating system is visible on my site and the mouse-over-effect is working.

But when clicking on the image to vote, then nothing happens.
No votes are placed, even not when an image was never voted before.
I tried more than once to install it by deleting old files and using fresh files, but no result.
I’m still asking for help, but now first I must get the AJAX rating system work again.

Thanks!
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: MrAndrew on April 11, 2013, 10:10:37 PM
CodeMan, now STEP by STEP, to do next:

Before do steps below, make a backup, all files!! I strongly recommend you to do this!

1. Remove AJAX MOD, step by step from instructions from step 8 to 1
2. Check last installed rating mod, and do the same steps (Remove step by step)
3. Check, that default rating system work`s correctly reengaged and work
4. Step by step install AJAX rating again!

Be very careful with code!
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: CodeMan on April 11, 2013, 11:26:55 PM
Oke MrAndrew,

The AJAX Star Rating is working again.

I also installed the intsructions from the link you gave earlier: http://www.4homepages.de/forum/index.php?topic=6123.0 (http://www.4homepages.de/forum/index.php?topic=6123.0).
And I installed the "voted_a_install.php" after upload to my the root, which is mentioned in the instructions.
Everyting seems to work oke!

Looking forward to reading your further instructions!
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: MrAndrew on April 12, 2013, 05:27:13 PM
Due to some MOD restrictions, you will be able to show only one result using stars images! (See attachments for DEMO!!!)

However, you able to show extremely results in ratung values (not in images)!

Let`s go!

0. STEP. Make a backup all files will be changed!!!

1. Step
Correct 4images_voted table. Set new options on "vote" Type: decimal Length/value 4,2 As defined  0.00

2. Step
Add to the 4images_voted table new field "vote_time" int(11) No 0
3. Step
Open /includes/page_header.php and delete:
Code: [Select]
 if ($user_info['user_level'] != GUEST) {
    $sql = "SELECT user_id, image_id, vote
            FROM ".VOTED_TABLE."
            WHERE image_id = ".$id." AND user_id = ".$user_info['user_id'];
    $rated = $site_db->query_firstrow($sql);
    $rating = ($rated['vote']) ? $rated['vote'] : $rating;
  }else{
    $rated = FALSE;
  }
3.1 Step
At the very end Locate:
Code: [Select]
?>Add:
Code: [Select]
//-----------------------------------------------------
//--- LATEST VOTES ------------------------------------
//-----------------------------------------------------
$lastvoted = "";

        
        $sql = "SELECT v.user_id, v.image_id, v.vote, v.vote_time, u.user_id, u.user_name, i.image_id, i.image_name
        FROM ".VOTED_TABLE." v, ".USERS_TABLE." u, ".IMAGES_TABLE." i
        WHERE v.user_id = u.user_id AND v.image_id = i.image_id
        ORDER BY v.vote_time DESC
        LIMIT 1";


$result = $site_db->query($sql);  
   while ($row = $site_db->fetch_array($result)) {
  
$lastv = '<div id="star"><br style="clear: both;" /><ul id="star0" class="star"><li id="starCur0" class="curr" title="'.$row['vote'].'" style="width: 0px;"></li></ul></div>';
  
$lastvoted .= "<tr>";
$lastvoted .= "<td align=\"left\" width=\"4\"></td>";
$lastvoted .= "<td align=\"left\">";
$lastvoted .= '<a href ="'.ROOT_PATH.'search.php?search_user='.$row['user_name'].'"><b>'.$row['user_name'].'</b></a>';
$lastvoted .= "</td>";
$lastvoted .= "<td width=\"50\" align=\"right\">";
$lastvoted .= ''.$lastv.''.$row['image_name'].'';
$lastvoted .= "</td>";
$lastvoted .= "</tr>";
}

$site_template->register_vars(array(
"lastvoted" => $lastvoted,
));
unset($lastvoted);
//-----------------------------------------------------

4. Step

Open /ajaxrating.php and find:
Code: [Select]
 if ($action == "rateimage" && $id) {
Add below:
Code: [Select]
 if ($user_info['user_level'] != GUEST) {
    $sql = "SELECT user_id, image_id, vote
            FROM ".VOTED_TABLE."
            WHERE image_id = ".$id." AND user_id = ".$user_info['user_id'];
    $rated = $site_db->query_firstrow($sql);
    $rating = ($rated['vote']) ? $rated['vote'] : $rating;
  }else{
    $rated = FALSE;
  }

4.1 Step
Find:
Code: [Select]
if (!in_array($id, $split_list) && !in_array($id, $cookie_rated)) {Replace:
Code: [Select]
if (!in_array($id, $split_list) && !in_array($id, $cookie_rated) && !$rated) {
5 Step
Open /includes/functions.php:
Find:
Code: [Select]
function update_image_rating($image_id, $rating) {
  global $site_db, $user_info;
Add below:
Code: [Select]
$current_time = time();
5.1 Step
Find:
Code: [Select]
       $sql = "INSERT INTO ".VOTED_TABLE."
                (user_id, image_id, vote)
                VALUES
                (".$user_info['user_id'].", ".$image_id.", ".$rating.")";
        $site_db->query($sql);
Replace:
Code: [Select]
       $sql = "INSERT INTO ".VOTED_TABLE."
                (user_id, image_id, vote, vote_time)
                VALUES
                (".$user_info['user_id'].", ".$image_id.", ".$rating.", ".$current_time.")";
        $site_db->query($sql);

6. Step:
Open templates/details.html
Find and delete:
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 ----------------------------------------- -->

6.1 Step:
Open templates/header.html
Find:
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 -->
And replace:
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>

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

7. Step
Open templates/home.html
And locate this, where you want:
Code: [Select]
             <TABLE border="0" cellpadding="5" cellspacing="0" width="400" class="tablehead">
                <tr>
                  <TD class="tdhead">Last vote</TD>
                </tr>
                <TR>
                  <TD>Recent voted photo</TD>
                </TR>
                {lastvoted}
              </TABLE>

In case you want to show rating values:

In step: 3.1 find:
Code: [Select]
//-----------------------------------------------------
//--- LATEST VOTES ------------------------------------
//-----------------------------------------------------
$lastvoted = "";

        
        $sql = "SELECT v.user_id, v.image_id, v.vote, v.vote_time, u.user_id, u.user_name, i.image_id, i.image_name
        FROM ".VOTED_TABLE." v, ".USERS_TABLE." u, ".IMAGES_TABLE." i
        WHERE v.user_id = u.user_id AND v.image_id = i.image_id
        ORDER BY v.vote_time DESC
        LIMIT 1";


$result = $site_db->query($sql);  
   while ($row = $site_db->fetch_array($result)) {
  
$lastv = '<div id="star"><br style="clear: both;" /><ul id="star0" class="star"><li id="starCur0" class="curr" title="'.$row['vote'].'" style="width: 0px;"></li></ul></div>';
  
$lastvoted .= "<tr>";
$lastvoted .= "<td align=\"left\" width=\"4\"></td>";
$lastvoted .= "<td align=\"left\">";
$lastvoted .= '<a href ="'.ROOT_PATH.'search.php?search_user='.$row['user_name'].'"><b>'.$row['user_name'].'</b></a>';
$lastvoted .= "</td>";
$lastvoted .= "<td width=\"50\" align=\"right\">";
$lastvoted .= ''.$lastv.''.$row['image_name'].'';
$lastvoted .= "</td>";
$lastvoted .= "</tr>";
}

$site_template->register_vars(array(
"lastvoted" => $lastvoted,
));
unset($lastvoted);
//-----------------------------------------------------
Replace:
Code: [Select]
//-----------------------------------------------------
//--- LATEST VOTES ------------------------------------
//-----------------------------------------------------
$lastvoted = "";

        
        $sql = "SELECT v.user_id, v.image_id, v.vote, v.vote_time, u.user_id, u.user_name, i.image_id, i.image_name
        FROM ".VOTED_TABLE." v, ".USERS_TABLE." u, ".IMAGES_TABLE." i
        WHERE v.user_id = u.user_id AND v.image_id = i.image_id
        ORDER BY v.vote_time DESC
        LIMIT 3";


$result = $site_db->query($sql);  
   while ($row = $site_db->fetch_array($result)) {
  
$lastv = ''.$row['vote'].'';
  
$lastvoted .= "<tr>";
$lastvoted .= "<td align=\"left\" width=\"4\"></td>";
$lastvoted .= "<td align=\"left\">";
$lastvoted .= '<a href ="'.ROOT_PATH.'search.php?search_user='.$row['user_name'].'"><b>'.$row['user_name'].'</b></a>';
$lastvoted .= "</td>";
$lastvoted .= "<td width=\"50\" align=\"right\">";
$lastvoted .= ''.$lastv.'';
$lastvoted .= "</td>";
$lastvoted .= "<td width=\"50\" align=\"right\">";
$lastvoted .= ''.$row['image_name'].'';
$lastvoted .= "</td>";
$lastvoted .= "</tr>";
}

$site_template->register_vars(array(
"lastvoted" => $lastvoted,
));
unset($lastvoted);
//-----------------------------------------------------


Additional info:
LIMIT 3 you may change as you need...
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: CodeMan on April 12, 2013, 07:24:56 PM
MrAndrew,

the AJAX Star rating stopped working after installing this MOD.  
Rating is not possible anymore and also no mouse-over-effect.

Furhtermore, in step 4 you mentioned:

4. Step

Open /ajaxrating.php and find:
Code: [Select]
 $rating = intval($HTTP_POST_VARS['rating']);
Add below:
Code: [Select]
 if ($user_info['user_level'] != GUEST) {
    $sql = "SELECT user_id, image_id, vote
            FROM ".VOTED_TABLE."
            WHERE image_id = ".$id." AND user_id = ".$user_info['user_id'];
    $rated = $site_db->query_firstrow($sql);
    $rating = ($rated['vote']) ? $rated['vote'] : $rating;
  }else{
    $rated = FALSE;
  }


In my ajaxrating.php it says $rating = floatval($HTTP_POST_VARS['rating']); and not  $rating = intval($HTTP_POST_VARS['rating']);
I tried both, but not working.

In the attachment I added my 4images tables from phpMyAdmin so you can look at the structure.

Why did the AJAX Star rating stop working?
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: MrAndrew on April 12, 2013, 07:27:38 PM
Sorry! I missed!

Find:
Code: [Select]
if ($action == "rateimage" && $id) {add below:
Code: [Select]
  if ($user_info['user_level'] != GUEST) {
    $sql = "SELECT user_id, image_id, vote
            FROM ".VOTED_TABLE."
            WHERE image_id = ".$id." AND user_id = ".$user_info['user_id'];
    $rated = $site_db->query_firstrow($sql);
    $rating = ($rated['vote']) ? $rated['vote'] : $rating;
  }else{
    $rated = FALSE;
  }

-------------------

Code: [Select]
$rating = floatval($HTTP_POST_VARS['rating']);
Must be under the code!
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: CodeMan on April 12, 2013, 07:42:09 PM
No, still not working.
The whole rating sytem is not working anymore.

Bytheway, I hope you understood my explanation about showing the voted image on the home page.
I meant for each image_id, not just one voted image.

But anyway, still not working...
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: MrAndrew on April 12, 2013, 07:45:53 PM
Please, post your ajaxrating.php code here
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: CodeMan on April 12, 2013, 07:48:20 PM
Oke, see the attachment:
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: MrAndrew on April 12, 2013, 07:51:58 PM
May i see the site for more information? Send me link via PM
Title: Re: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
Post by: Sunny C. on December 20, 2013, 03:50:37 PM
Dont work with jquery ;(