Advanced search  

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Pages: [1]   Go Down

Author Topic: ratings with half stars (js help)  (Read 4506 times)

0 Members and 1 Guest are viewing this topic.

E. William

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 33
ratings with half stars (js help)
« on: December 04, 2013, 09:10:51 am »

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

E. William

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 33
Re: ratings with half stars (js help)
« Reply #1 on: December 05, 2013, 10:00:17 am »

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().
Logged

E. William

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 33
Re: ratings with half stars (js help)
« Reply #2 on: December 05, 2013, 10:24:37 am »

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 :)
Logged

E. William

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 33
Re: ratings with half stars (js help)
« Reply #3 on: December 05, 2013, 09:33:31 pm »

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]
            //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]
            //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]
        //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]
        //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]
$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]
$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]
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]
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]
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]
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]
set_js_var('rating', round(($CURRENT_PIC_DATA['pic_rating'] / 2000) / (5/$rating_stars_amount), 0));

Replace with:

Code: [Select]
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.
Logged
Pages: [1]   Go Up
 

Page created in 0.023 seconds with 19 queries.