Hello, Yii Masters…
I use Yii Framework 1.0
I’m using BootStrap CGridview (‘ext.bootstrap.widgets.BootGridView’)
in that Cgridview, I have a field with mediumblob type named ‘foto’
(Those images uploaded into mediumBlob field NOT into images folder)
so far, I am able to display those images into my Bootstrap CGridView columns.
and I’ve been trying to enlarge them into a box when mouse hovers on each images using JQuery and CSS.
My CGridview ID is vbuku-grid and dataprovider is CActiveDataProvider
Everything works fine, the images appear in the box when mouse hover on each of them
BUT UNFORTUNATELY ONLY IN THE FIRST PAGE OF MY CGRIDVIEW…
in the second page and so on, that box is missing in action (lol) …
HELP , What am I missing 
…
Here is my code as well :
/* CGridview to display mediumblob images */
array
(
'name'=>'foto',
'header'=>'Photo',
'type'=>'raw',
'filter'=>'',
'headerHtmlOptions'=>array(
'style'=>'text-align: center;
color:FloralWhite;
font-size:14px;
font-family:Tahoma;
text-shadow:3px 3px 3px Black;
box-shadow:0 2px DarkSlateGray;
-webkit-box-shadow:0 2px DarkSlateGray;
-moz-box-shadow:0 2px DarkSlateGray;
background:-moz-linear-gradient(35deg, Gray,LightSlateGray,SlateGray,DimGray);
background:-webkit-linear-gradient(35deg, Gray,LightSlateGray,SlateGray,DimGray);'),
'value'=>'CHtml::image(Tblteman::model()->data_uri($data["file_name"],$data["file_type"],$data["foto"]),"DORE",
array("width"=>40,"height"=>40,"style"=>"border:2px outset Silver; box-shadow:1px 1px 5px DarkSlateGray;
cursor:pointer","class"=>"enlargephoto",
"name"=>$data["nama_teman"], "lang"=>CHtml::encode($data->idDivisi->nama_divisi),"title"=>Chtml::encode($data->idProyek->nmproyek)))'
),
// JavaScript Document to trigger mouse hover
$(document).ready(function()
{
$(".enlargephoto").hover(function()
{
var srcval = $(this).attr("src");
var names = $(this).attr("name");
var langs = $(this).attr("lang");
var titles = $(this).attr("title");
$('.photobox').remove();
$('<div class="photobox"></div>')
.html('<p class="names">'+names+'</p><img src='+srcval+'></img><p class="divisions">'+langs+'</p><p class="projects">'+titles+'</p>')
.appendTo('#vbuku-grid').hide().fadeIn('fast'); },function()
{
$('.photobox').remove();
});
});
/* CSS to make a box */
.photobox
{
top:10%;
left:30%;
visibility:visible;
opacity:1;
-moz-opacity:1;
position: absolute ;
padding:10px;
border:3px solid Silver;
background:
-moz-linear-gradient(30deg,LightPink,PapayaWhip,NavajoWhite,AliceBlue,AntiqueWhite,Wheat,Khaki,Linen,Ivory,BlanchedAlmond);
background:
-webkit-linear-gradient(30deg,LightPink,PapayaWhip,NavajoWhite,AliceBlue,AntiqueWhite,Wheat,Khaki,Linen,Ivory,BlanchedAlmond);
background:
-o-linear-gradient(30deg,LightPink,PapayaWhip,NavajoWhite,AliceBlue,AntiqueWhite,Wheat,Khaki,Linen,Ivory,BlanchedAlmond);
box-shadow:4px 4px 75px DarkSlateGray;
-webkit-box-shadow:4px 4px 75px DarkSlateGray;
-moz-box-shadow:4px 4px 75px DarkSlateGray;
}
.photobox img
{
width:400px;
height:400px;
border:4px inset Snow;
}
.photobox .names
{
line-height:15px;
font-family: 3Dumb ;
font-size:25px;
font-weight:bold;
text-shadow: 3px 3px 3px DarkSlateGray;
color:MidnightBlue;
text-align:center;
text-transform:uppercase;
}
.photobox .divisions
{
font-family: Tahoma, Geneva, sans-serif;
font-size:18px;
font-weight:bold;
text-shadow: 2px 2px 2px Black;
color:DarkRed;
text-transform:uppercase;
}
.photobox .projects
{
font-family: "Arial Black", Gadget, sans-serif;
font-size:18px;
font-weight:bold;
text-shadow: 3px 3px 3px DarkSlateGray;
color:Purple;
text-transform:uppercase;
}
/* function in model to encode mediumblob images */
public function data_uri($file, $mime, $contents)
{
$base64 = base64_encode($contents);
return "data:$mime;base64,$base64";
}
/* I also registered both JS and CSS files */
<?php Yii::app()->clientScript->registerCssFile(Yii::app()->assetManager->publish(Yii::getPathOfAlias('application.assets').'/lobi.css')) ?>
<?php Yii::app()->clientScript->registerScriptFile(Yii::app()->assetManager->publish(Yii::getPathOfAlias('application.assets').'/lobi.js')) ?>
Thank you so much.