I've got a html/php website and I want to load multiple images in a slideshow when I click on one. How can I do this? This is my code now:
<div class="row">
<div class="col-md-4 no_padding">
<div class="single_image">
<img src="images/w1.jpg" alt="">
<div class="image_overlay">
View Full Project
<h2>Herent</h2>
<h4>Renovatie badkamer</h4>
</div>
</div>
</div>
<div class="col-md-4 no_padding">
<div class="single_image">
<img src="images/w2.jpg" alt="">
<div class="image_overlay">
View Full Project
<h2>Mechelen</h2>
<h4>Plaatsen van keuken</h4>
</div>
</div>
</div>
<div class="col-md-4 no_padding">
<div class="single_image">
<img src="images/w3.jpg" alt="">
<div class="image_overlay">
View Full Project
<h2>Antwerpen</h2>
<h4>Verbouwingen</h4>
</div>
</div>
</div>
</div>
I searched for some templates and answers but I can't start with it.. It looks not that difficult...
Related
I have an angular web page like this
this is the picture
I have no problem in web version but I want to display in another way in mobile version like title picture and text
this is an example of my code
<div class="our-company-history section-space--ptb_100">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="faq-custom-col">
<div class="section-title-wrap">
<h3 class="heading"><span class="text-color-primary">Développement Logiciel</span></h3>
<h6 class="text" [innerHtml]="cont.developement"></h6>
<p [innerHtml]="cont.developement_suite" class="text mt-30"></p>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="rv-video-section">
<div class="ht-banner-01 ">
<img class="img-fluid border-radus-5 animation_images one wow fadeInDown" src="assets/images/banners/logiciel4.png" alt="">
</div>
<div class="ht-banner-02">
<img width="188" height="115" class="img-fluid border-radus-5 animation_images two wow fadeInDown" src="assets/images/banners/logiciel3.png" alt="">
</div>
<div class="main-video-box video-popup">
<a class="video-link mt-30">
<div class="single-popup-wrap">
<img class="img-fluid border-radus-5" src="assets/images/banners/logicielb.png" alt="">
<div class="ht-popup-video video-button">
</div>
</div>
</a>
</div>
<div class="ht-banner-03">
<img width="188" height="115" class="img-fluid border-radus-5 animation_images three wow fadeInDown" src="assets/images/banners/logiciel1.png" alt="">
</div>
<div class="ht-banner-04">
<img width="190" height="190" class="img-fluid border-radus-5 animation_images four wow fadeInDown" src="assets/images/banners/logiciel2.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
I looked a lot for a method to display mode in another way in mobile version I need some help and thank you
With the given problem, I think its better if you use media queries to hide/show elements in browser. Further you may need to add few lines of html to change layout.
Or you can follow bootstrap grid layout / flex box to give it basic responsiveness.
there are a lot of references out there to solve this issue.
thumbnail screenshot also attachedi have created thumbnail in my dashboard.but these thumbnails are collapsing each others and the last thumbnail in a row showing up full screen.kindly help me
<div class="container">
<h1>Trending Groups</h1>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="image/2.png">
<p class="caption">outstanding</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="image/2.png">
<p class="caption">outstanding</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="image/2.png">
<p class="caption">outstanding</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="image/2.png">
<p class="caption">outstanding</p>
</div>
</div>
</div>
</div>
Try giving height and width to your image also dearch in google little bit and then post your questions on this that will help you.
I am trying to get two divs to appear side by side when looping through props (which happen to be an array) in VueJS.
When I use a single element, it works fine. Immediately when I add the v-for tag it doesnt appear side by side anymore.
<div class="row">
<div v-for="(data,index) in data" :key="index" class="col-12">
<div v-if="data.image" class="col-xs-12 col-md-3 image-div">
<img class="image" :src="data.image" alt="image">
</div>
<div class="col-xs-12 col-md-9">
<p class="title">{{data.title}}</p>
<p class="description">{{data.description}}</p>
<p class="bottom">
<span class="left"><span class="tag">{{data.tag}}</span><span class="time"> | {{data.time}}</span></span>
<span class="right"><v-icon>bookmark</v-icon><v-icon>share</v-icon></span>
</p>
</div>
</div>
</div>
Above is the code i am using
Seems you're just missing the required .row for grid nesting
<div v-for="(data,index) in data" :key="index" class="col-12">
<div class="row"> <!-- 👈 this one -->
<div v-if="data.image" class="col-xs-12 col-md-3 image-div">
<img class="image" :src="data.image" alt="image">
</div>
<div class="col-xs-12 col-md-9">
<!-- etc -->
</div>
</div>
</div>
I am a beginner with WordPress.
I have a HTML/BOOTSTARP "One page" template which has a gallery built with Lightbox CSS/JS.
Refer the template link here.
I have integrated this theme to WordPress and everything works fine.
Now, I would like to upload pictures to this existing gallery using WordPress.
A post creation is giving me options to upload this as a new post.
I have 8 portfolios and would like to add several pictures to specific portfolios from WordPress so that it could be automatically uploaded.
Please be reminded that this is a One page website.
<section id="portfolio">
<link href="css/lightbox.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="heading text-center col-sm-8 col-sm-offset-2 wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="300ms">
<h2>Our Gallery</h2>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="folio-item wow fadeInRightBig" data-wow-duration="1000ms" data-wow-delay="300ms">
<div class="folio-image">
<img class="img-responsive" src="<?php bloginfo('template_directory') ?>/img//portfolio/1.jpg" alt="">
</div>
<div class="overlay">
<div class="overlay-content">
<div class="overlay-text">
<div class="folio-info">
<h3>gallery</h3>
<p></p>
</div>
<div class="folio-overview">
<span class="folio-link"><a class="folio-read-more" href="#" data-single_url="portfolio-single.php" ><i class="fa fa-link"></i></a></span>
<span class="folio-expand"><i class="fa fa-search-plus"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="folio-item wow fadeInLeftBig" data-wow-duration="1000ms" data-wow-delay="400ms">
<div class="folio-image">
<img class="img-responsive" src="<?php bloginfo('template_directory') ?>/img//portfolio/2.jpg" alt="">
</div>
<div class="overlay">
<div class="overlay-content">
<div class="overlay-text">
<div class="folio-info">
<!-- <h3>Time Hours</h3>
<p>Design, Photography</p>-->
</div>
<div class="folio-overview">
<span class="folio-link"><a class="folio-read-more" href="#" data-single_url="portfolio-single.php" ><i class="fa fa-link"></i></a></span>
<span class="folio-expand"><i class="fa fa-search-plus"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="folio-item wow fadeInRightBig" data-wow-duration="1000ms" data-wow-delay="500ms">
<div class="folio-image">
<img class="img-responsive" src="<?php bloginfo('template_directory') ?>/img//portfolio/3.jpg" alt="">
</div>
<div class="overlay">
<div class="overlay-content">
<div class="overlay-text">
<div class="folio-info">
<!--<h3>Time Hours</h3>
Code for the portfolio
Kindly help me with your suggestions on how to do it.
Firstly
<img class="img-responsive" src="<?php bloginfo('template_directory') ?>/img//portfolio/2.jpg" alt="">
<i class="fa fa-search-plus"></i>
has double slash "//" which leads to not finding the actual file.
Besides that, have you checked that Lightbox CSS and JavaScript file are loaded properly? See the console if there is any error.
Hi Apparently my toggle function does not work. I need to Hide a div "photography" when clicking the word "photography" that is located in another div. Please see my code below
HTML:
<div class="bar">
<div="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
Photography
Graphics
</div>
</div>
</div>
</div>
<section id="photograhpy" class="photograhpy">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<hr class="small">
<div class="row">
<div class="col-md-6">
<div class="photograhpy-item">
<a href="#">
<img class="img-photograhpy img-responsive" src="imgs/pics/car1.jpg">
</a>
</div>
</div>
JS:
$(document).ready(function(){
$("#hideshow").click(function(){
$("#photography").toggle(1000);
});
});
Looks like a spelling error:
<section id="photograhpy" class="photograhpy">
Should be:
<section id="photography" class="photography">
There is nothing else outstandingly wrong with your code.
Also, you may not reference elements with the same id exclusively via JavaScript. It is poor practice to give multiple elements the same id.