ratings with half stars (js help)

[E. William]

Hi there,

I'm implementing a half-star rating system for my gallery.
Users rate in full stars, but the ratings are displayed in half stars.

I've gotten it to work in the php part of the gallery, but I can't get the javascript to display the current and new rating properly.

Here's what I've done...

In include/functions.inc.php I've changed out:

Code Select Expand


            //calculate required amount of stars in picinfo
            $rating        = round(($row['pic_rating'] / 2000) / (5 / $CONFIG['rating_stars_amount']));
            $rating_images = '';

            for ($i = 1; $i <= $CONFIG['rating_stars_amount']; $i++) {

                if ($i <= $rating) {
                    $rating_images .= '<img src="' . $prefix . 'images/rate_full.png" alt="' . $rating . '"/>';
                } else {
                    $rating_images .= '<img src="' . $prefix . 'images/rate_empty.png" alt="' . $rating . '"/>';
                }
            }


with:

Code Select Expand


            //calculate required amount of stars in picinfo
            $rating        = ($row['pic_rating'] / 2000) / (5 / $CONFIG['rating_stars_amount']);
            $rating_images = '';

            for ($i = 1; $i <= $CONFIG['rating_stars_amount']; $i++) {

                if ($i <= ($rating + 0.25)) {
                    $rating_images .= '<img src="' . $prefix . 'images/rate_full.png" alt="' . $rating . '"/>';
                } else {
                if ($i <= ($rating + 0.75)) {
                    $rating_images .= '<img src="' . $prefix . 'images/rate_half.png" alt="' . $rating . '"/>';
                } else {
                    $rating_images .= '<img src="' . $prefix . 'images/rate_empty.png" alt="' . $rating . '"/>';
                }}
            }



And in displayimage.php I've changed:

Code Select Expand


        //calculate required amount of stars in picinfo
        $i = 1;
        $rating = round(($CURRENT_PIC_DATA['pic_rating'] / 2000) / (5 / $CONFIG['rating_stars_amount']));
        $rating_images = '';

        while ($i <= $CONFIG['rating_stars_amount']) {

            if ($i <= $rating) {
                $rating_images .= '<img src="' . $prefix . 'images/rate_full.png" align="left" alt="' . $rating . '"/>';
            } else {
                $rating_images .= '<img src="' . $prefix . 'images/rate_empty.png" align="left" alt="' . $rating . '"/>';
            }

            $i++;
        }


to:

Code Select Expand


        //calculate required amount of stars in picinfo

        $i = 1;
        $rating = ($CURRENT_PIC_DATA['pic_rating'] / 2000) / (5 / $CONFIG['rating_stars_amount']);
        $rating_images = '';

        while ($i <= $CONFIG['rating_stars_amount']) {

            if ($i <= ($rating + 0.25)) {
                $rating_images .= '<img src="' . $prefix . 'images/rate_full.png" align="left" alt="' . $rating . '"/>';
            } else {
            if ($i <= ($rating + 0.75)) {
                $rating_images .= '<img src="' . $prefix . 'images/rate_half.png" align="left" alt="' . $rating . '"/>';
            } else {
                $rating_images .= '<img src="' . $prefix . 'images/rate_empty.png" align="left" alt="' . $rating . '"/>';
            }}

            $i++;
        }


The above codes work perfectly, but in js/displayimage.js there are two sections which need to be changed accordingly, and I just can't seem to get the formulas straight. Those sections are:

Code Select Expand


function changeout(obj) {
    var id = obj.title;
    for(i=0; i<id; i++) {
        var img = js_vars.theme_dir + 'images/rate_full.png';
        if(js_vars.rating <= i) {
            img = js_vars.theme_dir + 'images/rate_empty.png';
        }
        $('#' + js_vars.picture_id + '_' + (i+1)).attr('src', img);
    }
}


and

Code Select Expand


function buildRating() {
    var rating_stars = '';

    if(!isNumber(js_vars.stars_amount)) {
        //default to 5 stars
        js_vars.stars_amount = 5;
    }
    if (!js_vars.theme_dir) {
        js_vars.theme_dir = '';
    }
    for(i=0; i < js_vars.stars_amount; i++ ) {
        var star11 = 'rate_full';
        var star12 = 'rate_new';
        if(i > js_vars.rating - 1) {
            star11 = star12 = 'rate_empty';
        }
        if(js_vars.can_vote == 'true') {
            rating_stars += '<img style="cursor:pointer" src="' + js_vars.theme_dir + 'images/' + star11 + '.png" id="' + js_vars.picture_id + '_'+(i+1)+'"'
            rating_stars += ' title="' + (i+1) + '" onmouseout="changeout(this)" onmouseover="changeover(this)" onclick="rate(this)" />';
        } else {
            rating_stars += '<img src="' + js_vars.theme_dir + 'images/' + star11 + '.png" alt="' + js_vars.rating + '" title="' + js_vars.rating + '"/>';
        }
    }
    return rating_stars;
}


I've been screwing around with the formulas, but all I've gotten to sofar is that it's rounding up to whole stars and then adding another half star.

Warning: While this album doesn't contain doll nudity, others do. Stay in this album if you don't want to see adult content.
The link to the gallery: http://lovedollgallery.com/gallery/thumbnails.php?album=8.

[E. William]

Little lost here...

I figured out that js_vars.rating is filled with an integer number instead of a fraction, which is probably the start of the problem. I figure it's filled from ratepic.php, so I removed the round() functions there.

I also noticed the line $rate = $superCage->get->getInt('rate'); which could also be the problem, and not the round().

[E. William]

Bingo, first part of the problem solved

In themes/curve/theme.php I found the root cause of the problem: set_js_var('rating', round(($CURRENT_PIC_DATA['pic_rating'] / 2000) / (5/$rating_stars_amount), 0));.

Changed that to: set_js_var('rating', ($CURRENT_PIC_DATA['pic_rating'] / 2000) / (5/$rating_stars_amount));

On to the next part of the problem

[E. William]

Success at last

This is actually a double change:
1. ratings are always displayed with two decimal points (i.e. 3.00 / 2.67 / 4.10)
2. ratings are displayed with half stars

For a 5 star rating they're displayed as follows (but it will work for any amount of stars):
- 1 star: from 1 up to 1.25
- 1.5 stars: from 1.25 up to 1.75
- 2 stars: from 1.75 up to 2.25
- 2.5 stars: from 2.25 up to 2.75
- 3 stars: from 2.75 up to 3.25
- 3.5 stars: from 3.25 up to 3.75
- 4 stars: from 3.75 up to 4.25
- 4.5 stars: from 4.25 up to 4.75
- 5 stars: from 4.75 to 5

Here's what's been changed:

In include/functions.inc.php find:

Code Select Expand


            //calculate required amount of stars in picinfo
            $rating        = round(($row['pic_rating'] / 2000) / (5 / $CONFIG['rating_stars_amount']));
            $rating_images = '';

            for ($i = 1; $i <= $CONFIG['rating_stars_amount']; $i++) {

                if ($i <= $rating) {
                    $rating_images .= '<img src="' . $prefix . 'images/rate_full.png" alt="' . $rating . '"/>';
                } else {
                    $rating_images .= '<img src="' . $prefix . 'images/rate_empty.png" alt="' . $rating . '"/>';
                }
            }


Replace with:

Code Select Expand


            //calculate required amount of stars in picinfo
            $rating        = ($row['pic_rating'] / 2000) / (5 / $CONFIG['rating_stars_amount']);
            $rating_images = '';

            for ($i = 1; $i <= $CONFIG['rating_stars_amount']; $i++) {

                if ($i <= ($rating + 0.25)) {
                    $rating_images .= '<img src="' . $prefix . 'images/rate_full.png" alt="' . $rating . '" title="' . number_format((float)$rating, 2, '.', '') . '"/>';
                } else {
                    if ($i <= ($rating + 0.75)) {
                        $rating_images .= '<img src="' . $prefix . 'images/rate_half.png" alt="' . $rating . '" title="' . number_format((float)$rating, 2, '.', '') . '"/>';
                    } else {
                        $rating_images .= '<img src="' . $prefix . 'images/rate_empty.png" alt="' . $rating . '" title="' . number_format((float)$rating, 2, '.', '') . '"/>';
                    }
                }
            }


In displayimage.php find:

Code Select Expand


        //calculate required amount of stars in picinfo
        $i = 1;
        $rating = round(($CURRENT_PIC_DATA['pic_rating'] / 2000) / (5 / $CONFIG['rating_stars_amount']));
        $rating_images = '';

        while ($i <= $CONFIG['rating_stars_amount']) {

            if ($i <= $rating) {
                $rating_images .= '<img src="' . $prefix . 'images/rate_full.png" align="left" alt="' . $rating . '"/>';
            } else {
                $rating_images .= '<img src="' . $prefix . 'images/rate_empty.png" align="left" alt="' . $rating . '"/>';
            }

            $i++;
        }


Replace with:

Code Select Expand


        //calculate required amount of stars in picinfo
        $i = 1;
        $rating = ($CURRENT_PIC_DATA['pic_rating'] / 2000) / (5 / $CONFIG['rating_stars_amount']);
        $rating_images = '';

        while ($i <= $CONFIG['rating_stars_amount']) {
            if ($i <= ($rating + 0.25)) {
                $rating_images .= '<img src="' . $prefix . 'images/rate_full.png" align="left" alt="' . $rating . '" title="' . number_format((float)$rating, 2, '.', '') . '"/>';
            } else {
                if ($i <= ($rating + 0.75)) {
                    $rating_images .= '<img src="' . $prefix . 'images/rate_half.png" align="left" alt="' . $rating . '" title="' . number_format((float)$rating, 2, '.', '') . '"/>';
                } else {
                    $rating_images .= '<img src="' . $prefix . 'images/rate_empty.png" align="left" alt="' . $rating . '" title="' . number_format((float)$rating, 2, '.', '') . '"/>';
                }
            }

            $i++;
        }


In ratepic.php find:

Code Select Expand


$new_rating = round(($new_rating / 2000) / (5 / $rating_stars_amount), 1);
$new_rating_text = $lang_rate_pic_php['rate_ok'] . ' ' . sprintf($lang_rate_pic['rating'], $new_rating, $rating_stars_amount, $row['votes'] + 1);

$send_back = array(
    'status'          => 'success',
    'msg'             => $lang_rate_pic_php['rate_ok'],
    'new_rating_text' => $new_rating_text,
    'new_rating'      => round($new_rating, 0),
);


Replace with:

Code Select Expand


$new_rating = round(($new_rating / 2000) / (5 / $rating_stars_amount), 2);
$new_rating_text = $lang_rate_pic_php['rate_ok'] . ' ' . sprintf($lang_rate_pic['rating'], $new_rating, $rating_stars_amount, $row['votes'] + 1);

$send_back = array(
    'status'          => 'success',
    'msg'             => $lang_rate_pic_php['rate_ok'],
    'new_rating_text' => $new_rating_text,
    'new_rating'      => round($new_rating, 2),
);


In js/displayimage.js find:

Code Select Expand


function changeout(obj) {
    var id = obj.title;
    for(i=0; i<id; i++) {
        var img = js_vars.theme_dir + 'images/rate_full.png';
        if(js_vars.rating <= i) {
            img = js_vars.theme_dir + 'images/rate_empty.png';
        }
        $('#' + js_vars.picture_id + '_' + (i+1)).attr('src', img);
    }
}


Replace with:

Code Select Expand


function changeout(obj) {
    var id = obj.title;
    for(i=0; i<id; i++) {
        var img = js_vars.theme_dir + 'images/rate_full.png';
        if(js_vars.rating < i + 0.75) {
            img = js_vars.theme_dir + 'images/rate_half.png';
        }
        if(js_vars.rating < i + 0.25) {
            img = js_vars.theme_dir + 'images/rate_empty.png';
        }
        $('#' + js_vars.picture_id + '_' + (i+1)).attr('src', img);
    }
}


Also in js/displayimage.js find:

Code Select Expand


function buildRating() {
    var rating_stars = '';

    if(!isNumber(js_vars.stars_amount)) {
        //default to 5 stars
        js_vars.stars_amount = 5;
    }
    if (!js_vars.theme_dir) {
        js_vars.theme_dir = '';
    }
    for(i=0; i < js_vars.stars_amount; i++ ) {
        var star11 = 'rate_full';
        var star12 = 'rate_new';
        if(i > js_vars.rating - 1) {
            star11 = star12 = 'rate_empty';
        }
        if(js_vars.can_vote == 'true') {
            rating_stars += '<img style="cursor:pointer" src="' + js_vars.theme_dir + 'images/' + star11 + '.png" id="' + js_vars.picture_id + '_'+(i+1)+'"'
            rating_stars += ' title="' + (i+1) + '" onmouseout="changeout(this)" onmouseover="changeover(this)" onclick="rate(this)" />';
        } else {
            rating_stars += '<img src="' + js_vars.theme_dir + 'images/' + star11 + '.png" alt="' + js_vars.rating + '" title="' + js_vars.rating + '"/>';
        }
    }
    return rating_stars;
}


Replace with:

Code Select Expand


function buildRating() {
    var rating_stars = '';

    if(!isNumber(js_vars.stars_amount)) {
        //default to 5 stars
        js_vars.stars_amount = 5;
    }
    if (!js_vars.theme_dir) {
        js_vars.theme_dir = '';
    }
    for(i=0; i < js_vars.stars_amount; i++ ) {
        var star11 = 'rate_full';
        var star12 = 'rate_new';
        if(i > js_vars.rating - 0.75) {
            star11 = star12 = 'rate_half';
        }
        if(i > js_vars.rating - 0.25) {
            star11 = star12 = 'rate_empty';
        }
        if(js_vars.can_vote == 'true') {
            rating_stars += '<img style="cursor:pointer" src="' + js_vars.theme_dir + 'images/' + star11 + '.png" id="' + js_vars.picture_id + '_'+(i+1)+'"'
            rating_stars += ' title="' + (i+1) + '" onmouseout="changeout(this)" onmouseover="changeover(this)" onclick="rate(this)" />';
        } else {
            rating_stars += '<img src="' + js_vars.theme_dir + 'images/' + star11 + '.png" alt="' + js_vars.rating.toFixed(2) + '" title="' + js_vars.rating.toFixed(2) + '"/>';
        }
    }
    return rating_stars;
}


In themes/curve/theme.php find:

Code Select Expand


set_js_var('rating', round(($CURRENT_PIC_DATA['pic_rating'] / 2000) / (5/$rating_stars_amount), 0));


Replace with:

Code Select Expand


set_js_var('rating', ($CURRENT_PIC_DATA['pic_rating'] / 2000) / (5/$rating_stars_amount));


Lastly you need to create an image of a half-filled star, call it rate_half.png and place it in images.

You can also use the attached files.