4images Forum & Community
Welcome, Guest. Please login or register.
Did you miss your activation email?
July 01, 2016, 03:22:26 PM

Login with username, password and session length
Search:     Advanced search
Togle to toolbar
Translate this page with =>
Translate this page >
* Home Help Search Login Register
 
+  4images Forum & Community
|-+  4images Modifications / Modifikationen
| |-+  Mods & Plugins (Releases & Support) (Moderators: mawenzi, Rembrandt)
| | |-+  [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.
0 Members and 1 Guest are viewing this topic. « previous next »
Pages: [1] 2 3 4 5 6 » »» Print
Current Topic Rating: *****
Author Topic: [MOD] Ajax Star Rating. Rate images without page reload, like on youtube etc.  (Read 72908 times)
bash-t
Newbie
*
Offline Offline

Posts: 20

Thank You
-Given: 0
-Receive: 7


View Profile
« 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) Smile

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:
1
$site_template->print_template($site_template->parse_template($main_template));

Insert before:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//-----------------------------------------------------
//--- [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:
1
define('MAX_RATING'5);

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


3. Open includes/functions.php
Locate:
1
2
3
4
5
6
$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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//-----------------------------------------------------
//--- [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:
1
2
3
$lang['voting_success'] = "Ihre Bewertung wurde gespeichert";
$lang['voting_error'] = "Bewertung ungültig!";
$lang['already_voted'] = "Sie haben dieses Bild bereits bewertet!";

Replace with:
1
2
3
//$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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//-----------------------------------------------------
//--- [MOD] Ajax Star Rating --------------by Bash-T---
//START------------------------------------------------
$lang['ajax_rating_labels'] = array (
	
=> "Noch nicht bewertet",
	
=> "Öde",
	
=> "Nichts besonderes",
	
=> "Sehenswert",
	
=> "Echt cool",
	
=> "Genial!"
);
$lang['ajax_rating_messages'] = array (
	
=> "Bewertung ungültig"//voting_error
	
=> "Vielen Dank für Deine Bewertung!"// voting_success
	
=> "Du hast das Bild bereits bewertet."//already_voted
	
=> "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:

Insert after:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- ----------------------------------------------- -->
<!-- [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.
1
display_percentage
change 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.
1
display_lables
if 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:
1
2
3
4
{if rate_form}
                  <br />
<div align="center">{rate_form}</div>
                  {endif rate_form}

Replace with:
1
<div align="center">{rate_form}</div>

Put the following code anywhere on your details page (usually directly below the div tag posted beforehand:
1
<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:
1
{if has_rss}

Insert before:
1
2
3
4
5
6
7
8
9
<!-- ----------------------------------------------- -->
<!-- [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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!-- ----------------------------------------------- -->
<!-- [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:
1
2
3
4
5
6
7
8
9
10
/*-----------------------------------------------------*/
/*--- [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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//-----------------------------------------------------
//--- 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_expireCOOKIE_PATHCOOKIE_DOMAINCOOKIE_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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//-----------------------------------------------------
//--- 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.

* [MOD] Ajax Star Rating - new files.zip (23.43 KB - downloaded 632 times.)
« Last Edit: August 01, 2011, 09:09:04 PM by Rembrandt » Logged

4images Version: 1.7.7
rinaldos
Guest
« Reply #1 on: August 16, 2009, 07:46:30 PM »

Sounds good, but is it possible to see a DEMO?
Logged
Sumale.my
Addicted member
******
Offline Offline

Posts: 1764

Thank You
-Given: 164
-Receive: 77

Neverdie


View Profile
« Reply #2 on: August 16, 2009, 08:22:37 PM »

NICE NICE NICE!
More of that!

Logged
rinaldos
Guest
« Reply #3 on: August 16, 2009, 09:46:21 PM »

@Sumale.in
Hast du es ausprobiert?
Logged
Sumale.my
Addicted member
******
Offline Offline

Posts: 1764

Thank You
-Given: 164
-Receive: 77

Neverdie


View Profile
« Reply #4 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  [Expand]
Parse error: syntax error, unexpected '}' in /www/htdocs/w00b2576/anitube/includes/page_header.php on line 359

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//-----------------------------------------------------
//--- 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:


Ich bin die Installation zweimal durchgegangen!

Edit:2//
Bis jetzt war ich nicht in der Lage es einzubauen!
« Last Edit: August 16, 2009, 11:19:03 PM by Sumale.nin » Logged
bash-t
Newbie
*
Offline Offline

Posts: 20

Thank You
-Given: 0
-Receive: 7


View Profile
« Reply #5 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
Logged

4images Version: 1.7.7
Sumale.my
Addicted member
******
Offline Offline

Posts: 1764

Thank You
-Given: 164
-Receive: 77

Neverdie


View Profile
« Reply #6 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!

Logged
Nicky
Administrator
4images Guru
*****
Offline Offline

Posts: 3195

Thank You
-Given: 23
-Receive: 51


View Profile
« Reply #7 on: August 17, 2009, 02:26:09 PM »

bash-t,

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

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

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

btw.2
bash-t, jetzt wird's Sumale.nin(Benny) website erst nicht fertig  Razz
Logged

cheers
Nicky
Your first three "must do" before you ask a question ! (© by V@no)
- please read the Forum Rules ...
- please study the FAQ ...
- please try to Search for your answer ...

nicky.net 4 4images | Facebook Covers
Signature stolen from mawenzi
Sumale.my
Addicted member
******
Offline Offline

Posts: 1764

Thank You
-Given: 164
-Receive: 77

Neverdie


View Profile
« Reply #8 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:
Very Happy, 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.
Logged
bash-t
Newbie
*
Offline Offline

Posts: 20

Thank You
-Given: 0
-Receive: 7


View Profile
« Reply #9 on: August 17, 2009, 05:28:50 PM »

Fehler:

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//-----------------------------------------------------
//--- 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:


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
« Last Edit: August 17, 2009, 09:36:25 PM by bash-t » Logged

4images Version: 1.7.7
Sumale.my
Addicted member
******
Offline Offline

Posts: 1764

Thank You
-Given: 164
-Receive: 77

Neverdie


View Profile
« Reply #10 on: August 17, 2009, 09:24:51 PM »

Soweit hat die Installation nun geklappt, aber die Darstellung klappt nicht:


details.html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
{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!
Logged
bash-t
Newbie
*
Offline Offline

Posts: 20

Thank You
-Given: 0
-Receive: 7


View Profile
« Reply #11 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:
1
failure:handleFailure,

replace with:
1
failure:handleFailure

Locate:
1
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:
1
targetForm = document.getElementById('ajax_rate_form');


Damit wären die JS Fehler behoben!
Allerdings gibt es im IE noch einen CSS-Bug Sad und vielleicht kann mir jemand von Euch weiterhelfen...
Siehe folgenden Screenshot:


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...
1
2
3
4
#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; }

1
2
3
4
5
6
<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 Smile


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

Grüße,
Bash-T
« Last Edit: August 18, 2009, 03:54:44 PM by bash-t » Logged

4images Version: 1.7.7
Sumale.my
Addicted member
******
Offline Offline

Posts: 1764

Thank You
-Given: 164
-Receive: 77

Neverdie


View Profile
« Reply #12 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
Logged
bash-t
Newbie
*
Offline Offline

Posts: 20

Thank You
-Given: 0
-Receive: 7


View Profile
« Reply #13 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:
1
#star li.curr { BACKGROUND: url('images/stars.gif') left 25px; FONT-SIZE: 1px; }

Replace with:
1
#star li.curr { BACKGROUND: url('images/stars.gif') left 25px; left:0px; FONT-SIZE: 1px; }

Grüße,
Bash-T
Logged

4images Version: 1.7.7
mawenzi
Moderator
4images Guru
*****
Offline Offline

Posts: 4500

Thank You
-Given: 36
-Receive: 121


View Profile
« Reply #14 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 ...
Logged

Your first three "must do" before you ask a question ! ( © by V@no )
- please read the Forum Rules ...
- please study the FAQ ...
- please try to Search for your answer ...

You are on search for top 4images MOD's ?
- then please search here ... Mawenzi's Top 100+ MOD List (unsorted sorted) ...
Pages: [1] 2 3 4 5 6 » »» Print 
« previous next »
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2015, Simple Machines Valid XHTML 1.0! Valid CSS!
Page created in 0.315 seconds with 20 queries.
Post your comments here