I have implemented the prettyphoto plugin to show a photo slider in my website. In desktop version the images are shown very well, but in mobile version it is not shown as I expect.
In this image you can see how the images are shown in mobile version.
What I want to achieve is to remove the next and previous buttons that are below each image. I want to put these buttons on the left and right side of the images, and remove the small version of the slider that is shown in each image. I tried to do these changes but the buttons is not display good.
In this next image you can see it:
The buttons (prev and next) below images are still shown and the small slider is also shown. The buttons that should go to the left and right are in the wrong places.
I just only remove the buttons below images and the small slider. Only display the buttons prev and next but positioned left and right of each images.
The css code that I have is this:
/* Corrections to Gallery */
.tz-blogMasonry .tzBlogmasonry .blogMasonry-item .tz-blogInner .tz-BlogImage a.tz-ViewImage {
left: 50%;
margin-left: 9px;
}
.tz-ViewDetail {
display: none! important;
}
.fa-eye:before {
content: "+"! important;
font-size: 20px;
position: relative;
top: -4px;
font-weight: 600;
}
@media (max-width: 990px){
.pp_left
{
background: url(../images/prettyPhoto/default/sprite.png) -78px -127px no-repeat !important;
}
.pp_right {
background: url(../images/prettyPhoto/default/sprite.png) -112px -127px no-repeat !important;
}
.tzBlogmasonry{
text-align: center;
}
.col-md-4{
display: inline-block;
text-align: center;
width: 300px;
margin-bottom: -30px;
height: 300px;
overflow: hidden;
}
.pp_top, .pp_right, div.pp_default .pp_top .pp_middle, .pp_left, .pp_bottom, .pp_expand, div.pp_default .pp_bottom .pp_middle {
background: none! important;
}
#fullResImage {
height: auto! important;
width: 100%! important;
max-height: 500px! important;
}
div.pp_default .pp_content {
background-color: none! important;
width: 100%! important;
height: 100%! important;
}
div.pp_pic_holder {
width: 96%! important;
margin-top: -40px! important;
max-height: 500px! important;
text-align: center;
/*added now*/
left: 10px !important;
}
div.pp_gallery
{
/*display: none !important;*/
}
}
This is the HTML code:
<section class="tz-blogDefault">
<div class="container">
<div class="row" style="margin-bottom: 50px;">
<div class="tz_maniva_meetup_title text-center">
<h3 class="tz_meetup_title_raleway tz_title_meetup_normal"> Wir begrüssen dich herzlich in unseren schönen Zimmern. </h3>
<div class="tz_meetup_title_content">
<p>We welcome you warmly in our beautiful rooms.</p>
<p>Vă întâmpinăm călduros în camerele noastre frumoase.</p>
<p>Szeretettel várjuk Önt gyönyörű szobáinkban.</p>
</div>
</div>
</div>
<div class="tz-blogMasonry">
<div class="tzBlogmasonry">
<?php
$sql = "select * from tblgallery where is_deleted = 0 order by id desc";
$result = mysqli_query($connection,$sql);
$num_rows = mysqli_num_rows($result);
if($num_rows > 0){
while($row = mysqli_fetch_assoc($result)){
?>
<div class="blogMasonry-item col-md-4">
<div class="tz-blogInner">
<div class="tz-BlogImage">
<img src="admin/gallery/Thumbnail/<?php echo $row['renameimage']; ?>" alt="blog" style="height:200px;">
<div class="tz-ImageOverlay"></div>
<a class="tz-ViewImage" data-rel="prettyPhoto[worksGallery]" href="admin/gallery/<?php echo $row['originalname'];?>">
<i class="fa fa-eye"></i>
</a>
<a class="tz-ViewDetail" href="#">
<i class="fa fa-link"></i>
</a>
</div>
</div>
</div>
<?php }
}
?>
</div>
<!-- <div class="wp-pagenavi">
<span class="pages">Page 1 of 2</span>
<span class="current">1</span>
<a class="page larger" href="#">2</a>
<a class="nextpostslink" href="#" rel="next">»</a>
</div> -->
</div>
</div>
</section>