I have Carousel with 4 images like given in the following image.
My Effort is given in following.
<div id="thumbCarousel" class="carousel slide">
<div class="carousel-inner">
<?php $i=0; foreach($this->partner_images as $sr){?>
<?php if($i==0){ ?><div class="item active"><?php } ?>
<?php if($i ==4){ ?><div class="item"><?php }?>
<div class="col-xs-3">
<a href="<?php echo $sr['url']; ?>">
<img src="<?php echo BASE_URL?>/partner-images/<?php echo $sr['name']?>" />
</a>
</div>
<?php if($i==3 or $i==7){ ?></div><?php }?>
<?php $i++; } ?>
</div>
<a class="thumbleft" href="#thumbCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="thumbright" href="#thumbCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span> </a>
</div>
</div>
Problem:
The problem is that it is working fine for 4 images and for 8 images, so when there are 4 or more picture are not showing properly. I want to do it automatically either images are even or odd.
Question:
My question is how i can show 4 or more images like shown in the images automatically ?
I try this and it is working fine.
<div id="thumbCarousel" class="carousel slide">
<div class="carousel-inner">
<?php $i=0; foreach($this->partner_images as $sr){?>
<?php if($i==0){ ?><div class="item active"><?php } ?>
<?php if($i % 2 == 0){ ?><div class="item"><?php }?>
<div class="col-xs-3">
<a href="<?php echo $sr['url']; ?>">
<img src="<?php echo BASE_URL?>/partner-images/<?php echo $sr['name']?>" />
</a>
</div>
<?php if($i % 4 != 0){ ?></div><?php }?>
<?php $i++; } ?>
</div>
<a class="thumbleft" href="#thumbCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="thumbright" href="#thumbCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span> </a>
</div>
</div>
Related
I want to read my "pdf files" in PHPMYSQL tables. So I found the script from some forums and it's work fine in "localhost using XAMPP".
But When I deploy to website, it's not showing pdf files and all information after that line are missing.
I dont know what is the problem. Kindly someone can help me please...
<div class="page-title">
<div class="container">
<div class="row">
<div class="col-md-12">
<ol class="breadcrumb">
<li>Home</li>
<li>Journals</li>
<li><?php echo $title; ?></a></li>
</ol>
</div>
</div>
</div>
</div>
<section class="block-wrapper">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-12">
<div class="single-post">
<div class="post-title-area">
<a class="post-cat" href="<?php echo $post_cat_link; ?>"><?php echo $category; ?></a>
<h2 class="post-title">
<?php echo $title; ?>
</h2>
<div class="post-meta">
<span class="post-date"><i class="feather icon-clock"></i> <?php echo $post_date; ?></span>
<span class="post-comment"><i class="feather icon-eye"></i>
<span><?php echo $post_views; ?></span></span>
</div>
<div class="div1">
<?php echo "View PDF File for Journal Details" ?>
<?php
mysql_connect('localhost','adminjournal','adminjournalikat');
mysql_select_db('journal');
// mysql_connect('localhost','root','');
// mysql_select_db('journal');
$sql="SELECT pdf from tbl_blog_posts";
$query=mysqli_query($conn,$sql);
while ($info=mysqli_fetch_array($query)) {
?>
<embed type="application/pdf" src="pdf/<?php echo $info['pdf'] ; ?>" width="900" height="500">
<?php
}
?>
</div>
</div>
<div class="post-content-area">
<div class="entry-content">
<?php
if ($yt_vid == "") {
?>
<div class="post-media post-featured-image">
<img src="images/blog/<?php echo $media; ?>" class="img-fluid single_blog" alt="">
</div>
<?php
}else{
?>
<div class="post-media post-video">
<div class="embed-responsive">
<iframe src="https://www.youtube.com/embed/<?php echo $yt_vid; ?>"></iframe>
</div>
</div>
<?php
}
?>
<?php echo $cont?>
<br></br>
</div>
<div class="tags-area clearfix">
<div class="post-tags">
<span>Tags:</span>
<?php
$post_tags = explode(",",$tags);
foreach ($post_tags as $tag) {
if (WBCleanURL == "true") {
$st1 = preg_replace("/[^a-zA-Z]/", " ", $tag);
$st2 = preg_replace('/\s+/', ' ', $st1);
$tag_title = strtolower(str_replace(' ', '-', $st2));
$tag_link = "tags/$tag_title";
}else{
$tag_link = "pages/tags?key=$tag_title";
}
?><?php echo $tag; ?><?php
}
?>
</div>
</div>
<div class="share-items clearfix">
<ul class="post-social-icons unstyled">
<li class="facebook">
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $sharelink; ?>">
<i class="fa fa-facebook"></i> <span class="ts-social-title">Facebook</span></a>
</li>
<li class="twitter">
<a href="https://twitter.com/intent/tweet?url=<?php echo $sharelink; ?>">
<i class="fa fa-twitter"></i> <span class="ts-social-title">Twitter</span></a>
</li>
<li class="gplus">
<a href="mailto:info#example.com?&subject=&cc=&bcc=&body=<?php echo $sharelink; ?>">
<i class="fa fa-envelope"></i> <span class="ts-social-title">Email</span></a>
</li>
</ul>
</div>
</div>
</div>
thanks for your clue that this issue because of overlapping. Finally I found out the script problem... below is the right one...
Thanks a lot and Wish You All The Best
<?php echo $cont?>
<br></br>
<?php echo "PDF File Details for Journal" ?>
<br><h4><?php echo $title;?> </h4>
I'd like to include an IF statement into my highlights.phtml file where I can check if my custom attribute (named preorder) has been selected or not. As the name indicates, this custom attribute can be set on a product to signify if it can be pre-ordered. How can I access this variable/attribute in the highlights slider code, below? It doesn't seem to be part of the $products array?
<?php $products = $this->getHighlightedProducts() ?>
<?php if (is_array($products) && count($products)): ?>
<div class="block block-related">
<div class="block-title">
<h2><?php echo $this->__('Highlighted Products') ?></h2>
</div>
<div class="block-content">
<div class="product-carousel">
<div class="product-carousel">
<ul class="highlighted-products-slider slider">
<?php $limit = 6; ?>
<?php foreach ($products as $product): ?>
<li class="item">
<div class="product" >
<a class="product-image" href="<?php echo $this->escapeHtml($product['url']) ?>">
<img src="<?php echo $this->escapeHtml($product['image']) ?>">
</a>
<div class="product-details">
<p class="product-name">
<?php echo $this->escapeHtml($product['name']) ?>
</p>
<?php echo $product['price'] ?>
</div>
<div class="actions">
<a href="<?php echo $this->escapeHtml($product['add_to_cart_url']) ?>">
<button class="button btn-cart"><?php echo $this->__('Add to Cart') ?></button>
</a>
</div>
</div>
</li>
<?php
if(++$ct >= $limit)
break;
?>
<?php endforeach ?>
<?php endif ?>
</ul>
</div>
</div>
</div>
</div>
Get the attribute with the code i added, then use it for your logic. What you want to do with the attribute, you can do now. But $product['id'] has to exist!
You need the product id for this to work, else maybe the SKU.
Hope to help.
<?php $products = $this->getHighlightedProducts() ?>
<?php if (is_array($products) && count($products)): ?>
<div class="block block-related">
<div class="block-title">
<h2><?php echo $this->__('Highlighted Products') ?></h2>
</div>
<div class="block-content">
<div class="product-carousel">
<div class="product-carousel">
<ul class="highlighted-products-slider slider">
<?php $limit = 6; ?>
<?php foreach ($products as $product): ?>
<?php
$productToCheck= Mage::getModel('catalog/product')->load($product['id']);
//use this variable
$variable = $productToCheck->getData('preorder');
//use this variable when attribute is a dropdown
$variableIfItsADropdown = $product->getAttributeText('preorder');
?>
<li class="item">
<div class="product" >
<a class="product-image" href="<?php echo $this->escapeHtml($product['url']) ?>">
<img src="<?php echo $this->escapeHtml($product['image']) ?>">
</a>
<div class="product-details">
<p class="product-name">
<?php echo $this->escapeHtml($product['name']) ?>
</p>
<?php echo $product['price'] ?>
</div>
<div class="actions">
<a href="<?php echo $this->escapeHtml($product['add_to_cart_url']) ?>">
<button class="button btn-cart"><?php echo $this->__('Add to Cart') ?></button>
</a>
</div>
</div>
</li>
<?php
if(++$ct >= $limit)
break;
?>
<?php endforeach ?>
<?php endif ?>
</ul>
</div>
</div>
</div>
</div>
Hello i am trying to display 3 post item of bootstrap carousel in Microweber. I am trying my luck here as not much info can be found in microweber as i am stuck for a few days. Here is my code.
<?php if (!empty($data)): ?>
<script>mw.require("<?php print $config['url_to_module']; ?>css/style.css", true); </script>
<?php $rand = 'item_carousel_'.$params['id']; $id = 'carousel_'.$params['id']; ?>
<div id="<?php print $id; ?>" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php $count = -1; foreach($data as $item): ?>
<?php $count++; ?>
<div class="carousel-item <?php if($count == 0){ print 'active ';} ?>">
<div class="col-12 col-md-4">
<div class="card mb-2">
<?php if($item['tn_image']): ?>
<?php endif; ?>
<div class="card-body">
<h4 class="text-center card-title"><?php print $item['title'] ?></h4>
<p class="card-text"><?php print $item['description']; ?></p>
</div>
</div>
</div>
</div>
<?php endforeach ; ?>
</div>
<!--Controls-->
<a class="carousel-control-prev " href="#<?php print $id; ?>" role="button" data-slide="prev">
<span class="fas fa-chevron-circle-left fa-2x" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#<?php print $id; ?>" role="button" data-slide="next">
<span class="fas fa-chevron-circle-right fa-2x" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
</div>
<?php else : ?>
<?php endif; ?>
Currently it is display like this
But i want it to display 3 image in a row and using the control to rotate the next 3 post item.
1 - which template you are using?
2 - you can use slidesToShow: 3 in slick slider init
For example:
$('.multiple-items').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
What I have
I have a repeater setup in Advanced custom fields and bootstrap slider in my code.
What I trying to achieve
I would like to add a image and text in my WordPress repeater and have it populate my slider. so that each new repeater row has its own image and text.
I have the image working, but not the text so at the moment every slide has its own image, but for some reason I have all the text displaying for each slide.
bellow is the layout of my ACF repeater
bellow is my current slider
so I have 3 images that show on the correct slides but as you can see my content is showing all not just the content related for the slide
My code
<?php
$sliderImages = get_field('section_8_slider');
$count = 0;
$section = "section_8_";
$order = array();
?>
<div class="col-lg-8 mb-3">
<div class="carousel-inner">
<?php foreach ($sliderImages as $imgNumber => $image): ?>
<div class="carousel-item<?php if ($imgNumber === 0) : ?> active<?php endif ?>">
<img src="<?= $image['image']['url'] ?>" alt="<?= $image['image']['alt'] ?>">
<?php if (have_rows($section . 'slider')):
while (have_rows($section . 'slider')):
the_row(); ?>
<?php
foreach ($sliderImages as $i => $row)
if ($sliderImages ): ?>
<div class="carousel-text-block">
<h4 class="mb-1"> <?php echo $row['content_title']; ?></h4>
<p class="small m-0"> <?php echo $row['content']; ?></p>
</div>
<?php endif; ?>
<?php endwhile;
endif; ?>
</div>
<?php endforeach ?>
</div>
<a class="carousel-control-prev" href="#carousel_03" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
<a class="carousel-control-next" href="#carousel_03" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
</div>
You are looping each field 2 times. You could use get_sub_field() in order to simplify your code, try something like this:
<div class="carousel-inner">
<?php if (have_rows('section_8_slider')):
while (have_rows('section_8_slider')): the_row();
$image = get_sub_field('image');
$content_title = get_sub_field('content_title');
$content = get_sub_field('content');?>
<div class="carousel-item">
<img src="<?= $image['url'] ?>" alt="<?= $image['alt'] ?>">
<div class="carousel-text-block">
<h4 class="mb-1"> <?= $content_title;?></h4>
<p class="small m-0"> <?= $content;?></p>
</div>
</div>
<?php endwhile;
endif; ?>
Hope it helps
I have managed to solve it myself, i was close, please see answer bellow
<div class="carousel-inner">
<?php foreach ($sliderImages as $imgNumber => $image): ?>
<div class="carousel-item<?php if ($imgNumber === 0) : ?> active<?php endif ?>">
<img src="<?= $image['image']['url'] ?>" alt="<?= $image['image']['alt'] ?>">
<div class="carousel-text-block">
<h4 class="mb-1"> <?php echo $image['content_title']; ?></h4>
<p class="small m-0"> <?php echo $image['content']; ?></p>
</div>
</div>
<?php endforeach ?>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have the following PHP code, which dynamically generates content:
<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<?php foreach ($this->getItems() as $_item): ?>
<div class="col-sm-3">
<a class="product-image" href="<?php echo $_item->getProductUrl() ?>" title="<?php echo $this->escapeHtml($_item->getName()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')->resize(75); ?>" width="75" height="75" alt="<?php echo $this->escapeHtml($_item->getName()) ?>" /></a>
<div class="product-details">
<h3 class="product-name"><?php echo $this->escapeHtml($_item->getName()) ?></h3>
<?php echo $this->getPriceHtml($_item, true) ?>
<button type="button" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Add to Cart')) ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_item) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
<ul class="add-to-links">
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<li><?php echo $this->__('Add to Wishlist') ?></li>
<?php endif; ?>
<?php if($_compareUrl=$this->getAddToCompareUrl($_item)): ?>
<li><span class="separator">|</span> <?php echo $this->__('Add to Compare') ?></li>
<?php endif; ?>
</ul>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
The above code outputs the following structure:
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-3">product1</div>
<div class="col-sm-3">product2</div>
<div class="col-sm-3">product3</div>
<div class="col-sm-3">product4</div>
<div class="col-sm-3">product5</div>
<div class="col-sm-3">product6</div>
.
.
.
etc..
</div>
</div>
</div>
I want to create this structure:
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-3">product1</div>
<div class="col-sm-3">product2</div>
<div class="col-sm-3">product3</div>
<div class="col-sm-3">product4</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-3">product1</div>
<div class="col-sm-3">product2</div>
<div class="col-sm-3">product3</div>
<div class="col-sm-3">product4</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-3">product1</div>
<div class="col-sm-3">product2</div>
<div class="col-sm-3">product3</div>
<div class="col-sm-3">product4</div>
</div>
</div>
.
.
.
etc...
</div>
How do I change the dynamic structure so they get what they want?
Thanks in advance!
In order to create the structure you want:
You need to put <div class="item active"> in the foreach loop as well, because in order to have many items, you want that to be repeated many times too.
You have to remove active from <div class="item active"> as it will be added to every item, while we only want it to be in the first one.
You have to create a checking variable, so that the class active is added to the first item only.
Your final code should look like:
<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
<div class="carousel-inner">
<?php
$i = 0; /* This is the checking variable */
$active; /* This is the variable containing the class 'active' */
foreach ($this->getItems() as $_item):
$i++; /* We increment the checking variable in each loop */
$active = ($i === 1) ? "active" : ""; /* We make the check */
?>
<div class="item <?php echo $active;?>">
<!-- The rest of your code as it is -->
</div>
<?php
endforeach;
?>
</div>
</div>
[EDIT]:
Considering your comment, in the case of wanting four products in each item, you would need to use another loop inside <div class = "row">.
The key part you are doing wrong in your code, however, that doesn't change, is that you don't loop the <div class = "item"> and that's way you have only one.
A preview of how your code inside <div class="item"> should be:
<div class="item <?php echo $active;?>">
<div class="row">
<?php
for ($i = 0; $i <= 4; ++$i):
?>
<div class="col-sm-3"><!-- The rest of the code --></div>
<?php
endfor;
?>
</div>
</div>
Try this:
<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<?php foreach ($this->getItems() as $key=>$_item): // add $key in for loop
if($key != 0 && $key % 4 == 0) { // just add this code - it will check if 4 records has been displayed re create row div...
echo '</div><div class="row">';
}
?>
<div class="col-sm-3">
<a class="product-image" href="<?php echo $_item->getProductUrl() ?>" title="<?php echo $this->escapeHtml($_item->getName()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')->resize(75); ?>" width="75" height="75" alt="<?php echo $this->escapeHtml($_item->getName()) ?>" /></a>
<div class="product-details">
<h3 class="product-name"><?php echo $this->escapeHtml($_item->getName()) ?></h3>
<?php echo $this->getPriceHtml($_item, true) ?>
<button type="button" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Add to Cart')) ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_item) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
<ul class="add-to-links">
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<li><?php echo $this->__('Add to Wishlist') ?></li>
<?php endif; ?>
<?php if($_compareUrl=$this->getAddToCompareUrl($_item)): ?>
<li><span class="separator">|</span> <?php echo $this->__('Add to Compare') ?></li>
<?php endif; ?>
</ul>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>