CStarRating

letscode · February 6, 2009, 2:54pm

Hello,

I'm using CStarrating in my project, but it doesn't show up the images:

i get the following html:

</span>

en my css and js scripts are also registered.

i use this code:

<?php $this->widget('CStarRating',array('name'=>'rating_23' )); ?>

Yii svn

qiang · February 6, 2009, 3:25pm

Not sure what's happening here, but please check the assets directory to make sure the image files are there. Also use FF to check that the radiobuttons are replaced with corresponding span tags with appropriate image css.

letscode · February 6, 2009, 3:31pm

Thanks for your reply,

The image files are in the assets directory : assets/f5bbae4b/rating

there are three files: jquery.rating.css, delete.gif and star.gif

jquery.rating.css file is also registered.

there is also an

jQuery(document).ready(function() {

jQuery('#rating_23 > input').rating();

}

I think FF cannot find the images, but I don't understand why

Edit: <script type="text/javascript" src="/foto/assets/f5bbae4b/jquery.rating.js"></script>

is also loaded correctlys. I don't get a firebug error

Edit2: I don't get a lot of span tags. Just the HTML in my first post

qiang · February 6, 2009, 3:47pm

Sorry, they should be div tags, dynamically replacing the radios by js.

Using FF, you can check the CSS for those div and see if the images can be loaded by FF.

The extension system has the similar usage of CStarRating as yours:



$this->widget('CStarRating',array('model'=>$review,'attribute'=>'rating'));

BTW, did you turn on 'path' format URL? If yes, test 'get' format for now.

letscode · February 6, 2009, 5:46pm

Thanks, I will try with the model widget.

what do you mean with this?

Quote

BTW, did you turn on 'path' format URL? If yes, test 'get' format for now.

jonah · February 6, 2009, 6:06pm

Yii currently uses v2.5 of the star-rating JS library. Perhaps it should be updated to v2.61 (maybe 2.5 doesn't work right with jquery 1.3.1)?

http://code.google.c…/detail?id=2#c1

Quote

For me, since switching to jQuery 1.3.1 the radio inputs are no longer being replaced

by stars. Unlike the above post, the rest of my page is unaffected

qiang · February 6, 2009, 6:33pm

I see. That could be the reason. I will check.

letscode · February 6, 2009, 6:34pm

Hmm, doesn't seem to work either. My inputs are not replaced by the javascript.

qiang · February 6, 2009, 7:10pm

Could you attach your complete HTML code here?

I actually didn't find problem of existing star rating js with jquery 1.3.1. Anyway, I upgraded it to 2.61. It still works fine.

letscode · February 6, 2009, 7:29pm

I e-mailed you the link.

letscode · February 6, 2009, 8:41pm

The problem is caused by some other inline javascript from the galleriffic plugin of jQuery:

<script type="text/javascript">


/*<![CDATA[*/








			document.write("<style type='text/css'>div.navigation{width:380px;float: left;}div.content{display:block;}</style>");








    var onmouseoutOpacity = 0.67;


			jQuery('#thumbs-adv ul.thumbs li').css('opacity', onmouseoutOpacity)


				.hover(


					function () {


						jQuery(this).not('.selected').fadeTo('fast', 1.0);


					},


					function () {


						jQuery(this).not('.selected').fadeTo('fast', onmouseoutOpacity);


					}


				);


    jQuery(document).ready(function() {


        var gallery = jQuery('#gallery-adv').galleriffic('#thumbs-adv', {


        delay:                  3000,


        numThumbs:              24,


        preloadAhead:           20, // Set to -1 to preload all images


        enableTopPager:         false,


        enableBottomPager:      true,


        imageContainerSel:      '#slideshow-adv',


        controlsContainerSel:   '#controls-adv',


        captionContainerSel:    '#caption-adv',





        loadingContainerSel:    '#loading-adv',


        renderSSControls:       true,


        renderNavControls:      true,


        playLinkText:           'Afspelen',


        pauseLinkText:          'Pauze',


        prevLinkText:           'Vorige',


        nextLinkText:           'Volgende',


        nextPageLinkText:       'Volgende &rsaquo;',


        prevPageLinkText:       '&lsaquo; Vorige',


        enableHistory:          false,


        autoStart:              false,


        onchange:               function(prevIndex, nextIndex) {


            jQuery('#thumbs-adv ul.thumbs').children()


                .eq(prevIndex).fadeTo('fast', onmouseoutOpacity).end()


                .eq(nextIndex).fadeTo('fast', 1.0);





           





        },


        onTransitionOut:        function(callback) {


            jQuery('#gallery-adv, #caption-adv').fadeOut('fast', callback);


        },


        onTransitionIn:         function() {


            jQuery('#gallery-adv, #caption-adv').fadeIn('fast');


        },


        onPageTransitionOut:    function(callback) {


            jQuery('#thumbs-adv ul.thumbs').fadeOut('fast', callback);


        },


        onPageTransitionIn:     function() {


            jQuery('#thumbs-adv ul.thumbs').fadeIn('fast');


        }


    });


});


        


/*]]>*/


</script>

But I have no idea how to fix this. :S

Total html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<meta name="language" content="en" />


<link rel="stylesheet" type="text/css" href="/foto/css/main.css" />


<link rel="stylesheet" type="text/css" href="/foto/css/form.css" />


<link rel="stylesheet" type="text/css" href="/foto/assets/f5bbae4b/rating/jquery.rating.css"/>


<link rel="stylesheet" type="text/css" href="/foto/assets/e359cd49/css/galleriffic.css"/>


<script type="text/javascript" src="/foto/assets/f5bbae4b/jquery.js"></script>


<script type="text/javascript" src="/foto/assets/f5bbae4b/jquery.dimensions.js"></script>


<script type="text/javascript" src="/foto/assets/f5bbae4b/jquery.metadata.js"></script>


<script type="text/javascript" src="/foto/assets/f5bbae4b/jquery.rating.js"></script>





<script type="text/javascript" src="/foto/assets/e359cd49/js/jquery.galleriffic.js"></script>


<script type="text/javascript">


/*<![CDATA[*/








			document.write("<style type='text/css'>div.navigation{width:380px;float: left;}div.content{display:block;}</style>");








    var onmouseoutOpacity = 0.67;


			jQuery('#thumbs-adv ul.thumbs li').css('opacity', onmouseoutOpacity)


				.hover(


					function () {


						jQuery(this).not('.selected').fadeTo('fast', 1.0);


					},


					function () {


						jQuery(this).not('.selected').fadeTo('fast', onmouseoutOpacity);


					}


				);


    jQuery(document).ready(function() {


        var gallery = jQuery('#gallery-adv').galleriffic('#thumbs-adv', {


        delay:                  3000,


        numThumbs:              24,


        preloadAhead:           20, // Set to -1 to preload all images


        enableTopPager:         false,


        enableBottomPager:      true,


        imageContainerSel:      '#slideshow-adv',


        controlsContainerSel:   '#controls-adv',


        captionContainerSel:    '#caption-adv',





        loadingContainerSel:    '#loading-adv',


        renderSSControls:       true,


        renderNavControls:      true,


        playLinkText:           'Afspelen',


        pauseLinkText:          'Pauze',


        prevLinkText:           'Vorige',


        nextLinkText:           'Volgende',


        nextPageLinkText:       'Volgende &rsaquo;',


        prevPageLinkText:       '&lsaquo; Vorige',


        enableHistory:          false,


        autoStart:              false,


        onchange:               function(prevIndex, nextIndex) {


            jQuery('#thumbs-adv ul.thumbs').children()


                .eq(prevIndex).fadeTo('fast', onmouseoutOpacity).end()


                .eq(nextIndex).fadeTo('fast', 1.0);





           





        },


        onTransitionOut:        function(callback) {


            jQuery('#gallery-adv, #caption-adv').fadeOut('fast', callback);


        },


        onTransitionIn:         function() {


            jQuery('#gallery-adv, #caption-adv').fadeIn('fast');


        },


        onPageTransitionOut:    function(callback) {


            jQuery('#thumbs-adv ul.thumbs').fadeOut('fast', callback);


        },


        onPageTransitionIn:     function() {


            jQuery('#thumbs-adv ul.thumbs').fadeIn('fast');


        }


    });


});


        


/*]]>*/


</script>


<title>Foto-album - test1</title>


</head>





<body>


<div id="page">





<div id="header">


<div id="logo">Foto-album </div>








<div id="mainmenu">





<ul>


<li><a href="/foto/index.php?r=home/index">Home</a></li>


<li><a href="/foto/index.php?r=home/contact">Contact</a></li>


<li><a href="/foto/index.php?r=user/login">Login</a></li>


<li><a href="/foto/index.php?r=user/register">Registreer</a></li>


<li><a href="/foto/index.php?r=album/">Albums</a></li>


</ul>


</div><!-- mainmenu -->


</div><!-- header -->





<div id="content">


	








<div id="gallery-adv" class="content">





    <div id="controls-adv" class="controls"></div>


    <div id="loading-adv" class="loader"></div>


    <div id="slideshow-adv" class="slideshow"></div>


    <div id="caption-adv" class="embox"></div>


</div>


				<div id="thumbs-adv" class="navigation">


					<ul class="thumbs noscript">





   


    <li id="24">





        <a class="thumb" href="/foto/photo/1233872401_dsc_1398.jpg"


        title="">


            <img src="/foto/photo/thumb/1233872401_dsc_1398.jpg" alt="" />


        </a>


        <div class="caption">


            <div class="download">


                <a href="/foto/photo/temp/1233872401_dsc_1398.jpg">Download origineel</a>


                <br />Stem: <span id="rating_24">


<input class="{split:2}" id="rating_24_0" value="1" type="radio" name="rating_24"/>





<input class="{split:2}" id="rating_24_1" value="2" type="radio" name="rating_24"/>


<input class="{split:2}" id="rating_24_2" value="3" checked="checked" type="radio" name="rating_24"/>


<input class="{split:2}" id="rating_24_3" value="4" type="radio" name="rating_24"/>


<input class="{split:2}" id="rating_24_4" value="5" type="radio" name="rating_24"/>


<input class="{split:2}" id="rating_24_5" value="6" type="radio" name="rating_24"/>


<input class="{split:2}" id="rating_24_6" value="7" type="radio" name="rating_24"/>


<input class="{split:2}" id="rating_24_7" value="8" type="radio" name="rating_24"/>


<input class="{split:2}" id="rating_24_8" value="9" type="radio" name="rating_24"/>


<input class="{split:2}" id="rating_24_9" value="10" type="radio" name="rating_24"/>


</span>            </div>





            <div class="image-title">graan</div>


            <div class="image-desc">24 Description


            <br />





</div>


        </div>


    </li>





   


    <li id="25">


        <a class="thumb" href="/foto/photo/1233872470_dsc_1290.jpg"


        title="">


            <img src="/foto/photo/thumb/1233872470_dsc_1290.jpg" alt="" />


        </a>


        <div class="caption">


            <div class="download">





                <a href="/foto/photo/temp/1233872470_dsc_1290.jpg">Download origineel</a>


                <br />Stem:             </div>





            <div class="image-title">bloempje</div>


            <div class="image-desc">25 Description


            <br />


</div>


        </div>


    </li>





   


    <li id="28">


        <a class="thumb" href="/foto/photo/1233929742_dsc_1278.jpg"


        title="">


            <img src="/foto/photo/thumb/1233929742_dsc_1278.jpg" alt="" />


        </a>


        <div class="caption">


            <div class="download">


                <a href="/foto/photo/temp/1233929742_dsc_1278.jpg">Download origineel</a>


                <br />Stem:             </div>





            <div class="image-title">rooot</div>


            <div class="image-desc">28 Description


            <br />


</div>


        </div>


    </li>





   


    <li id="29">


        <a class="thumb" href="/foto/photo/1233929743_dsc_1339.jpg"


        title="">





            <img src="/foto/photo/thumb/1233929743_dsc_1339.jpg" alt="" />


        </a>


        <div class="caption">


            <div class="download">


                <a href="/foto/photo/temp/1233929743_dsc_1339.jpg">Download origineel</a>


                <br />Stem:             </div>





            <div class="image-title">snowie</div>





            <div class="image-desc">29 Description


            <br />


</div>


        </div>


    </li>


	</ul>


				</div>











</div><!-- content -->





<div id="footer">


Copyright &copy; 2009 Jan Wiebe de Haan. Alle rechten voorbehouden<br/>








</div><!-- footer -->





</div><!-- page -->


<script type="text/javascript">


/*<![CDATA[*/


jQuery(document).ready(function() {


jQuery('#rating_24 > input').rating({'cancelValue':3});


});


/*]]>*/


</script>


</body>





</html>