I have around 40 to 50 logos in my website and they all are in slider it takes to much time to see whole slider.
Here It is
Here my code...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="logo slider" style="padding-bottom:10px;">
<?php foreach ($logo $row): ?>
<div class="col-md-3 col-sm-6 col-xs-12 text-center sm-margin-nine-bottom xs-margin-fifteen-bottom">
<div class="">
<a href="#">
<img alt="" src="<?php echo $base_url; ?>uploads/<?php echo $row->image; ?>" style="height: 250px;width: 2000px;">
</a>
</div>
</div>
<?php endforeach; ?>
</section>
Now I want to show 2 rows of my logo section like This
Any suggestion how can i do it...
Thanks in advance...
You can achieve this by using modulo in foreach loop and join odd / even like this -
<section class="logo slider" style="padding-bottom:10px;">
<?php $i = 0; ?>
<?php foreach ($logo as $row): ?>
<?php if($i%2 == 0){ ?>
<div class="col-md-3 col-sm-6 col-xs-12 text-center sm-margin-nine-bottom xs-margin-fifteen-bottom">
<div class="">
<a href="#">
<img alt="" src="<?php echo $base_url; ?>uploads/<?php echo $row->image; ?>" style="height: 250px;width: 2000px;">
</a>
</div>
<?php } else { ?>
<div class="">
<a href="#">
<img alt="" src="<?php echo $base_url; ?>uploads/<?php echo $row->image; ?>" style="height: 250px;width: 2000px;">
</a>
</div>
</div>
<?php } $i++;
?>
<?php endforeach; ?>
I don't know much about php so please forgive for any syntax error.
I would suggest you split the array in half using the array_slice function.
eg:
$array_length = count($logo);
$slider_one = array_slice($logo, 0, $array_length / 2);
$slider_two = array_slice($logo, $array_length / 2);
You would then have two for each loops on the front end to display slider one and two.
Related
I want to make a photo gallery with 3 columns using Bootstrap. My gallery structure should be like this:
<div class="row">
<div class="col-4" id="box1">
<img class="img-fluid" src="images/image1.jpg">
<img class="img-fluid" src="images/image4.jpg">
</div>
<div class="col-4" id="box2">
<img class="img-fluid" src="images/image2.jpg">
<img class="img-fluid" src="images/image5.jpg">
</div>
<div class="col-4" id="box3">
<img class="img-fluid" src="images/image3.jpg">
<img class="img-fluid" src="images/image6.jpg">
</div>
</div>
Currently, I'm fetching the imageURL all in the box1 div. But how can I fetch the images information and organise them in such a way that the 1st image URL value goes as a src in the first div (box1) and the 2nd in the box2 div, 3rd in the box3 div and 4th again in box1 and so on. How can I loop this logic?
<div class="row">
<?php
$imageQuery = $mysqli->query("SELECT imageURL FROM images WHERE album = 'UK' ORDER BY date ASC") or die($mysqli->error);
while ($rowImage = $imageQuery->fetch_array()) { ?>
<div class="col-4" id="box1">
<img class="img-fluid" src="<?php echo $rowImage['imageURL']; ?>">
</div>
<?php } ?>
</div>
You should be able to chunk your array of images into 3 columns each with array_chunk(). Then you can use a normal foreach loop to iterate each one of the 3 columns separately.
<?php
$imageQuery = $mysqli->query("SELECT imageURL FROM images WHERE album = 'UK' ORDER BY date ASC");
$images = $imageQuery->fetch_all(MYSQLI_ASSOC);
$images = array_chunk($images, 3);
?>
<div class="row">
<div class="col-4" id="box1">
<?php foreach (array_column($images, 0) as $image): ?>
<img class="img-fluid" src="<?= $image['imageURL']; ?>">
<?php endforeach; ?>
</div>
<div class="col-4" id="box2">
<?php foreach (array_column($images, 1) as $image): ?>
<img class="img-fluid" src="<?= $image['imageURL']; ?>">
<?php endforeach; ?>
</div>
<div class="col-4" id="box3">
<?php foreach (array_column($images, 2) as $image): ?>
<img class="img-fluid" src="<?= $image['imageURL']; ?>">
<?php endforeach; ?>
</div>
</div>
I'm using data from MySQL database and display looks like this:
I want 3 articles in one line. The pictures below are made with HTML and CSS.
This is my code:
while($row=mysqli_fetch_array($result))
{?>
<div class="container">
<div class="row padding">
<div class="col-md-4 col-xs-12">
<div class="card">
<img class="card-img-top" src="<?php echo UPLPATH . $row['slika']; ?>">
<div class="card-body">
<h6 class="card-title">« <?php echo $row['naslov']; ?> »</h4>
</div>
<p class="ispod"><?php echo $row['datum'];?> </p>
</div>
</div>
</div>
</div>
<?php }?>
This seems to be a nice point in your project to implement a template engine. There a couple out there. I really liked working with typo3 fluid, but back to your question...
For your existing code, you can end your php code, use html and just echo the php variables you need.
<?php
// ... some php stuff
?>
<div class="container">
/* some html stuff * /
<img class="malaSlika" src="<?php echo UPLPATH . $row['slika']; ?>">
/* some more html stuff */
/* <?= is short for <?php echo
<img class="malaSlika" src="<?= UPLPATH . $row['slika']; ?>">
</div>
<?php
// ... some more php stuff
As said, maybe a template engine would help this even further.
Edit: To add div class="row" it could be something like this.
<?php ... ?>
<div class="container">
<?php
$i = 0;
while($row=mysqli_fetch_array($result)) :
if($i % 3 == 0) : ?>
<div class="row padding">
<?php endif; ?>
<div class="col-md-4 col-xs-12">
<div class="card">
<img class="card-img-top" src="<?php echo UPLPATH . $row['slika']; ?>">
<div class="card-body">
<h6 class="card-title">« <?php echo $row['naslov']; ?> »</h4>
</div>
<p class="ispod"><?php echo $row['datum'];?> </p>
</div>
</div>
<?php if($i % 3 == 0) : ?>
</div>
<?php endif; ?>
<?php
$i++;
endwhile;
?>
</div>
It will always get ugly at some point I think. This is a quick solution. the modulo (%) devides by the number and returns the rest value. so $i modulo 3 return 0 at 0, 3, 6, 9, 12 etc. Meaning it will always add the "row padding" div.
I have a CodeIgniter project which gets multiple data from server & display on webpage.
I wanna built something like that for all items
I have 100+ multiple items stored in database.
I wanna see first and second image when I enter website and then when I scroll page I wanna see third and fourth image and so on.
My Model:
public function getContent()
{
$query=$this->db->get('my_database');
return $query->result();
}
public function getCount(){
return $this->db->count_all('my_database');
}
My Controller:
function __construct()
{
parent::__construct();
$this->load->helper('url');
$this->load->database();
$this->load->library('session');
$this->load->model('My_Model');
}
public function index()
{
$contents['content']=$this->My_Model->getContent();
$contents['count']=$this->My_Model->getCount();
$this->load->view('_header');
$this->load->view('myview',$contents);
$this->load->view('_footer');
}
My View:
<?php for ( $i=0 ; $i < $count/2 ; $i++ ){ ?>
<div class="page-wrap">
<?php foreach($content as $cont){
if ($cont->item_id %2 == 1): ?>
<div class="item-left">
<a href="#">
<div class="text-part">
<h2><?php echo $cont->item_name ?></h2>
<p><?php echo $cont->item_text?></p>
</div>
<div class="image-part">
<img src="<?=base_url() ?><?php
echo $cont->item_url?>" width="500" height="275" alt="" />
</div>
</a>
</div>
<?php else: ?>
<div class="item-right">
<a href="#">
<div class="text-part">
<h2><?php echo $cont->item_name ?></h2>
<p><?php echo $cont->item_text?></p>
</div>
<div class="image-part">
<img src="<?=base_url() ?><?php
echo $cont->item_url?>" width="500" height="275" alt="" />
</div>
</a>
</div>
<?php endif; } ?>
</div> <?php } ?>
Actually these codes working perfectly when I have only 2 items.
But I have more than 100 items and my view is becoming like that
I wanna continue left, right after left, right again. But my codes are working like left, left after right, right.
I really need your help. I've tried multiple if, for loops but I couldn't make it right. There is some logic error in my view php codes but I can't find it.
I wonder what if I can get 2 items from database instead of 1 image at same time. But I couldn't get only 2 image at same time.
Just Replace this:
<?php else: ?>
<div class="item-left">
<a href="#">
<div class="text-part">
<h2><?php echo $cont->item_name ?></h2>
<p><?php echo $cont->item_text?></p>
</div>
<div class="image-part">
<img src="<?=base_url() ?><?php
echo $cont->item_url?>" width="500" height="275" alt="" />
</div>
</a>
</div>
with this:
<?php else: ?>
<div class="item-left">
<a href="#">
<div class="image-part">
<img src="<?=base_url() ?><?php
echo $cont->item_url?>" width="500" height="275" alt="" />
</div>
<div class="text-part">
<h2><?php echo $cont->item_name ?></h2>
<p><?php echo $cont->item_text?></p>
</div>
</a>
</div>
Updated Answer:
Replace your posted view code with this:
<?php $first = false; ?>
<?php foreach($content as $cont): ?>
<?php if ($cont->item_id % 2 == 1): ?>
<div class="page-wrap">
<div class="item-left">
<a href="#">
<div class="text-part">
<h2><?php echo $cont->item_name; ?></h2>
<p><?php echo $cont->item_text; ?></p>
</div>
<div class="image-part">
<img src="<?php echo base_url() . $cont->item_url;?>" width="500" height="275" alt="" />
</div>
</a>
</div>
<?php $first = true;?>
<?php else: ?>
<div class="item-right">
<a href="#">
<div class="image-part">
<img src="<?php echo base_url() . $cont->item_url;?>" width="500" height="275" alt="" />
</div>
<div class="text-part">
<h2><?php echo $cont->item_name; ?></h2>
<p><?php echo $cont->item_text; ?></p>
</div>
</a>
</div>
</div>
<?php $first = false;?>
<?php endif; ?>
<?php endforeach; ?>
<?php if($first): ?>
</div>
<?php endif;?>
Here's my HTML and PHP code but videos shown in vertical line, i use inline-block in CSS code but it doesn't work.
Please help me i am new to this.
HTML Code:
<div class="wrap">
<div class="grid">
<div class="preview">
<a title="<?php echo $video_title; ?>
"href="watch.php?videoid=<?php echo $video_id;?>">
<img src="videos/thumbnails/<?php echo $thumbnail;?> " />
</a>
<div class="time">00.00</div>
</div>
<div class="data">
<h3><a href="watch.php?videoid=<?php echo $video_id;?>">
<?php echo substr( $video_title,0,19);?>
<?php echo substr( $video_title,19,20);?>
</a>
</h3>
<div class="video-watch">
Watch Now
</div>
<div class="clear"> </div>
<div class="lables">
<p>Uploaded by:<a <?php if (isset($_SESSION['usr_name']))?>>
<?php echo $_SESSION['usr_name'] ;?>
</a>
</p>
</div>
<?php } }?>
</div>
</div>
Use an IFrame.
Here's an example of what it looks like:
<iframe width="420" height="315" src="https://www.youtube.com/embed/XGSy3_Czz8k">
i have a website live at the moment and the images desplay in sequence i want to add a little dynamics with the slider and make it so it randomly displays the images instead this is the basic code:
<div class="container slideshowContainer" style="width: 100%;">
<!-- BEGIN REVOLUTION SLIDER -->
<div class="fullwidthbanner-container slider-main margin-bottom-10">
<div class="fullwidthabnner">
<ul id="revolutionul" style="display:none;">
<!-- OUTPUT THE SLIDES -->
<?php
foreach($slides as $d){
?>
<li data-transition="fade" data-slotamount="8" data-masterspeed="700" data-delay="9400" data-thumb="assets/img/sliders/revolution/thumbs/thumb2.jpg">
<?php if($d['slideshow_image_sub_title_4'] != ""){ ?>
<a href="<?php echo $d['slideshow_image_sub_title_4']; ?>">
<img src="uploads/images/<?php echo $d['slideshow_image_file']; ?>" title="<?php echo $d['slideshow_image_title']; ?>" style="width: 100%;" />
</a>
<?php } else { ?>
<img src="uploads/images/<?php echo $d['slideshow_image_file']; ?>" title="<?php echo $d['slideshow_image_title']; ?>" style="width: 100%;" />
<?php } ?>
</li>
<?php
}
?>
</ul>
<div class="tp-bannertimer tp-bottom"></div>
</div>
</div>
<!-- END REVOLUTION SLIDER -->
</div>
how can i modify this to help randomly display images
please ask if i need to provide more info
Thanks in advance
Try this:
div class="container slideshowContainer" style="width: 100%;">
<!-- BEGIN REVOLUTION SLIDER -->
<div class="fullwidthbanner-container slider-main margin-bottom-10">
<div class="fullwidthabnner">
<ul id="revolutionul" style="display:none;">
<!-- OUTPUT THE SLIDES -->
<?php
shuffle($slides);
foreach($slides as $d){
?>
<li data-transition="fade" data-slotamount="8" data-masterspeed="700" data-delay="9400" data-thumb="assets/img/sliders/revolution/thumbs/thumb2.jpg">
<?php if($d['slideshow_image_sub_title_4'] != ""){ ?>
<a href="<?php echo $d['slideshow_image_sub_title_4']; ?>">
<img src="uploads/images/<?php echo $d['slideshow_image_file']; ?>" title="<?php echo $d['slideshow_image_title']; ?>" style="width: 100%;" />
</a>
<?php } else { ?>
<img src="uploads/images/<?php echo $d['slideshow_image_file']; ?>" title="<?php echo $d['slideshow_image_title']; ?>" style="width: 100%;" />
<?php } ?>
</li>
<?php
}
?>
</ul>
<div class="tp-bannertimer tp-bottom"></div>
</div>
</div>
<!-- END REVOLUTION SLIDER -->
</div>
http://php.net/manual/de/function.shuffle.php
I'm pretty sure there is a better answer than this, but the way I accomplish this is by naming the pictures using numbers, and using the following code to load them:
<img src="uploads/images/<?php.rand(1,9).".jpg";?>">
I hope this helps.