Jquery popup slider using codeigniter.

Jquery Popup Slider using lightbox plugin

Most of the developers need sliders for their website; in previous article we created Carousel slider using codeigniter, now we will create jquery popup slider using codeigniter.

If you are looking web hosting to host your codeigniter website, Sign Up for dreamhost web hosting services, which offers best services. There is special promo code for eknowledgetree readers please click below link to avail offer.
Read:

• How to avail 47 discount dreamhost promo code

Now let’s create a controller function to fetch images from database in codeigniter to display slider.

<?php   
if (!defined('BASEPATH')) exit('No direct script access allowed');
?>
<?php
class User extends CI_Controller {
public $data;
	public function __construct()
	{
	//Core controller constructor
	parent::__construct();
	$this->load->library('form_validation');
	 $this->load->library("pagination");
	}
public function usedcardetails($userid,$autoid)
{
   $userId=$this->input->post($userid);
   $data['query']=$this->db->get_where('ektree_userorsellcar', array('user_id' => $userid,'auto_id'=> $autoid));
  
  $this->settemplate->userinner("user/usedcardisplayinfo.php",$data);
}
}
?>

In above functionality, we are passing two parameters $userid and $autoid , If we logged in to the application we need to pass userid and autoid to the function to fetch user details and uploaded images to the slider. Here usercardisplayinfo.php is view which we are showing user details , which is loaded into userinner template, here we are adding image slider to userinner template directly. If you don’t need user details with slider, you can directly create a view under codeigniter view folder and place below code there and call the view in the place of usedcardesplyinfo.php.

Now let’s create image slider view in userinner template.
[wp-like-lock]

<script src="<?php echo base_url();?>js/lightbox.js"></script>
<?php
foreach($query->result() as $row)
{
?>
<div class="new-car-con">
<h5 class="head innerHead"> Cars Details </h5>
<div class="dvder"></div>
<div class="row pad6">
<div class=" txt-centre">
<!--<img src="<?php echo base_url();?>images/featred-car.jpg" width="282" height="166">-->

<?php if($row->uploadimages=='')
{?>
<img src="<?php echo base_url();?>images/defaultcar.jpg" id="carimg"  style="width:340px; height:220px !important" />
<?php }
else{ 

$data=$row->uploadimages;
$splittedstring=explode("~",$data); 
$countimgs=count($splittedstring);
$countimgs=$countimgs-1;
$arrayKeys = array_keys($splittedstring);
//

//$imgname=$value;
?>

<a class="example-image-link" href="<?php echo base_url();?>uploads/<?=trim($splittedstring[$arrayKeys[0]]); ?>" data-lightbox="example-set" data-title="Click the right half of the image to move forward."> 
<img class="example-image" src="<?php echo base_url();?>uploads/<?=trim($splittedstring[$arrayKeys[0]]); ?>"   style="width:340px; height:220px !important" /></a>
<?php  
foreach ($splittedstring as  $value) { 
if($value!=''){

if(trim($splittedstring[$arrayKeys[0]])!=$value)
{
?>

<a class="example-image-link" href="<?php echo base_url();?>uploads/<?=trim($value); ?>" data-lightbox="example-set" data-title="Click the right half of the image to move forward." style="width:340px; height:220px !important">  
<img   class="example-image" src="<?php echo base_url();?>uploads/<?=trim($value); ?>"  style="display:none"   style="width:340px; height:220px !important" /></a>
<?php
}
}
}
//echo "</br>".$countimgs." Images";

}?>

</div>
</div>
</div>

[/wp-like-lock]
In the above code I am adding if condition to check weather images are available or not. If no images are uploaded it will display default image in the view, removes hyperlink to image to restrict popup.
In else condition we will split the image using explode(), why we use explode()? In database while saving image names to table we separated with ~ symbol, while displaying images we need to remove those special symbols and store in $splittedstring.

Now count the no of images using php count() function, and store into $countimgs, now pass $splittedstring variable into array_keys() function to Return all the keys or a subset of the keys of an array, now display image using image tag.

If you are looking for wordpress themes to develop wordpress blog or website you can go for premium wordpress themes and Social share plugins for promotion, Here Studiopress offers lots of themes for you, while purchasing theme add Genesis framework to your theme which will help full in easy customization in design and single button to upgrade your wordpress versions.

Thanks for reading this article.