I created a carousel slideshow images using drupal bootstrap. Slideshow is working just fine. I added 3 images. Each image is about 1000x750. I would like to style these images so they look better in responsive devices. I like to see part of the images in slideshow even though original sizes are 1000x750. Below is the best I could explain as for what I am trying to do as I am bit confused.
When i visit the slideshow, images look big. When I make the screen responsive, images do not look right. I have not applied any css yet. I would like to apply css to the images so they look professional as I am making the screens responsive. I might be confusing you. So I shared a link.
If you visit this link, you will notice that original images are bigger than actual slide images. Also, slideshow images show only portion of the original images. Thats exactly what I would like to do.
sample link
My code.
<div class="view view-views-slideshow-home-page">
<div class="view-content">
<div id="views-bootstrap-carousel-1" class="views-bootstrap-carousel-plugin-style carousel slide">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#views-bootstrap-carousel-1" data-slide-to="0" class=""></li>
<li data-target="#views-bootstrap-carousel-1" data-slide-to="1" class="active"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item">
<img typeof="foaf:Image" class="img-responsive" src = "/sites/default/files/insu.jpg" width="1000" height="667" alt="">
</div>
<div class="item active">
<img typeof="foaf:Image" class="img-responsive" src="/sites/default/files/ins.jpg" width="1000" height="667" alt="">
</div>
</div>
<!-- Carousel navigation -->
<a class="carousel-control left" href="#views-bootstrap-carousel-1" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="carousel-control right" href="#views-bootstrap-carousel-1" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
</div>
How can I apply css to the images and the wrapper so images look responsive and professional?
Related
I need a little help with this template I have been using.
http://preview.themeforest.net/item/anchor-freelancer-creative-agency-portfolio/full_screen_preview/22433983
Its using Fancybox for the project section, which I am trying to change from displaying photos to playing videos on mouse hover.
can anyone help me out with changing the code from displaying photos to playing a video? thanks
this is the code for the one project
<div class="grid-item">
<figure class="reveal-effect se2-white wow perspective-box"><img src="images/works12.jpg" alt="Image">
<figcaption> <a data-fancybox="gallery" href="images/works12.jpg">
<div class="bg-color" data-background="#d4beb1"></div>
<!-- end bg-color -->
<div class="brand"> <img src="images/logo-brand.png" alt="Image"> </div>
<!-- end brand -->
<h5>Digital Creative Works</h5>
<small>WEB, UI-UX, CODING</small> </a> </figcaption>
</figure>
</div>
I'm trying to fill carousel-background image fill carousel. But I'm not able to access tag from css.
<div id="carouselSlider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<!-- data-slide-to part -->
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-background"><img src="img/portfolio/fullsize/1.jpg"></div>
<div class="carousel-container">
<div class="carousel-caption">
<h2>We are xyz</h2>
<p>We help you to blah blah blah!</p>
Get Started
</div> <!--carousel-content-->
</div> <!--carousel-container-->
</div> <!--carousel-item-->
<div class="carousel-item">
<!-- similar content with <img>-->
</div> <!--carousel-item-->
<div class="carousel-item">
<!-- similar content with <img>-->
</div> <!--carousel-item-->
</div> <!--carousel-inner-->
<a class="carousel-control-prev" href="#carouselSlider" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselSlider" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> <!--carousel-->
CSS File:
#carouselSlider .carousel-inner .carousel-item .carousel-background img{
width: 100%;
height:400px;
}
I'm not able to edit image. Also is there a way to fill image in carousel without stretching it?
You can add classes to images. That line of code should look like
<div class="carousel-background"><img class="whateveryouwant" src="img/portfolio/fullsize/1.jpg"></div>
You're trying to navigate through your nested structure using classes but that's not how it works. Because you only have one image inside your carouselSlider div you could simply access it using:
#carouselSlider img {<your css here>}
But this will probably break when you have more images in there. If you can change that HTML you should probably add a class to your img or an id to to one of those inner divs and access it directly.
To avoid the image getting stretched check out the "background-size" CSS property. Either 'cover' or 'contain' should do it for you.
I'm working on a project in Bootstrap and I have added a simple image carousel with controls but the problem is that the controls does not work.. See my site here
As you can see you can not press on next and previous buttons to see other images. Here's my code:
<div class="row">
<div class="container">
<div class="col-md-3">
</div>
<div class="col-md-6">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/slideshow/1.jpg" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>LA is always so much fun!</p>
</div>
</div>
<div class="item">
<img src="images/slideshow/2.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="item">
<img src="images/slideshow/3.jpg" alt="New York" style="width:100%;">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="col-md-3">
</div>
</div>
</div>
Basically I have not found any kind of mistake in this code ,so if you know what is going wrong please let me know... thanks!
Your code has no problem. But You have used a older version of jQuery. Please update with newer version.
http://take.ms/Rbwmf
You can use this version. It is working perfectly with your code.
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
Thanks
You use the id="myCarousel" several time on this page.
You can only have ONE UNIQUE id per page. Removing the other id="myCarousel" fixes your issue.
Some additional info on IDs:
IDs are here in order for Javascript to target element quite easily. But while they make targeting element with JS easy, they need to be unique otherwise, the script won't be able to know which ID to target. There are many other way to target element with JS but this one stay one of the easiest one.
Small advice: even if you can, don't create IDs for CSS since they are not meant for that. Leave the IDs for use in JS. That will help to keep your code clean consistent.
I'm trying to get the last two navigation buttons ("Education" and "Contact") to move the social media icons to the left, and then stay there.
http://comms101.co.za/populus/index.php#
For some reason immediately when clicked, it momentarily displays correctly BUT then the social media icons revert back. If you click the button again, then it displays correctly (how it should display).
The navigation is a php include. Here is the code:
<div class="row">
<div class="col-lg-5 col-md-5">
<div class="logo"><img src="imgs/logo.png" alt="logo"></div>
</div>
<div class="col-lg-7 col-md-7 mn">
<div class="follow current1" style=""> <img src="imgs/f.png" alt=""> <img src="imgs/int.png" alt=""> <img src="imgs/in.png" alt=""> </div>
<div id="menu-icon">
<div class="menu-icn"><span></span><span></span><span></span></div>
</div>
<div class="menu" id="menu">
<ul id="links">
<li class="link">HOME</li>
<li class="link">ABOUT</li>
<li class="link">RESOURCES</li>
<li class="link">TRAINING</li>
<li class="link">COACHING</li>
<li class="folow current1 current">EDUCATION</li>
<li class="folow1 current2 link">CONTACT</li>
</ul>
</div>
</div>
you are adding an extra class to move social icons to left that one link2
"follow current1 link2".
so when you click then jquery add this class but on same time page refresh then "link2" class gone.
so what you need is to set the condition through php,
if the page is contact us then add class "link2" into this div.
<div class="follow current1 link2">
<img src="imgs/f.png" alt="">
<img src="imgs/int.png" alt="">
<img src="imgs/in.png" alt="">
</div>
The .link1 class has to be here when you load education page for example.
A way to do this is to test the active current page and to add class with a PHP condition in the menu.
It displays momently good because of surely a JS script you made on click of the link and then it loads the page.
Hi so I'm working on a site with an image gallery and I decided to use a Codeigniter and a library called Image CRUD for some of the backend stuff, and Twitter Bootstrap for the front end. Its pretty basic stuff. The problem is Image CRUD generates a lot of its own code for the front end so I'm having trouble getting it to look the way I want. Im trying to make a responsive gallery that resizes and stays centered on a bunch of different devices. This should be a piece of cake with bootstrap, but for some reason it just won't work. Any help would be greatly appreciated!
Heres the code for the images that Image CRUD outputs:
<ul class='photos-crud'>
<li id="photos_206">
<div class='photo-box'>
<img src='link_to_thumb__b551b-6.jpg' width='290' height='260' class="img-responsive basic-image" />
<div class="clear"></div>
</div>
</li>
<li id="photos_203">
<div class='photo-box'>
<img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" />
<div class="clear"></div>
</div>
</li>
<li id="photos_204">
<div class='photo-box'>
<img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" />
<div class="clear"></div>
</div>
</li>
<li id="photos_205">
<div class='photo-box'>
<img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" />
<div class="clear"></div>
</div>
</li>
<li id="photos_202">
<div class='photo-box'>
<img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" />
<div class="clear"></div>
</div>
</li>
<li id="photos_201">
<div class='photo-box'>
<img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" />
<div class="clear"></div>
</div>
</li>
</ul>
The issue may be with your image width/height having exact dimensions. If you can get rid of that and let bootstrap take over, that'd be great. Responsive images are usually 100% of the parent width and that parent having a percentage of something else. Maybe you can use SASS to #extend bootstrap styles into the generated elements so..
.photos-crud { #extend .row }
.photos-crud > li { #extend .col-md-3}
Something like that will setup the grid for laying out the images, then if you can remove the auto-generated dimensions, great, but if not maybe use !important to override the dimensions like..
.photos-crud > li img {width:100% !important; height:auto !important;}