I want to keep three blocks. the images in the middle blocks should be moving one after the other from right to left. How to achieve that.
<div class="logo-div">
<div class="logo-top">
<img src="{{media url="wysiwyg/logo_garage.png"}}" alt="">
</div>
<div class="logo-middle">
<ul>
<li><img src="{{media url="wysiwyg/logo1.png"}}" alt=""> </li>
<li><img src="{{media url="wysiwyg/logo2.png"}}" alt=""> </li>
<li><img src="{{media url="wysiwyg/logo3.png"}}" alt=""> </li>
<li><img src="{{media url="wysiwyg/logo4.png"}}" alt=""> </li>
</ul>
</div>
<div class="logo-bottom">
<img src="{{media url="wysiwyg/logo_vehicle.png"}}" alt="">
</div>
</div>
.logo-div{
max-width:300px;
margin:0 auto;
& ul li{
float:left;}
}
$(document).ready(function() {
$(".logo-middle li").show( "slide", {direction: "right" }, 2000 );
});
But inspite of above code the images in middle block in listed one below the other as it is given in list and there is no movement in it. Where have I went wrong. Please help me.
You can use the Cycle2-plugin (cycle2) to add a slideshow. There's a Continuous option which doesn't require any code, just add some data tags to your surrounding element. See Continuous on their Demo page.
I included a snippet which does exactly as they say. My styling isn't as fabulous as theirs, but hey. Not what you asked for :)
You could also branch of this fiddle to experiment with the library.
For further documentation about Cycle2, just see their demos
#gallery {
width: 100%;
border: 3px solid gray;
white-space: nowrap;
overflow-y: hidden;
}
#gallery img {
height: 200px;
margin-right: 15px;
display: inline-block;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://malsup.github.io/min/jquery.cycle2.min.js"></script>
<div id="gallery" class="cycle-slideshow cycle-autoinit"
data-cycle-fx="scrollHorz"
data-cycle-speed="3000"
data-cycle-timeout="1"
data-cycle-easing="linear"
>
<img src="http://cdn.sci-news.com/images/enlarge2/image_3725_2e-Jupiters-X-Ray-Aurora.jpg"/>
<img src="http://cdn.sci-news.com/images/enlarge2/image_3725_2e-Jupiters-X-Ray-Aurora.jpg"/>
<img src="http://cdn.sci-news.com/images/enlarge2/image_3725_2e-Jupiters-X-Ray-Aurora.jpg"/>
<img src="http://cdn.sci-news.com/images/enlarge2/image_3725_2e-Jupiters-X-Ray-Aurora.jpg"/>
<img src="http://cdn.sci-news.com/images/enlarge2/image_3725_2e-Jupiters-X-Ray-Aurora.jpg"/>
<img src="http://cdn.sci-news.com/images/enlarge2/image_3725_2e-Jupiters-X-Ray-Aurora.jpg"/>
</div>
Related
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed last year.
I want to put my photos according to the following plan:
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
ul > li {
width: 49%;
}
ul > li img {
width: 100%;
margin-block-end: 0.25rem;
}
<ul>
<li>
<img src="img/study-image-1.png" alt="">
</li>
<li>
<img src="img/study-img-3.png" alt="">
</li>
<li>
<img src="img/study-img-2.png" alt="">
</li>
<li>
<img src="img/study-img-4.png" alt="">
</li>
</ul>
But when I did my design based on the following code, it was like this.
Thank you in advance for your cooperation
Do you want something like this?, you don´t need javascript
https://codepen.io/marcosefrem/pen/KKXELPy
<ul>
<li>
<img src="https://picsum.photos/500/400" alt="">
</li>
<li>
<img src="https://picsum.photos/100/50" alt="">
</li>
<li>
<img src="https://picsum.photos/200/200" alt="">
</li>
<li>
<img src="https://picsum.photos/100/400" alt="">
</li>
<li>
<img src="https://picsum.photos/500/400" alt="">
</li>
<li>
<img src="https://picsum.photos/100/50" alt="">
</li>
<li>
<img src="https://picsum.photos/200/200" alt="">
</li>
<li>
<img src="https://picsum.photos/100/400" alt="">
</li>
</ul>
<style>
ul {
column-count: 3;
column-gap: 1.25rem;
}
li {
break-inside: avoid-column;
position: relative;
display: inline-block;
width: 100%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
li img {width:100%; object-fit:cover}
</style>
For this fairly straightforward layout where it must be known that the aspect ratios of the two bigger images are the same as are the aspect ratios of the two smaller images you could use CSS two columns:
ul {
columns: 2;
width: 50vw;
font-size: 4px;
}
li img {
width: 100%;
height: auto;
margin: 2px 0 2px 0;
}
<ul>
<li><img src="https://picsum.photos/id/1016/100/50"></li>
<li><img src="https://picsum.photos/id/1015/200/300"></li>
<li><img src="https://picsum.photos/id/1016/200/300"></li>
<li><img src="https://picsum.photos/id/1015/100/50"></li>
</ul>
Note - the vertical gap depends on font-size, hence the 4px to match the 2x2px of the margins. Obviously you will want to adjust this and the width of the whole thing to suit your particular needs.
Also can use from divs instead ul and li:
.container {
width: 300px;
grid-template-rows: 100px 100px 100px;
display: grid;
grid-template-areas: 'one tow' 'tree tow' 'tree four';
grid-gap: 10px;
}
img {
width: 100%;
height: 100%;
margin-block-end: 0.25rem;
}
.item1 {
grid-area: one;
}
.item2 {
grid-area: tow;
}
.item3 {
grid-area: tree;
}
.item4 {
grid-area: four;
}
<div class="container">
<div class="item1">
<img src="https://s4.uupload.ir/files/7560b48482bfae5c-02b97ffc647f-3822363654_tji3.jpg" alt="">
</div>
<div class="item2">
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" alt="">
</div>
<div class="item3">
<img src="https://s4.uupload.ir/files/717195_346_g0du.jpg" alt="">
</div>
<div class="item4">
<img src="https://s4.uupload.ir/files/0.270967001322580170_jazzaab_ir_ajvv.jpg" alt="">
</div>
</div>
i wanted to apply owl carousal to all the images placed in list item i,e li
i want to retain the big background image as it is. on top of that i want to have image carousal of all list images.
at present carousal is not working.
here is jsfiddle: http://jsfiddle.net/eabangalore/s7teyzpL/26/
here is what i have tried:
$(".owl-carousel").owlCarousel();
.service_img{
width:100%;
height:500px;
display: block;
}
.service_img .small-images ul li{
display: inline-block;
/* position:absolute;
top: 33%;*/
}
.small-images{
top: 25%;
left:90px;
opacity: 0.9;
position: absolute;
}
.small-images ul li{
padding-right: 50px;
}
.image-text:hover{
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<div class="container-fluid">
<div class="col-md-12 col-xs-12 col-sm-12 service_img">
<img src="https://s9.postimg.org/w3pkeix2n/Services.jpg">
<div class="small-images">
<ul>
<li><img src="http://via.placeholder.com/50x50" class="image-text" title="image 1"></li>
<li><img src="http://via.placeholder.com/50x50" class="image-text" title="image 2"></li>
<li><img src="http://via.placeholder.com/50x50" class="image-text" title="image 3"></li>
</ul>
</div>
</div>
</div><br><br>
You can do following changes to obtain the similar result.
HTML
<div class="container-fluid">
<div class="col-md-12 col-xs-12 col-sm-12">
<div class="small-images">
<ul class="owl-carousel">
<li><img src="http://via.placeholder.com/100x100" class="image-text" title="image 1"></li>
<li><img src="http://via.placeholder.com/100x100" class="image-text" title="image 2"></li>
<li><img src="http://via.placeholder.com/100x100" class="image-text" title="image 3"></li>
</ul>
</div>
</div>
</div>
<br><br>
CSS
.small-images{
width:100%;
height:500px;
display: block;
background-image: url('https://s9.postimg.org/w3pkeix2n/Services.jpg')
}
.image-text{
margin: 10px;
}
.owl-carousel{
list-style-type: none;
}
JS
$(".owl-carousel").owlCarousel();
I am using bootstrap to add responsive images to my webpage. The problem is that I have several overlapping images which then don’t get rescaled correctly.
Diagram Example
Not sure if I’ve set something up wrong, am missing something or trying to over-reach beyond what bootstrap can do.
This is the test code I’m using, I’ve kept it generic.
HTML:
<div class="col-lg-12" >
<!-- Images inside the container image that are not being rescaled -->
<div class="children_Images">
<img class="img-responsive" id="image_1" src="insideImage_1.png" alt="" style="left: 0.6em; top: -0.5em"/>
<img class="img-responsive" id="image_2" src="insideImage_2.png" alt="" style="left: 0.6em; top: -0.5em"/>
<img class="img-responsive" id="image_3" src="insideImage_3.png" alt="" style="left: 0.6em; top: -0.5em"/>
</div>
</div>
CSS:
.container{
border: 2px solid red;
position: relative; /* Allows children to be placed relative to the panel */
font-size: 10px;
z-index: 0;
height: 100%;
width: 100%;
}
.container img{
max-width:100%;
width: auto;
position: absolute;
border:5px solid green;
}
.children_Images
{
transition: all 1s ease-in-out;
}
.children_Images:hover
{
transform: scale(1.05) translate(4em);
}
I’m just wondering if this is possible with CSS and Bootstrap or should I be doing something with JavaScript that rescales all the children images once the parent image’s size has been altered?
What you should do is this
<div class="container">
<div class="col-xs-4">
<img src="" alt="" />
</div>
<div class="col-xs-4">
<img src="" alt="" />
</div>
<div class="col-xs-4">
<img src="" alt="" />
</div>
</div>
And css
.container img {
max-width: 100%;
}
I have a <ul> that is displayed inline-block and I need it to have a arrow appear when the element is active, see screenshot:
And here is what I have currently:
I already have the functionality with activating the element on hover:
.coffee
$(".solutions-items li").hover ->
$(this).addClass("solutions-items-active").siblings().removeClass "solutions-items-active"
My .html
<div class="text-center">
<ul class="solutions-items">
<li class="solutions-items-active"><img class="home-solutions-icon" src="" alt="online shop"></li>
<li><img class="home-solutions-icon" src="" alt="mobile smartphone"></li>
<li><img class="home-solutions-icon" src="" alt="couch commerce tablet"></li>
<li><img class="home-solutions-icon" src="" alt="pos point of sale"></li>
<li><img class="home-solutions-icon" src="" alt="marketplace"></li>
<li><img class="home-solutions-icon" src="" alt="wearables"></li>
<li><img class="home-solutions-icon" src="" alt="e-commerce innovations"></li>
</ul>
</div>
And here is my css:
.scss
.solutions-items li {
display: inline-block;
}
.home-solutions-icon {
height: 7em;
padding: 0.5em;
}
.solutions-items-active {
background: $green;
}
Any ideas how I can tackle this? Thanks !
You probably just want to add a bit of CSS to do that. If your image has a fixed size, there is a CSS trick to do that :
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
Just taking baby steps with this Orbit goodie from Foundation 5 and I am wanting to add some text to the right of each image exposed by the Orbit slider (e.g. in the code snippet below, I've added a small unordered list to go with slide 2 - but it never shows):
<div class="row myContainer">
<div class="small-12 medium-12 large-12 columns mySlides">
<ul class="example-orbit" data-options="timer_speed: 5000;animation_speed:500;" data-orbit >
<li>
<img id="myLogo" src="img/TCBlogo-development-small.JPG" alt="slide 0" />
<div class="orbit-caption id="logoCaption">
A "reminder" web application based on group roles or positions
</div>
</li>
<li>
<img src="http://lorempixel.com/600/400/business/1" alt="slide 1" />
<ul>
<li>keep track of important events, tasks, and deadlines</li>
<li>allows you to maintain operational continuity regardless of employee turnover</li>
</ul>
<div class="orbit-caption">
Helps you and your employees get more organized and stay on top of your business
</div>
</li>
<li>
<img src="http://lorempixel.com/600/400/business/2" alt="slide 2" />
<div class="orbit-caption">
Keeps track of important events, tasks, and deadlines within your company
</div>
</li>
<li>
<img src="http://lorempixel.com/600/400/business/3" alt="slide 3" />
<div class="orbit-caption">
Gives managers the tools they need to verify that employees are completing their tasks responsibly and on time
</div>
</li>
<li>
<img src="http://lorempixel.com/600/400/business/4" alt="slide 4 />
<div class="orbit-caption">
Cloud-based solution that does not forget - reminding with email or text alerts
</div>
</li>
</ul>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/foundation.orbit.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Here is a screenshot of the image left-justified in the Orbit slider:.
Here is a snippet of my app.css file:
body {
background-color: teal;
}
.myContainer {
background-color: white;
width:100%;
margin-bottom: 1%;
}
.myContainer img{
max-width:100%;
}
.myFiller{
background-color: silver;
}
#myLogo {
width:70%;
height:60%;
/*border: 0 0 0 0;*/
margin-bottom: 10%;
}
#logoCaption {
margin-top: 10%;
padding-top: 10%;
}
.mySlides{
padding: 2%;
/*border: 1px solid black;*/
width: 100%;
}
.myCaption{
margin-top: 5%;
/*border: 1px solid black;*/
width: 60%;
}
I posted this on Foundation's forum too and got no helpful advice. I ended up abandoning the Orbit slider and added the Wow Slider to the overall Foundation page:
http://wowslider.com/licenses.html