Using image max-width and keeping height ratios for responsive - javascript

Based on the code below & using bootstrap, I have a grid layout with multiple .block components, each containing an image and a title. The images are larger than the column size so that they can resize to full width for responsive screen sizes (done with the CSS listed below). each image may be different heights & widths.
This works just fine as long as you don't define the image height in the attributes. As soon as you add the height it distorts the image proportions.
Now however, I need to set the image heights for some javascript so that it loads properly. Without setting the heights, the js is loading too quickly and the element heights are incorrect basically.
Right now I'm getting around this by using a setTimeout() to delay the js script by 1.5 seconds. This obviously isn't ideal as for someone with a slow connection it won't be long enough.
My Question: Is there a way to either (A) delay the js until all images have loaded on the page or (B) set the height for each image in a way that it will resize with the image width and keep my proportions correct for the image with css?
HTML:
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image1.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image2.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image3.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image4.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image5.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image6.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image7.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image8.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image9.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
</div>
</div>
CSS:
.block img{
max-width: 100%;
}


To delay the Js to run until all images are loaded you should use jquery's
$(window).load(function(){
//your code here
});
or you can resize images when each one is loaded
$('img').each($(this).load(function(){
//resizing code here with $(this).height or $(this).width() maybe
});
to check the bootstrap you can use
$(window).resize()
to do the same and that way resizing on the browser will rerun the js in load. This is how I test responsiveness with images.

Related

Masonry and dynamic tabs

I have this page that contains dynamic tabs. The content inside the tabs changes depending on the tab the user picks. I want to get that content to be laid out with Masonry so that it looks nice.
Here's the problem: When the user switches tabs the content collapses. Like this:
If the user plays around with the window size it responds and lays out correctly. Like this:
Now I am pretty sure I know what the issue is here. I am using masonry on HTML and not jquery:
<div class="row" data-masonry='{ "columnWidth": ".news-box", "itemSelector": ".news-box" }'>
So I think the issue is that masonry on HTML doesn't work that well if the content isn't loaded (the images, in this case). I have looked around for JQuery approaches to solve this and my problem is that I can't get JQuery to work for some reason. This site is on ASP.NET and I can't get masonry on JQuery going, which is why I am stuck with HTML.
This is what I have tried, without any success, with JQuery:
<script>
$('.row').masonry({
itemSelector: '.news-box',
columnWidth: '.news-box'
});
</script>
I know that piece of code doesn't wait for the images to load. My point is that I don't get any results, even erroneous with that code.
Is there any way I can solve this on HTML? Make it so that when a user switches tabs the contents lay out perfectly to begin with?
Edit: I got this working with vanilla JS
var msnry = new Masonry('.row', {
columnWidth: '.news-box',
itemSelector: '.news-box'
});
Maybe I can get an event handler in here? Tips?
Example code that replicates problem
<!--TABS-->
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>
<!--TAB CONTENT-->
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<!--DUMMY CONTENT FOR MAIN TAB-->
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title</h4>
</div>
</div>
</div>
<div id="menu1" class="tab-pane fade">
<!--DUMMY CONTENT FOR SECONDARY TAB-->
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title</h4>
</div>
</div>
</div>
</div>

Actual solution, based on your provided code:
var updateMasonry = function(){
$('.tab-pane.active').masonry({
itemSelector: '.well',
})
}
$('a[data-toggle="tab"]').on('shown.bs.tab', updateMasonry);
$(window).on('resize load', updateMasonry)
var updateMasonry = function(){
$('.tab-pane.active').masonry({
itemSelector: '.well',
})
}
$('a[data-toggle="tab"]').on('shown.bs.tab', updateMasonry);
$(window).on('resize load', updateMasonry)
/* you don't need this css */
#media (min-width: 700px) {
.container {margin-top: 80px;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.0/masonry.pkgd.min.js"></script>
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>
<!--TAB CONTENT-->
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<!--DUMMY CONTENT FOR MAIN TAB-->
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title</h4>
</div>
</div>
</div>
<div id="menu1" class="tab-pane fade">
<!--DUMMY CONTENT FOR SECONDARY TAB-->
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title</h4>
</div>
</div>
</div>
</div>
</div>
<!--TABS-->
Initial answer, unfolded...
The <script> tag you posted will be run when it is met. This means it will be executed when:
your DOM object has not yet been fully constructed
your images haven't loaded (because DOM building happens much faster than loading images).
That's why you need to push the execution of your code on the window.load event, which happens when all assets finished loading:
window.onload = function() {
var msnry = new Masonry('.row', {
columnWidth: '.news-box',
itemSelector: '.news-box'
});
};
Also, I'm not entirely sure pasing a selector to columnWidth param is valid. I think it can only take width-like values (you can go 25% to avoid pixels). My guess is it's currently ignored. It also doesn't make much sense, since you're giving it the width of the elements you're resizing...
Further details.
From comments, it results you're trying to apply .masonry() to content placed in inactive tabs. In most tabs mechanisms, this means the tab container has display:none, which makes it not rendered and its width will return 0. Because masonry() uses the container's width to calculate the columns, and place the items, it does work, but all the columns have 0 width. Here's what you probably want to do.
Step 1. Place your masonry init method inside a function, so you can call it when you need it:
var massonryInit = function() {
var msnry = new Masonry('.row', {
columnWidth: '.news-box',
itemSelector: '.news-box'
});
Step 2. Look in the documentation of whatever tabs you are using for a callback method run on tab contents after the tab is shown. If they were Bootstrap tabs we would be talking about shown.bs.tab event, but I know you're not using Bootstrap because you're not using jQuery.
On that method you'll need to call your newly declared massonryInit() function:
var yourTab = document.querySelector('yourTabSelectorHere');
yourTab.addEventListener("yourTabWasRenderedEvent", masonryInit);
Note the above method will only work on a single, specific tab, returned by yourTabselectorHere. If that selector matches more than one element, the event will only be added to first match. To add it to all, you need .querySelectorAll() instead of .querySelector() and you'll need to run a javascript for on that collection and add the event to each.
By default, JavaScript is pretty verbose. That's why jQuery is so popular. It reduces writing common methods and tasks to much shorter syntax. All the above, using jQuery would be:
var masonryInit = function(){
$('.row').masonry({
itemSelector: '.news-box',
});
}
$('yourTabSelectorHere').on('yourTabWasRenderedEvent', masonryInit);
... and it would work on multiple tabs. No for loop needed. It would be internally applied by jQuery.
Adding to the great explanation above, this article is a great read:
https://www.sitepoint.com/bootstrap-tabs-play-nice-with-masonry/

The best - simple solution i find is to destroy and initialized:
Demo (Tabby.js & Masonry): https://codepen.io/ezra_siton/pen/KOLdBO?editors=1111
Removes the Masonry functionality completely. destroy will return the
element back to its pre-initialized state.
$grid.masonry("destroy");
$grid.masonry(masonryOptions);
Flow (Use this with your tabs code): **Click on tabX show contectX - destroy gridX than reload gridX - **works like magic without any complex tricks (Like timeout or resize) :)
The idea comes from official docs (Toggle Masonry):
Masonry - destroy
Codepen: https://codepen.io/desandro/pen/jPyoRE
Docs: https://masonry.desandro.com/methods.html#destroy
Why not using "layout" (reload)?
Because this idea will work only if you change the grid (Append/prepended item, change elements size and so on).
// trigger layout after item size changes
$grid.masonry('layout');
Example (toggle class and update layout):
https://masonry.desandro.com/methods.html#layout-masonry

why image show space and go right, it should be fill up the gap

I am trying to get my images to fill in the available space like the example website
link view
how can i show my image without space and it will be come with different height.
it should like example website.
under you get my code .
Live demo my code
code language html5
<div class="blog_posts">
<div class="">
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="..." class="hg_t_1" alt="">
</div>
</div>
<div class="">
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="...." class="hg_t_2" alt="">
</div>
</div>
<div class="">
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="...." class="hg_t_5" alt="">
</div>
</div>
<div class="">
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="...." class="hg_t_3" alt="">
</div>
</div>
<div class="">
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="..." class="hg_t_4" alt="">
</div>
</div>
<div class="">
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="..." class="hg_t_2" alt="">
</div>
</div>
<div class="">
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="..." class="hg_t_1" alt="">
</div>
</div>
<div class="">
<div class="col-sm-4 col-md-4 col-lg-4">
<img src="..." class="hg_t_4" alt="">
</div>
</div>
</div>
code language css
.blog_posts img {
width: 100%;
}
.blog_posts img.hg_t_1 {
height: 220px;
}
.blog_posts img.hg_t_2 {
height: 280px;
}
.blog_posts img.hg_t_3 {
height: 120px;
}
.blog_posts img.hg_t_4 {
height: 320px;
}
.blog_posts img.hg_t_5 {
height: 150px;
}

It's a bit hard to understand from your post but I think you're trying to get your images to fill in the available space like the example site you provided in the comments.
I don't think this is possible with pure HTML5/CSS, but there's a javascript library called Masonry which probably does what you're looking for.
Your HTML will look like this:
<main>
<img src="http://i.imgur.com/nQSRbvc.jpg" class="width33" alt="">
<!-- the rest of your images -->
</main>
The width33 class just sets the max-width of the image to 33%. This will allow the images to scale without changing the aspect ratio. And to initialize masonry just call it:
$('main').masonry({
itemSelector: 'img'
});
Here's a jsfiddle example with your images: https://jsfiddle.net/fujtjf7q/

If you set both the height and width you will distort the image.
Set just the width and they will maintain aspect ratio.
See this fiddle
.blog_posts img {
width: 100px;
}

:first selector checks against parents parent, instead of parent container

I need to shuffle large elements inside my layout due to floating them, and trying to display them. Essentially .gallery-item with class .gallery-large always needs to be first child inside .item, there are several .item containers inside main #gallery_slideshow. At the moment if there is a large item inside second, third etc.. item it gets placed as first element inside first item, where as I want it to stay inside it's own. For example, code below results in 5 elements inside first .item with 2 large ones, instead of initial 4 elements with 1 large one.
JS:
if($('.gallery-item').length > 1) {
$('.gallery-large').each(function(e) {
if(!$(this).is(':first')) {
$(this).insertBefore('.gallery-item:first');
//Reset height of owl carousel wrapper in case moved element was last
$('.owl-wrapper-outer').css('height', 'auto');
}
});
}
HTML:
<div id="gallery_slideshow" class="owl-carousel owl-theme">
<!-- Example page 1 -->
<div class="item row">
<div class="col-md-2 col-sm-3 col-xs-12 gallery-item gallery-small">
<div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-12 gallery-item gallery-small">
<div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 gallery-item gallery-medium">
<div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
</div>
<div class="col-md-8 col-sm-6 col-xs-12 gallery-item gallery-large right">
<div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
</div>
</div>
<!-- Example page 2 -->
<div class="item row">
<div class="col-md-2 col-sm-3 col-xs-12 gallery-item gallery-small">
<div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-12 gallery-item gallery-small">
<div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 gallery-item gallery-medium">
<div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
</div>
<div class="col-md-8 col-sm-6 col-xs-12 gallery-item gallery-large right">
<div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
</div>
</div>
</div><!-- END #gallery_slideshow -->

You can simply do,
$(".gallery-large").each(function() {
$(this).parent().prepend(this);
});
Loop through each 'gallery-large' item
Make it as first child by using prepend() method. Prepend it to its own parent to keep the correct context.

Implement Jquery show()?

How to combine JQuery.show() whit mine working animation so I can display text.
I would like to achieve the same effect like here on this working example .But I don't want to use "data" prefix for displaying text, I want to use jquery.show(). I am having trouble understanding where and how to put mine text for each button and showing it on the middleBubble.
Only difference between mine example and this one, is that mine middleBubble is toggling.
How can I make this work's and implement jquery show() library in working animation?
HTML for mine example:
<section class='circle-animation'>
<div class="container-fluid">
<div class="row">
<div class="hidden-xs hidden-sm">
<div class="col-sm-6 col-sm-offset-3 col-sm-pull-1">
<div id="middlepapir" class="jumbotron">
<div class="row">
<img class="papir img-responsive" src="img/circle/11.png" alt="">
<div class="row">
<div class="move1 col-sm-4 col-xs-4 col-md-push-4">
<img class="position1 round" src="img/circle/off/home-all-icon-off.png">
</div>
</div>
<div class="row">
<div class="move2 col-sm-4 col-xs-4 col-md-push-1">
<img class="position2 round" src="img/circle/off/home-cover-icon-off.png">
</div>
</div>
<div class="row">
<div class="move3 col-sm-4 col-xs-4 col-md-push-7">
<img class="position3 round" src="img/circle/off/home-design-icon-off.png">
</div>
</div>
<div class="row">
<div class="move4 col-sm-4 col-xs-4">
<img class="position4 round" src="img/circle/off/home-diy-icon-off.png">
</div>
</div>
<div class="row">
<div class="move5 col-sm-4 col-xs-4 col-md-push-8">
<img class="position5 round" src="img/circle/off/home-marketing-icon-off.png">
</div>
</div>
<div class="row">
<div class="move6 col-sm-4 col-xs-4 col-md-push-1">
<img class="position6 round" src="img/circle/off/home-other-icon-off.png">
</div>
</div>
<div class="row">
<div class="move7 col-sm-4 col-xs-4 col-md-push-4">
<img class="position7 round" src="img/circle/off/home-special-icon-off.png">
</div>
</div>
<div class="row">
<div class="move8 col-sm-4 col-xs-4 col-md-push-7">
<img class="position8 round" src="img/circle/off/home-vip-icon-off.png">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Jquery for HTML section:
// jQuery script for are Circle div whit Scroll Reveal Script
$(document).ready(function(){
/*==========================================
SCROLL REVEL SCRIPTS
=====================================================*/
window.scrollReveal = new scrollReveal();
/*==========================================
WRITE YOUR SCRIPTS BELOW
=====================================================*/
$('.round').click(function(){
$('.papir').animate({
width: ['toggle', 'swing'],
height: ['toggle', 'swing'],
});
});
});

This is more difficult to examine without your CSS, however, it seems that you missed the layout that your example used. They have a separate area for the main text called id="middleBubble". This is the area that the text is being replaced in.
They are performing the replacement here:
$("#middleBubble").html("<p><b>" + $(this).data("bubble1") + "</b><br />" + $(this).data("bubble2") + "</p>");
where "this" is the element (in this case the image) that has been hovered over. The data is stored in the data-bubble1 and data-bubble2 attributes. You could store it there (the replacement text for each section) or you could store it as a keyed JSON object and use the id of the image to key which values to use. I would recommend the later, but to each their own.

Implement jQuery slidedown effect

I have a jQuery slide down animation, but I would like to implement it to the paste section bellow.
Content is for a smaller device so every button need to have slide down element attached on him self.
Can some one show me how can I do this.
Mine jQuery slideDown code:
$(".squere").click(function(){
$(".content").hide(800);
$(".squere").removeClass("active");
$(this).addClass("active");
$(this).next(".content").slideDown(1000);
});
Mine Content:
<div id="squere" class='container hidden-lg hidden-md '>
<div class="row">
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle homepageGridDefault" src="img/circle/home-all-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-cover-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-diy-icon-off.png">
</div>
</div>
<div class="row">
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-marketing-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">Strange book here :)</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-other-icon-off.png">
</div>
</div>
<div class="row">
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-special-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-vip-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-designe-icon-off.png">
</div>
</div>
Fiddle example, this is the whole dive and it is responsive so do not mind the upper circle in the html section.

Simply use sildeDown and slideUp can resolve your problem.Try this fiddle. Just used slideUp and slide Down method in place of adding and removing active class.
$(document).ready(function(){
$('.content').hide();
});
$(document).on('click',".center",function(){
$(".content").slideUp(300);
$(this).next(".content").slideDown(300);
});

Ok. I've just modified your code and added just 3 images and a content div as below:
DEMO
HTML
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-4">
<a href="#" class="center">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""/>
</a>
<div class="content">
Content Image 1
</div>
</div>
<div class="col-sm-4 col-xs-4">
<a href="#" class="center">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-1994-02-c-thumb.jpg" class="img-circle" alt=""/>
</a>
<div class="content">
Content Image 2
</div>
</div>
<div class="col-sm-4 col-xs-4">
<a href="#" class="center">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2005-37-a-thumb.jpg" class="img-circle" alt=""/>
</a>
<div class="content">
Content Image 3
</div>
</div>
</div>
</div>
JS
$(document).ready(function(){
$('.content').hide();
});
$(document).on('click',".center",function(){
if($(this).hasClass('active'))
{
return;
}
$(".content").hide(800);
$(".center").removeClass("active");
$(this).addClass("active");
$(this).next(".content").show(1000);
});
Note: These are just basic animations. If you really want to perform some extra-ordinary animations then you need to check on .animate jquery function.

Please use id selector # instead of class selector .
$("#squere").click(function(){
$(".content").hide(800);
$("#squere").removeClass("active");
$(this).addClass("active");
$(this).next(".content").slideDown(1000);
});
Might be it is your issue.
$("#squere").removeClass("active");
$(this).addClass("active");
These lines will not make any effect, because you are removing and adding same css class.

Categories

Resources