Previously I used thumbnail image and by clicking on the image the page redirects to another tab which shows complete image in the browser
I done using this
echo "<a target='_blank' href='$imagepath'>
<img class='limg' src='$imagepath' alt='Latest Image' style='width:150px'>
</a>";
Source link: https://www.w3schools.com/howto/howto_css_thumbnail.asp
Code as
<style>
img {
border: 1px solid #ddd; /* Gray border */
border-radius: 4px; /* Rounded border */
padding: 5px; /* Some padding */
width: 150px; /* Set a small width */}
/* Add a hover effect (blue shadow) */
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);}</style>
<body>
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest">
</a>
</body>
But I am not satisfied with this everyimage I need to open in seperate tabs and check them instead the fancy box looking cool to achieve this in YII download the extension from the below link
https://www.yiiframework.com/extension/fancybox
download the extension and copy the folder fancybox in app_folder/extensions/ location and give permissions to the folder (read and write).
if(strtoupper((string)$image)!='NIL'){
echo "<td>";
echo CHtml::link("<img src='$imagepath' alt='Latest Image' style='width:150px' /><p><b> Updated on $recentimgupd</b></p>","#oimg", array('id'=>'latestimg'));
/* echo '<div style="display:none">
<div id="data">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>'; */
echo "<div style='display:none'>;
<div id='oimg'>
<a target='_blank' href='$imagepath'><img src='$imagepath' alt='Latest Image' />
<p><b> Latest Photo Updated on $recentimgupd</b></p></a>
</div>;
</div>";
$this->widget('application.extensions.fancybox.EFancyBox', array(
'target'=>'a#latestimg',
'config'=>array(
'scrolling' => 'yes',
'titleShow' => true,
'mouseEnabled' => true,
/* 'prevEffect' => 'none',
'nextEffect' => 'none',
'closeBtn' => false,
'helpers' => (
'title' => ('type' => 'inside'),
'buttons' => (),
), */
),
)
);
/* echo "<a target='_blank' href='$imagepath'>
<img class='limg' src='$imagepath' alt='Latest Image' style='width:150px'>
</a>"; */
echo "</td>";
}else{
echo "<td><center>No Image</center></td>";
}
I done using this
echo "<a target='_blank' href='$imagepath'>
<img class='limg' src='$imagepath' alt='Latest Image' style='width:150px'>
</a>";
Source link: https://www.w3schools.com/howto/howto_css_thumbnail.asp
Code as
<style>
img {
border: 1px solid #ddd; /* Gray border */
border-radius: 4px; /* Rounded border */
padding: 5px; /* Some padding */
width: 150px; /* Set a small width */}
/* Add a hover effect (blue shadow) */
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);}</style>
<body>
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest">
</a>
</body>
But I am not satisfied with this everyimage I need to open in seperate tabs and check them instead the fancy box looking cool to achieve this in YII download the extension from the below link
https://www.yiiframework.com/extension/fancybox
download the extension and copy the folder fancybox in app_folder/extensions/ location and give permissions to the folder (read and write).
if(strtoupper((string)$image)!='NIL'){
echo "<td>";
echo CHtml::link("<img src='$imagepath' alt='Latest Image' style='width:150px' /><p><b> Updated on $recentimgupd</b></p>","#oimg", array('id'=>'latestimg'));
/* echo '<div style="display:none">
<div id="data">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>'; */
echo "<div style='display:none'>;
<div id='oimg'>
<a target='_blank' href='$imagepath'><img src='$imagepath' alt='Latest Image' />
<p><b> Latest Photo Updated on $recentimgupd</b></p></a>
</div>;
</div>";
$this->widget('application.extensions.fancybox.EFancyBox', array(
'target'=>'a#latestimg',
'config'=>array(
'scrolling' => 'yes',
'titleShow' => true,
'mouseEnabled' => true,
/* 'prevEffect' => 'none',
'nextEffect' => 'none',
'closeBtn' => false,
'helpers' => (
'title' => ('type' => 'inside'),
'buttons' => (),
), */
),
)
);
/* echo "<a target='_blank' href='$imagepath'>
<img class='limg' src='$imagepath' alt='Latest Image' style='width:150px'>
</a>"; */
echo "</td>";
}else{
echo "<td><center>No Image</center></td>";
}
