When I try to foreach, only first ID's photo comes on slider. After that every other user's ID is missing, doesn't show on slider.
Only one slider is visible.
How can I fix that?
<?php foreach( $query_results as $query_result ) { ?>
<div class="quick-view-modal modalopen" id="<?php echo $query_result["ID"] ?>" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg ad-modal">
<button class="close close-btn popup-cls" aria-label="Close" data-dismiss="modal" type="button"> <i class="fa-times fa"></i> </button>
<div class="modal-content single-product">
<div class="diblock">
<div class="col-lg-7 col-sm-12 col-xs-12">
<div class="clearfix"> </div>
<div id="single-slider" class="flexslider">
<ul class="slides">
<li><img alt="" src="<?php echo $query_result["picture"] ?>" /></li>
<li><img alt="" src="<?php echo $query_result["picture1"] ?>" /></li>
<li><img alt="" src="<?php echo $query_result["picture2"] ?>" /></li>
<li><img alt="" src="<?php echo $query_result["picture3"] ?>" /></li>
<li><img alt="" src="<?php echo $query_result["picture4"] ?>" /></li>
<li><img alt="" src="<?php echo $query_result["picture5"] ?>" /></li>
<li><img alt="" src="<?php echo $query_result["picture6"] ?>" /></li>
<li><img alt="" src="<?php echo $query_result["picture7"] ?>" /></li>
<li><img alt="" src="<?php echo $query_result["picture8"] ?>" /></li>
<li><img alt="" src="<?php echo $query_result["picture9"] ?>" /></li>
<li><img alt="" src="<?php echo $query_result["picture10"] ?>" /></li>
<li><img alt="" src="<?php echo $query_result["picture11"] ?>" /></li>
<li><img alt="" src="<?php echo $query_result["picture12"] ?>" /></li>
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<li><img alt="" src="<?php echo $query_result["picture"] ?>"></li>
<li><img alt="" src="<?php echo $query_result["picture1"] ?>"></li>
<li><img alt="" src="<?php echo $query_result["picture2"] ?>"> </li>
<li><img alt="" src="<?php echo $query_result["picture3"] ?>"></li>
<li><img alt="" src="<?php echo $query_result["picture4"] ?>"></li>
<li><img alt="" src="<?php echo $query_result["picture5"] ?>"></li>
<li><img alt="" src="<?php echo $query_result["picture6"] ?>"></li>
<li><img alt="" src="<?php echo $query_result["picture7"] ?>"></li>
<li><img alt="" src="<?php echo $query_result["picture8"] ?>"></li>
<li><img alt="" src="<?php echo $query_result["picture9"] ?>"></li>
<li><img alt="" src="<?php echo $query_result["picture10"] ?>"></li>
<li><img alt="" src="<?php echo $query_result["picture11"] ?>"></li>
<li><img alt="" src="<?php echo $query_result["picture12"] ?>"></li>
</ul>
</div>
</div>
<script src="js/nouislider.all.min.js"></script>
<script src="js/carousel.min.js"></script>
<script src="js/slide.js"></script>
Photos of first ID, visible slider: https://i.imgur.com/vBx0S3V.png
Photos of second ID, no slider visible: https://i.imgur.com/eD1RsjG.png
I think you can used only one id="single-slider" your javascript code other than can you put your js code, so I can give you a proper solution.
thanks
Related
I am using Fancyboxapp + Carousel for gallery portfolio. I wanted it adjust the height and responsiveness + add many images in this columns which I couldn't achieve. Have a look in the image
Here is my code:
const mainCarousel = new Carousel(document.querySelector("#mainCarousel"), {
infinite: false,
Navigation: false,
});
.carousel__slide {
width: 100%;
}
.cpad{
margin-bottom: 80px;
}
<div class="container">
<div class="carousel cpad mx-auto" id="mainCarousel">
<div class="carousel__slide">
<div class="row">
<div class="col-sm-6">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/1b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/1.png" />
</a>
</div>
<div class="col-sm-6">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/2b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/2.png" />
</a>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-6">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/3b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/3.png" />
</a>
</div>
<div class="col-sm-6">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/4b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/4.png" />
</a>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-6">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5.png" />
</a>
</div>
<div class="col-sm-6">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/6b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/6.png" />
</a>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-sm-6">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/7b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/7.png" />
</a>
</div>
<div class="col-sm-6">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/8b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/8.png" />
</a>
</div>
</div>
</div>
<div class="carousel__slide">
<div class="row">
<div class="col-sm-6">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5.png" />
</a>
</div>
<div class="col-sm-6">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/6b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/6.png" />
</a>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-sm-6">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/7b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/7.png" />
</a>
</div>
<div class="col-sm-6">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/8b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/8.png" />
</a>
</div>
</div>
</div>
</div>
</div>
I have a problem with „carousel” in Bootstrap 4. My carousel code is:
<div class="row">
<div class="col-12 col-lg-10 px-0">
<!--Carousel Wrapper-->
<div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel" data-interval="false">
<!--Slides-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<?php $image = get_field('img_a_4_zdjecia_1'); if( !empty($image) ): ?>
<img class="d-block m-auto" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>">
<div class="position-absolute zoomit"><span class="fas fa-search-plus"></span></div>
<?php endif; ?>
</div>
<div class="carousel-item">
<?php $image = get_field('img_a_4_zdjecia_2'); if( !empty($image) ): ?>
<img class="d-block m-auto" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>">
<div class="position-absolute zoomit"><span class="fas fa-search-plus"></span></div>
<?php endif; ?>
</div>
<div class="carousel-item">
<?php $image = get_field('img_a_4_zdjecia_3'); if( !empty($image) ): ?>
<img class="d-block m-auto" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>">
<div class="position-absolute zoomit"><span class="fas fa-search-plus"></span></div>
<?php endif; ?>
</div>
<div class="carousel-item">
<?php $image = get_field('img_a_4_zdjecia_4'); if( !empty($image) ): ?>
<img class="d-block m-auto" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>">
<div class="position-absolute zoomit"><span class="fas fa-search-plus"></span></div>
<?php endif; ?>
</div>
</div>
<!--/.Slides-->
<!--Controls-->
<a class="carousel-control-prev" href="#carousel-thumb" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Poprzednie</span>
</a>
<a class="carousel-control-next" href="#carousel-thumb" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Następne</span>
</a>
<!--/.Controls-->
</div>
</div>
<div class="col-12 col-lg-2 px-0">
<ol class="carousel-indicators">
<?php $image = get_field('img_a_4_zdjecia_1'); if( !empty($image) ): ?>
<li data-target="#carousel-thumb" data-slide-to="0" class="active"> <img class="d-block w-100" src="<?php echo $image['sizes']['medium']; ?>" class="img-fluid" alt="<?php echo $image['alt']; ?>"></li>
<?php endif; ?>
<?php $image = get_field('img_a_4_zdjecia_2'); if( !empty($image) ): ?>
<li data-target="#carousel-thumb" data-slide-to="1"><img class="d-block w-100" src="<?php echo $image['sizes']['medium']; ?>" class="img-fluid" alt="<?php echo $image['alt']; ?>"></li>
<?php endif; ?>
<?php $image = get_field('img_a_4_zdjecia_3'); if( !empty($image) ): ?>
<li data-target="#carousel-thumb" data-slide-to="2"><img class="d-block w-100" src="<?php echo $image['sizes']['medium']; ?>" class="img-fluid" alt="<?php echo $image['alt']; ?>"></li>
<?php endif; ?>
<?php $image = get_field('img_a_4_zdjecia_4'); if( !empty($image) ): ?>
<li data-target="#carousel-thumb" data-slide-to="2"><img class="d-block w-100" src="<?php echo $image['sizes']['medium']; ?>" class="img-fluid" alt="<?php echo $image['alt']; ?>"></li>
<?php endif; ?>
</ol>
</div>
<!--/.Carousel Wrapper-->
</div>
The big image changes after clicking in the small image (on the right side).
In detail, I mean class=”active”. It changes the colour of the border of the small image and there is everything all right. But what to do to change class=”active” in thumbnail when I switch the big image with the use of arrows (right or left)?
At present my code in JavaScript which adds and removes class=”active” is:
jQuery(function($) {
$('.carousel-indicators > li').click(function() {
$(this).siblings('li').removeClass('active');
$(this).addClass('active');
});
});
you can use jQuery keycode events check this for reference and keycode values from here
But what to do to change class=”active” in thumbnail when I switch the big image with the use of arrows (right or left)?
If I understood this correctly, you want to change the class="active" once your carousel changes image (using arrow keys). To do this you can use the bootstrap 4 events for the carousel.
$('#carousel-thumb').on('slide.bs.carousel', function () {
var indicatorId = $('.carousel-indicators > li.active').data('slide-to');
if (indicatorId === 3) {
indicatorId = 0;
} else {
indicatorId++;
}
$('.carousel-indicators > li.active').removeClass('active');
$('.carousel-indicators > li[data-slide-to="' + indicatorId + '"]').addClass('active');
});
This should do it. Just a quick explanation, the event slide.bs.carousel runs every time your carousel changes and it gets the id of the previous slide using the data-slide-to attribute and then adds one to it to go to the next and if the it was the last slide, it resets. If in the future you add more slides just change the indicatorId === 3 line to match the number of slides you have.
Also you should fix this mistake in your code data-slide-to="2" is repeated 2 times. Make the last one to be 3 so that this works.
Solved! :)
<script>
jQuery(function($) {
function initCarouselIndicators() {
$(".carousel-indicators[data-target]").each(function (i, indicators) {
var targetId = indicators.dataset.target;
if (targetId != "") {
var $carousel = $(targetId);
$carousel.bind('slide.bs.carousel', function (e) {
var $targetSlide = $(e.relatedTarget);
var index = $targetSlide.index();
$('.carousel-indicators[data-target="' + targetId + '"] li').removeClass('active')
$('.carousel-indicators[data-target="' + targetId + '"] li:nth-child(' + (index + 1) + ')').addClass('active');
});
}
});
}
initCarouselIndicators();
});
</script>
and it was missing data-target="#myCarousel" in class="carousel-indicators"
<ol class="carousel-indicators" data-target="#carousel-thumb">
this is my loop of posts:
<?php query_posts($query_string . '&showposts=8'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="large-4 columns">
<section class="post-home">
<section class="the_category">
<?php
$categories = get_the_category();
$separator = ' ';
$output = '';
if($categories){
foreach($categories as $category) {
$output .= '<span class="'.$category->cat_name.'">'.$category->cat_name.'</span>'.$separator;
}
echo trim($output, $separator);
}
?>
</section>
<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
<figure class="thumb-post" style="background: url('<?php echo $url; ?>') center center no-repeat;" ></figure>
<section class="post-home-content">
<h2><?php the_title(); ?></h2>
<p><?php the_field('sub_titulo'); ?></p>
<span class="link">Compartilhe</span>
<time class="post-time" datetime="<?php the_time('d-m-Y'); ?> <?php the_time('G:i'); ?>"><?php the_time('d/m/Y'); ?></time>
</section>
<ul class="social">
<li><img src="<?php bloginfo('template_url'); ?>/img/in.png" alt="" width="24" /></li>
<li><img src="<?php bloginfo('template_url'); ?>/img/gp.png" alt="" width="24" /></li>
<li><img src="<?php bloginfo('template_url'); ?>/img/fb.png" alt="" width="24" /></li>
<li><img src="<?php bloginfo('template_url'); ?>/img/tw.png" alt="" width="24" /></li>
</ul>
</section>
</div>
<?php endwhile; else: ?>
<p><?php _e("Nenhum chocolate encontrado! :(", ''); ?></p>
<?php endif; ?>
at below, i have this:
<div id="load-posts">
Load more posts
</div>
my question is: how i can load 6 more posts with ajax just clicking at the link "load more posts".
i've tried a lot of plugins, but, unsuccessful. :/
i want to do just like that: http://designerthemes.com/preview/?theme=adapt
try pbd-ajax-load-posts plugin.
And some fixes that I posted here to this plugin.
My code of "load more posts" on wordpress misses some pages. What's wrong with it?
I'm new to Jquery and Javascript. I have used the below code to display the images in a lightbox
<script type="text/javascript" src="<?php echo Yii::app()->theme->baseUrl; ?>/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->theme->baseUrl; ?>/css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
$(function() {
$('#album1 a').lightBox();
$('#album2 a').lightBox();
});
</script>
Below is the PHP code to display the images using the above script.
<div class="image-zoom" rel="lightbox" id="gallery">
<div id="album1" style="margin-right:18px;" rel="lightbox">
<?php
if (isset($albums[0])) {
$i = 1;
foreach ($albums[0]['photos'] as $photo) {
if ($i == 1) {
?>
<a href="<?= $photo ?>" rel="lightbox">
<img src="<?= $photo ?>" width="214" height="160" />
</a>
<?php
} else {
?>
<?php
}
$i++;
}
?>
<div class="zoom-magnifier" id="gallery">
<a href="<?= $photo ?>" rel="lightbox">
<img src="<?php echo Yii::app()->theme->baseUrl; ?>/images/zoom-icon.png" id="zoom"/>
</a>
<div id="more-text" align="left" ><?=$albums[0]['title']?></div>
</div>
<?php
}
?>
</div>
<div id="album2" rel="lightbox">
<?php
foreach (array(1, 0) as $album_id) {
if (isset($albums[$album_id])) {
$i = 1;
foreach ($albums[$album_id]['photos'] as $photo) {
if ($i == 1) {
?>
<a href="<?= $photo ?>" rel="lightbox">
<img src="<?= $photo ?>" width="214" height="160" />
</a>
<?php
} else {
?>
<?php
}
$i++;
}
?>
<div class="zoom-magnifier">
<a href="<?= $photo ?>" rel="lightbox">
<img src="<?php echo Yii::app()->theme->baseUrl; ?>/images/zoom-icon.png" id="zoom1"/>
</a>
<div id="more-text2" class="more-txt-link"><?=$albums[$album_id]['title']?></div>
</div>
<?php
break;
}
}
?>
</div>
</div>
This generates a magnifier image inside an image.
When I click on the image, lightbox slides the images from 1 to 6. But when I click on the magnifier(zoom-icon.png). the lightbox starts sliding from last but one image. How to make it start from image 1.
Try
<div class="image-zoom" rel="lightbox" id="gallery">
<div id="album1" style="margin-right:18px;" rel="lightbox">
<?php
if (isset($albums[0])) {
$i = 1;
foreach ($albums[0]['photos'] as $photo) {
if ($i == 1) {
?>
<a href="<?= $photo ?>" rel="lightbox">
<img src="<?= $photo ?>" width="214" height="160" />
</a>
<div class="zoom-magnifier" id="gallery">
<a href="<?= $photo ?>" rel="lightbox">
<img src="<?php echo Yii::app()->theme->baseUrl; ?>/images/zoom-icon.png" id="zoom"/>
</a>
<div id="more-text" align="left" ><?=$albums[0]['title']?></div>
</div>
<?php
} else {
?>
<?php
}
$i++;
}
}
?>
</div>
<div id="album2" rel="lightbox">
<?php
foreach (array(1, 0) as $album_id) {
if (isset($albums[$album_id])) {
$i = 1;
foreach ($albums[$album_id]['photos'] as $photo) {
if ($i == 1) {
?>
<a href="<?= $photo ?>" rel="lightbox">
<img src="<?= $photo ?>" width="214" height="160" />
</a>
<div class="zoom-magnifier">
<a href="<?= $photo ?>" rel="lightbox">
<img src="<?php echo Yii::app()->theme->baseUrl; ?>/images/zoom-icon.png" id="zoom1"/>
</a>
<div id="more-text2" class="more-txt-link"><?=$albums[$album_id]['title']?></div>
</div>
<?php
} else {
?>
<?php
}
$i++;
}
break;
}
}
?>
</div>
</div>
I'm new to Jquery and PHP. With the below code, I see the first image gets repeated twice, while the rest of the images are displayed properly.
<div class="image-zoom" rel="lightbox" id="gallery">
<div id="album1" style="margin-right:18px;" rel="lightbox">
<?php
if (isset($albums[0])) {
$i = 1;
foreach ($albums[0]['photos'] as $photo) {
if ($i == 1) {
?>
<a href="<?= $photo ?>" rel="lightbox">
<img src="<?= $photo ?>" width="214" height="160" />
</a>
<div class="zoom-magnifier" id="gallery">
<a href="<?= $photo ?>" rel="lightbox">
<img src="<?php echo Yii::app()->theme->baseUrl; ?>/images/zoom-icon.png" id="zoom"/>
</a>
<div id="more-text" align="left" ><?=$albums[0]['title']?></div>
</div>
<?php
} else {
?>
<?php
}
$i++;
}
}
?>
</div>
<div id="album2" rel="lightbox">
<?php
foreach (array(1, 0) as $album_id) {
if (isset($albums[$album_id])) {
$i = 1;
foreach ($albums[$album_id]['photos'] as $photo) {
if ($i == 1) {
?>
<a href="<?= $photo ?>" rel="lightbox">
<img src="<?= $photo ?>" width="214" height="160" />
</a>
<div class="zoom-magnifier">
<a href="<?= $photo ?>" rel="lightbox">
<img src="<?php echo Yii::app()->theme->baseUrl; ?>/images/zoom-icon.png" id="zoom1"/>
</a>
<div id="more-text2" class="more-txt-link"><?=$albums[$album_id]['title']?></div>
</div>
<?php
} else {
?>
<?php
}
$i++;
}
break;
}
}
?>
</div>
</div>
Below is the code of lightbox script.
<script type="text/javascript" src="<?php echo Yii::app()->theme->baseUrl; ?>/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->theme->baseUrl; ?>/css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
$(function() {
$('#album1 a').lightBox();
$('#album2 a').lightBox();
});
</script>
So if there are 5 images to be displayed, with the above code I get 6 images displayed with the first image repeated twice.
How can I avoid this