Develop Reference

FancyBoxapp + Carousel - Having problem in responsiveness and increasing images

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>

Dynamically split div columns

code i have written below is working fine but at the end of the looping the div is not closed its still opening a loop
<div class="carousel-inner">
<div class="item active">
<div class="row">
<?php
$recent_projects_sql="SELECT * from recent_projects where service_type='upholstery'";
$recent_projects_conn=mysql_query($recent_projects_sql) or die(mysql_error());
$i=0; $split=0;
while($projects=mysql_fetch_array($recent_projects_conn)) {
$i++;
?>
<div class="col-sm-3">
<div class="col-item" style="">
<div class="photo-shadow"></div>
<div class="photo">
<img src="admin/assets/images/uploads/projects/<?php echo $projects['attachment1']; ?>" alt="User one">
</div>
<div class="info">
<div class="name">
<?php echo $projects['service_name']; ?>
</div>
<div class="degination">
<?php echo $projects['sub_title']; ?>
</div>
<div class="buttons">
<a class="btn btn-theme ripple-effect" href="#">View More</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<?php
$split++;
if ($split % 4 == 0){
echo '</div></div><div class="item"><div class="row">';
}
}
?>
</div>
</div>
</div>
The Div has splited very well but in end of the loop div has not been closed. Thats only the problem please provide me the help to sort out the problem
When I inspect the element the last loop will show at the given result as follows:
<div class="col-sm-3">
<div class="col-item">
<div class="photo-shadow"></div>
<div class="photo">
<img src="admin/assets/images/uploads/projects/1557301934.jpg" alt="User one">
</div>
<div class="info">
<div class="name">UPHOLSTERY</div>
<div class="degination">UPHOLSTERY</div>
<div class="buttons">
<a class="btn btn-theme ripple-effect" href="#">View More</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div></div><div class="item"><div class="row">
I want to remove the two opening div's as dynamically. How can i set this to remove opened div's at then end of the looping

You can do this:
<div class="carousel-inner">
<?php
$recent_projects_sql="SELECT * from recent_projects where service_type='upholstery'";
$recent_projects_conn=mysql_query($recent_projects_sql) or die(mysql_error());
$i=0; $split=0;
while($projects=mysql_fetch_array($recent_projects_conn)) {
$i++;
?>
<div class="item <?php if($i==1) echo "active";?>">
<div class="row">
<div class="col-sm-3">
<div class="col-item" style="">
<div class="photo-shadow"></div>
<div class="photo">
<img src="admin/assets/images/uploads/projects/<?php echo $projects['attachment1']; ?>" alt="User one">
</div>
<div class="info">
<div class="name">
<?php echo $projects['service_name']; ?>
</div>
<div class="degination">
<?php echo $projects['sub_title']; ?>
</div>
<div class="buttons">
<a class="btn btn-theme ripple-effect" href="#">View More</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
</div>

How to remove "css classes" when the "a href" is empty

I've created a custom page template where i use WordPress posts to get images ( using feature images ) and I have made a gallery out of them.
<div class="box">
<img class="img" src="<?php the_post_thumbnail_url(); ?>" style="width:100%"/>
<div class="middle">
<div class="pyete-vete">
PYETE VETE
</div>
</div>
</div>
Now, what i want to achieve is to remove .middle class when the HREF is empty.
Tried a lot of i found on stack overflow but none of them was successful till now.
Thank you.

Considering that the_field("peoplelink") is empty:
<div class="<?php echo empty(the_field("peoplelink")) ? 'middle' : ''; ?>">
<div class="pyete-vete">
PYETE VETE
</div>
</div>

You could try this:
<div class="<?php if (the_field("peoplelink")){ echo 'middle'; } ?>">

You could do something like this:
$('.middle').filter(function() {
return $("a", this).attr("href") == "";
}).removeClass("middle");
Demo
$('.middle').filter(function() {
return $("a", this).attr("href") == ""
}).removeClass("middle")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<img class="img" src="<?php the_post_thumbnail_url(); ?>" style="width:100%"/>
<div class="middle">
<div class="pyete-vete">
PYETE VETE
</div>
</div>
</div>

You could do something like this (untested):
if ($(".middle .pyete-vete a").attr('href') != '') {
$(".middle").removeClass("middle");
}

Using the jQuery each function to loop through all a tags and check if href is empty.
$('a').each(function(e){
if($(this).attr('href')=='')
$(this).closest('.middle').remove()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<img class="img" src="<?php the_post_thumbnail_url(); ?>" style="width:100%"/>
<div class="middle">
<div class="pyete-vete">
PYETE VETE
</div>
</div>
<div class="middle">
<div class="pyete-vete">
PYETE
</div>
</div>
</div>

Get the id from a Img without the ID

i'm creating a simple bootstrap gallery thumbnail with images that are being called from database. I succeed in calling all the info, but now i'm struggling with getting the id of each image. This is my code:
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img id="<?php echo $row['ID_Category']?>" src="<?php echo $row['category_image'] ?>" alt="<?php $row['Categories'] ?>">
<div class="caption">
<h3><?php echo $row['ID_Category']?></h3>
<p><?php echo $row['Categories'] ?></p>
<p>Button Button</p>
</div>
</div>
And this is my function in javascript:
function getID(e)
{
var x = e.src;
alert(x);
}
But it is not working, how do I get the id of each image if is being called from a database?

Why don't you get in the same way you wrote?
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img id="<?php echo $row['ID_Category']?>" src="<?php echo $row['category_image'] ?>" alt="<?php $row['Categories'] ?>">
<div class="caption">
<h3><?php echo $row['ID_Category']?></h3>
<p><?php echo $row['Categories'] ?></p>
<p>Button Button</p>
</div>
</div>
function getID(id)
{
alert(id);
}

function getID(obj){
if(obj instanceof HTMLElement) {
alert(obj.getAttribute("data-target-id"));
}
else {
alert(obj);
}
}
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img id="1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/PM5544_with_non-PAL_signals.png/320px-PM5544_with_non-PAL_signals.png" alt="test test">
<div class="caption">
<h3>Example 1</h3>
<p>Using data-* attribute</p>
<p>Button</p>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img id="2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/PM5544_with_non-PAL_signals.png/320px-PM5544_with_non-PAL_signals.png" alt="test test">
<div class="caption">
<h3>Example 2</h3>
<p>Passing id directly</p>
<p>Button</p>
</div>
</div>

you can use Attribute tag in a tag and add onclick function to get your id value . i set category-id Attribute and in javascript code use this tag to get value
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img id="<?php echo $row['ID_Category']?>" src="<?php echo $row['category_image'] ?>" alt="<?php $row['Categories'] ?>">
<div class="caption">
<h3><?php echo $row['ID_Category']?></h3>
<p><?php echo $row['Categories'] ?></p>
<p>Button Button</p>
</div>
</div>
then this is script function
<script>
function getID(obj)
{
alert(obj.getAttribute("category-id"));
}
</script>
or add onclick function and send id in this function
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img id="<?php echo $row['ID_Category']?>" src="<?php echo $row['category_image'] ?>" alt="<?php $row['Categories'] ?>">
<div class="caption">
<h3><?php echo $row['ID_Category']?></h3>
<p><?php echo $row['Categories'] ?></p>
<p>Button Button</p>
</div>
</div>
this is script
<script>
function getID(id)
{
alert(id);
}
</script>
both will work.

get_footer(); and Google maps conflicts

My website doesn't display Google maps. The Console says that I include the API multiple times and I didn't.
After that I decided to delete all the javascript and use a Google Maps plugin, and I still having the same error.
I suspect that it has to be calling the get_footer(); function because if I delete >? from my footer.php, the map shows up but I lose the video on the header and the animation that I created for my nav.
Here's the code of my footer.php
</footer>
<!-- Map -->
<!-- Bootstrap JavaScript -->
<script src="<?php bloginfo('template_directory');?>/assets/js/jquery.js"></script>
<script src="<?php bloginfo('template_directory');?>/assets/js/bootstrap.min.js"></script>
<!-- Bx Slider JS -->
<script src="<?php bloginfo('template_directory');?>/assets/js/jquery.bxslider.min.js"></script>
<!-- Add JS counter lib -->
<script src="<?php bloginfo('template_directory');?>/assets/js/jquery.waypoints.min.js"></script>
<script src="<?php bloginfo('template_directory');?>/assets/js/jquery.counterup.min.js"></script>
<!-- Add wow js lib -->
<script src="<?php bloginfo('template_directory');?>/assets/js/wow.min.js"></script>
<!-- Custom Js -->
<script src="<?php bloginfo('template_directory');?>/assets/js/custom.js"></script>
<?php wp_footer(); >?
</body>
</html>
and page-home.php
</section>
<aside class="clients">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4">
<a href="https://shucksfishhouse.com" target="_blank">
<img src="<?php bloginfo('stylesheet_directory');?>/assets/images/shucks.jpg" class="img-responsive img-centered" alt="">
</a>
</div>
<div class="col-md-4 col-sm-4">
<a href="https://www.absolutelyfresh.com/" target="_blank">
<img src="<?php bloginfo('stylesheet_directory');?>/assets/images/abs.jpg" class="img-responsive img-centered" alt="">
</a>
</div>
<div class="col-md-4 col-sm-4">
<a href="https://baileysbreakfast.com/" target="_blank">
<img src="<?php bloginfo('stylesheet_directory');?>/assets/images/baileys.jpg" class="img-responsive img-centered" alt="">
</a>
</div>
</div>
</div>
</aside>
<?php get_footer();
Here is the website: http://dundeedell.com/