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.
Related
i have a website in which i used carousel sliders to display images and its values, I have 3 carousel in my homepage, 3 of them have same code, however the first carousel is not displaying name and price like the 2nd and 3rd carousel:
as you can see in the image
the code for this carousel is below:
<section class="carousel_sec">
<div class="container">
<div class="row ">
<h3 class="carousel_heading">Trending Birthday Cakes <button class="pull-right"><span>VIEW ALL</span><!-- <span class="visible-xs">>></span> --></button></h3>
<hr>
<div class="carou">
<div class="demo">
<ul id="landing_products1">
<?php foreach($trending_products1 as $key=>$val) { ?>
<li>
<div class="item">
<div class="pad15 content_div">
<div class="carou_thumb">
<img class="st_img" src="<?php echo ADMIN_IMG.'cakes/'.$val['image'][0]['cake_image'];?>" alt="<?php echo $val['cake_name']; ?>" />
<img class="nd_img" src="<?php echo ADMIN_IMG.'cakes/'.$val['image'][0]['cake_image'];?>" alt="<?php echo $val['cake_name']; ?>" />
<p>
<?php echo $val['cake_name']; ?>
</p>
<?php
$btp_price=0;$offer_price=0;
$btp_price=$val['price'][0]['btp_price'];
$offer_price=$val['price'][0]['offer_price'];
?>
<div class="price text-center" style="width:100%;float:left;">
<span class="amount" style="color:#f2136e;font-size:14px;">
<?php echo PRICE_UNIT;?><?php echo $offer_price;?>
</span> (
<s> <?php echo $btp_price;?></s>)
<span> </span>
<br>
</div>
<!--<br><span><?php echo PRICE_UNIT;100; ?></span></p>-->
</div>
</div>
</div>
</li>
<?php } ?>
</ul>
</div>
</div>
</div>
</div>
</section>
<?php } ?>
while inspecting in browser the value is showing, the live URL is enter link description here
can anyone please tell me what could be wrong here, thanks in advance
You'll need to tweak the css to reveal the content that is hidden.
To push you in the direction, see the improvement with:
#landing_products1 {
height: 330px;
margin-top: -65px;
}
I don't know how responsive you need to be with your UI, so let's call this a temporary fix. The first carousel's dimensions don't perfectly match the others, so I'll leave the fine tuning to you.
It also appears that you have some js and css issues to mop up.
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 10 images of each brand and want to display brand by brand with there press releases images.
Example:
Product 1:
press release_image1,press release_image2,press release_image3 so on..
Product 2:
press release_image1,press release_image2,press release_image3 so on..
Product 3:
press release_image1,press release_image2,press release_image3 so on..
<?php foreach($press as $p){ ?>
<div class="header">
<h1 class=''>
<a href="<?php echo base_url('index.php/brand/view')."/".$p->brand_id;?>">
<?php
echo $p->brand_name;
?>
</a>
</h1>
</div>
<section id="portfolio-preview-items" class="row four-cols rows_1">
<?php //$row = $this->dashboard->get_press_release($id);
?>
<!-- Portfolio Normal Mode -->
<div class="portfolio-item design web-design v3" data-id="354" style="height: 475px; margin-bottom: 20px;">
<div class="he-wrap tpl2">
<a href="<?php echo base_url('assets/files/press_release') . '/' . $p->press_image; ?>" class="image-614" data-lightbox="event_img" data-title="<?php echo $p->press_title; ?>" >
<img style="cursor:pointer;" src="<?php echo base_url('assets/files/press_release') . '/' . $p->press_image; ?>" alt="">
</a>
<div class="shape4"></div>
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<div class="center-bar v1">
<a href="<?php echo base_url('index.php/brand/view').'/'.$p->brand_id; ?>" class="link a0" data-animate="zoomIn">
<i class="moon-link-4"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Normal Mode End -->
</section>
<?php } ?>
You can combine id and particular images(concat by ',') from mysql query.
then in php code u can use explode and implode to display each images
I am starting out with PHP for a WordPress and have written some code to put some social network icons in the footer. The way I have done it works, I'm simply calling the content of social network URL stored in the DB and if there is something the icon/link in the footer. But looks very inefficient to me, here is the code, does anyone know how to make it more efficient.
<?php
$social1 = of_get_option('fab_social_twitter_url');
$social2 = of_get_option('fab_social_facebook_url');
$social3 = of_get_option('fab_social_linkedin_url');
?>
<!-- divs for right social network icons column -->
<div class="eight columns">
<div class="social">
<ul>
<?php
if(!empty($social1)) {
?>
<li><img src="<?php echo of_get_option('fab_social_twitter_icon'); ?>" alt="Follow us on Twitter"></li>
<?php
}
?>
<?php
if(!empty($social2)) {
?>
<li><img src="<?php echo of_get_option('fab_social_facebook_icon'); ?>" alt="Follow us on Facebook"></li>
<?php
}
?>
<?php
if(!empty($social3)) {
?>
<li><img src="<?php echo of_get_option('fab_social_linkedin_icon'); ?>" alt="Follow us on Linkedin"></li>
<?php
}
?>
</ul>
</div>
</div>
Maybe:
<!-- divs for right social network icons column -->
<div class="eight columns">
<div class="social">
<ul>
<?php
foreach (array("twitter","facebook","linkedin") as $option)
($tmp=of_get_option('fab_social_'.$option.'_url')) && (print('<li><img src="'.of_get_option('fab_social_'.$option.'_icon').'" alt="Follow us on '.ucfirst($option).'"></li>'));
?>
</ul>
</div>
</div>
From a performance point of view, I don't think that there is anything to optimize in here, three separate cases tested individually
<?php
$social1 = of_get_option('fab_social_twitter_url');
$social2 = of_get_option('fab_social_facebook_url');
$social3 = of_get_option('fab_social_linkedin_url');
$icon1 = of_get_option('fab_social_twitter_icon');
$icon2 = of_get_option('fab_social_facebook_icon');
$icon3 = of_get_option('fab_social_linkedin_icon');
?>
<!-- divs for right social network icons column -->
<div class="eight columns">
<div class="social">
<ul>
<?php if(!empty($social1)) { ?>
<li>
<a href="<?php echo $social1; ?>">
<img src="<?php echo $icon1; ?>" alt="Follow us on Twitter">
</a>
</li>
<?php } ?>
<?php if(!empty($social2)) { ?>
<li>
<a href="<?php echo $social2; ?>">
<img src="<?php echo $icon2; ?>" alt="Follow us on Facebook">
</a>
</li>
<?php } ?>
<?php if(!empty($social3)) { ?>
<li>
<a href="<?php echo $social3; ?>">
<img src="<?php echo $icon3; ?>" alt="Follow us on Linkedin">
</a>
</li>
<?php } ?>
</ul>
</div>
</div>
I am using this slider gallery. i have problem while showing thumbs of images.
i used while loop only on UL and li tags, when i end while loop after thumbs. it will show all images in main image box.. can any one tell me how i can use this gallery in my php code
<div class="image-gallery">
<?php if($pic_count > 0){ ?>
<div id="wowslider-container1">
<div class="ws_images">
<?php while(!$rs_img_gallery->EOF) { ?>
<ul>
<li><img src="<?php echo MYSURL;?>img.gallery/<?php echo $rs_img_gallery->fields['image'] ?>" alt="" id="wows1_0"/></li>
</ul>
<?php $rs_img_gallery->MoveNext();
} // end while(!$rs_dc_gallery->EOF) ?>
</div>
<div class="ws_thumbs">
<div>
<img src="<?php echo MYSURL;?>img.gallery/<?php echo $rs_img_gallery->fields['image'] ?>" alt="" width="120" height="90"/>
</div>
</div>
</div>
<?php }else{
echo "<div class='notification information png_bg' style='width:90%;'>
<div>
".$infomsg['msg164']."
</div>
</div>";
}?>
</div>
You should take the <UL> out of the while loop
<div class="ws_images">
<ul>
<?php while(!$rs_img_gallery->EOF) { ?>
<li>
<img src="<?php echo MYSURL;?>img.gallery/<?php echo $rs_img_gallery->fields['image'] ?>" alt="" id="wows1_0"/>
</li>
<?php
$rs_img_gallery->MoveNext();
} // end while(!$rs_dc_gallery->EOF)
?>
</ul>
</div>