Jquery gallery

[davy_yg]

Hello,

Cek this website:

http://www.akronyms.net/demo/arvin-html/v_1.3/

On the portfolio part. I am looking for a jquery that is exactly able to shuffle pictures like that. How?

Thanks in advance.

[davy_yg]

I also wonder why the whole website is so animative like the text bouches etc. what technology does it take to make such an animative websites?

Also, I am looking for a jquery that is able to slides small images to the left/right ? Where can I find it?

[pritaeas]

what technology does it take to make such an animative websites?

If you look at the page source, you can see a lot of Javascript/CSS frameworks included.

I am looking for a jquery that is able to slides small images to the left/right

http://www.jssor.com

[gentlemedia]

Do you mean the 'sliding in' icons on hover? If so, then this can be done with css transitions, css anmations (animate.css) or if you need to support IE9- with the same effects you need jQuery .animate() method or something more robust (greensock or velocity.js) as fallback solution.
It looks nice and all this these hover animations, but it's an extra (unnecessary) click for users on a touch screen device.

[davy_yg]

Thanks gentlemedia. Now, I am trying to take animation apart and change the content.

I find it a little bit strange that even just when I take off style="display: block;" the animation starting not too work any longer.

[gentlemedia]

It's not possible to transition the display property. Use the combination of the visibility (hidden to visible) and opacity (0 to 1) properties instead.

[davy_yg]

Thanks I figure about the bouncy text. Now, what about the automatically shuffle gallery when someone press the picture category button?

[davy_yg]

I find out about the parallax scrolling effect. But I am still having a hard time creating parallax scrolling effect layout just looks like the link that I sent.

Is there any parallax scrolling effect that just looks like the link that I sent?

I still could not find it on google. Looks like I have to modify it myself to make it similar which a little bit difficult.

[gentlemedia]

Now, what about the automatically shuffle gallery when someone press the picture category button?

This is what they call a dynamic layout
http://jquery-plugins.net/tag/dynamic-layout

There are a few that can sort and filter and Isotope is the most well known.
http://isotope.metafizzy.co/

[davy_yg]

I do not understand how to implement the dynamic layout.

I do understand about the sort and filter.

[gentlemedia]

Pretty much all the demos have a usage/how-to-implement section, so what don't you understand?

[davy_yg]

Looks like the dynamic layout has to do something like bootstrap. It has fluid layout that always fit it's container correct?

I'm looking for : a parallax scrolling effect that just looks like the link that I sent.

If there is any. I cannot make a small horizontal parallax effect while the rest of the space remains the same.

Mine still does not looks as good as the example. a little chaos.

[davy_yg]

The isotope example looks good. Is there any other gallery look like the isotope but with bigger picture and looks more organize?

[gentlemedia]

Just use bigger pictures and less items on a row!
In what way more organized?

[davy_yg]

I've tried. but the shuffle seems so unneat and seems a little strange.

[davy_yg]

Look at my revision:

http://www.innovation.web.id/isotope/isotope-docs/

Does any have a better alternative to create a neat gallery that could shuffle pictures?

[gentlemedia]

Well, I posted earlier a link to several dynamic layout plugins, but there's nothing wrong with Isotope... it's your implementation. Making an exact copy of a demo and throwing in your own images is obviously not the way to go.

Just download or link only to the isotope.pkgd.js CDN file and follow the 'Getting Started' instructions.

[davy_yg]

I've tried to follow the instrution and have not find out the way yet.

Here is my current code:

I wonder why there is no sorting button:

isotope.html

<script src="/path/to/isotope.pkgd.min.js"></script>
<link rel="stylesheet" href="styles.css"> 
<div id="container" class="js-isotope"
  data-isotope-options='{ "columnWidth": 200, "itemSelector": ".item" }'>
<script>
var $container = $('#container');
// init
$container.isotope({
  // options
  itemSelector: '.item',
  layoutMode: 'fitRows'
});
</script>
<script>
var $container = $('#container').isotope({
  getSortData: {
    name: '.name', // text from querySelector
    category: '[data-category]', // value of attribute
    weight: function( itemElem ) { // function
      var weight = $( itemElem ).find('.weight').text();
      return parseFloat( weight.replace( /[\(\)]/g, '') );
    }
  }
});
</script>

<div id="container">
  <div class="item"><img src="images/portfolio1.jpg"></div>
  <div class="item w2"><img src="images/portfolio2.jpg"></div>
  <div class="item"><img src="images/portfolio3.jpg"></div>
  ...
</div>

<div id="container">
  <div class="item transition metal" data-category="transition">
    <p class="number">79</p>
    <h3 class="symbol">Au</h3>
    <h2 class="name">Gold</h2>
    <p class="weight">196.966569</p>
  </div>
  <div class="item metalloid" data-category="metalloid">
    <p class="number">51</p>
    <h3 class="symbol">Sb</h3>
    <h2 class="name">Antimony</h2>
    <p class="weight">121.76</p>
  </div>
  ...
</div>

[gentlemedia]

Things that are weird:

Is the isotope file really in a subdirectory to within a directory path?
<script src="/path/to/isotope.pkgd.min.js"></script>

There's also a div #container in your head??? Or actually I don't see any head or body tags.

There are 2 isotope functions and both do different things

There are 2 more #container divs in your markup.

[davy_yg]

isotope.html

<html>
<head>
<script src="/path/to/isotope.pkgd.min.js"></script>
<script src="isotope.pkgd.js"></script>
<link rel="stylesheet" href="styles.css"> 
<!--<div id="container" class="js-isotope"
  data-isotope-options='{ "columnWidth": 200, "itemSelector": ".item" }'> -->
<script>
var $container = $('#container');
// init
$container.isotope({
  // options
  itemSelector: '.item',
  layoutMode: 'fitRows'
});
</script>

</head>

<body>
<div id="container">
  <div class="item"><img src="images/portfolio1.jpg"></div>
  <div class="item w2"><img src="images/portfolio2.jpg"></div>
  <div class="item"><img src="images/portfolio3.jpg"></div>
  ...
</div>

</body>
</html>

I make some revision. And I still do not see the sort button yet.

[gentlemedia]

What you have now here is without sorting, so therefore there is no sort button.

Look at the 'sorting' example and follow those instructions.
http://isotope.metafizzy.co/sorting.html

[davy_yg]

isotope.html

<html>
<head>
<!--<script src="/path/to/isotope.pkgd.min.js"></script>-->
<script src="isotope.pkgd.js"></script>
<link rel="stylesheet" href="styles.css"> 
<!--<div id="container" class="js-isotope"
  data-isotope-options='{ "columnWidth": 200, "itemSelector": ".item" }'> -->
<script>
var $container = $('#container');
// init
$container.isotope({
  // options
  itemSelector: '.item',
  layoutMode: 'fitRows'
});
</script>
<script>
$( function() {
  // init Isotope
  var $container = $('.isotope').isotope({
    itemSelector: '.element-item',
    layoutMode: 'fitRows',
    getSortData: {
      name: '.name',
      symbol: '.symbol',
      number: '.number parseInt',
      category: '[data-category]',
      weight: function( itemElem ) {
        var weight = $( itemElem ).find('.weight').text();
        return parseFloat( weight.replace( /[\(\)]/g, '') );
      }
    }
  });

  // bind sort button click
  $('#sorts').on( 'click', 'button', function() {
    var sortValue = $(this).attr('data-sort-value');
    $container.isotope({ sortBy: sortValue });
  });

  // change is-checked class on buttons
  $('.button-group').each( function( i, buttonGroup ) {
    var $buttonGroup = $( buttonGroup );
    $buttonGroup.on( 'click', 'button', function() {
      $buttonGroup.find('.is-checked').removeClass('is-checked');
      $( this ).addClass('is-checked');
    });
  });

});
</script>
</head>

<body>

<div id="sorts" class="button-group">
  <button class="button is-checked" data-sort-value="original-order">original order</button>
  <button class="button" data-sort-value="name">name</button>
  <button class="button" data-sort-value="symbol">symbol</button>
  <button class="button" data-sort-value="number">number</button>
  <button class="button" data-sort-value="weight">weight</button>
  <button class="button" data-sort-value="category">category</button>
</div>

<div class="isotope">
  <div class="element-item transition metal " data-category="transition">
    <h3 class="name">Mercury</h3>
    <p class="symbol">Hg</p>
    <p class="number">80</p>
    <p class="weight">200.59</p>
  </div>
</div>


<div id="container">
  <div class="item"><img src="images/portfolio1.jpg"></div>
  <div class="item w2"><img src="images/portfolio2.jpg"></div>
  <div class="item"><img src="images/portfolio3.jpg"></div>
</div>

</body>
</html>

Hallo, I have tried to implement the sort button in order to sort the pictures. It doesn't work yet. The sort button cannot sort any of the picture. I wonder why?

[gentlemedia]

You do need to include jQuery as well
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

[diafol]

Good god?! The code is actually readable. Well done Davy. You brushed up your skills +1.

[davy_yg]

@gentlemedia: I already tried adding the jquery link and still remains the same. The sort button still not functioning yet.

[gentlemedia]

You'll need to load the jQuery library otherwise it's not going to work.

It can't sort your pictures, because that's not what you targeting with:

var $container = $('.isotope').isotope({
    ...
});

div .isotope is the one with the element-item and the data-attributes (to sort) and you only have one of them now, so there's nothing to sort :)

Here... this is what worked for me:

<html>
<head>

<style>

body {
  padding: 100px;
}

.button-group {
  margin: 5px;
}

.item {
  width: 150px;
  height: 150px;
  margin: 5px;
  padding: 10px;
  color: black;  
}

.item > * {
  margin: 0;
  padding: 0;
}

.metal { background-color: gold }
.metalloid { background-color: silver }

</style>

</head>
<body>

<div id="sorts" class="button-group">
  <button data-sort-by="original-order">original order</button>
  <button data-sort-by="name">name</button>
  <button data-sort-by="symbol">symbol</button>
  <button data-sort-by="number">number</button>
  <button data-sort-by="weight">weight</button>
  <button data-sort-by="category">category</button>
</div>

<div id="container">
  <div class="item transition metal" data-category="transition">
    <p class="number">79</p>
    <h3 class="symbol">Au</h3>
    <h2 class="name">Gold</h2>
    <p class="weight">196.966569</p>
  </div>
  <div class="item metalloid" data-category="metalloid">
    <p class="number">51</p>
    <h3 class="symbol">Sb</h3>
    <h2 class="name">Antimony</h2>
    <p class="weight">121.76</p>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<script>

$(function(){
  var $container = $('#container').isotope({
    getSortData: {
      name: '.name',
      symbol: '.symbol',
      number: '.number parseInt',
      category: '[data-category]',
      weight: function( itemElem ) {
        var weight = $( itemElem ).find('.weight').text();
        return parseFloat( weight.replace( /[\(\)]/g, '') );
      }
    }
  });
  // sort items on button click
  $('#sorts').on( 'click', 'button', function() {
    var sortByValue = $(this).attr('data-sort-by');
    $container.isotope({ sortBy: sortByValue });
  });
});

</script>
</body>

</html>

Demo: http://cssdeck.com/labs/full/c0oltphk

[davy_yg]

What if sorting multiple images with multiple row like this?

isotope3.html

<html>
<head>
<!--
.metal { background-color: gold }
.metalloid { background-color: silver }
.metalloid2 { background-color: blue }-->
<style>
body {
  padding: 100px;
}
.button-group {
  margin: 5px;
}
.item {
  width: 150px;
  height: 150px;
  margin: 5px;
  padding: 10px;
  color: black;  
}
.item > * {
  margin: 0;
  padding: 0;
}
</style>
</head>
<body>
<div id="sorts" class="button-group">
  <button data-sort-by="original-order">original order</button>
  <button data-sort-by="name">name</button>
  <button data-sort-by="symbol">symbol</button>
  <button data-sort-by="number">number</button>
  <button data-sort-by="weight">weight</button>
  <button data-sort-by="category">category</button>
</div>
<div id="container">
  <div class="item transition metal" data-category="transition">
    <p class="name"><img src="images/portfolio1.jpg" width="170px"></p>    
  </div>
  <div class="item metalloid" data-category="metalloid">
    <p class="name"><img src="images/portfolio2.jpg" width="170px"></p>   
  </div>
  <div class="item transition metalloid2" data-category="metalloid2">
    <p class="name"><img src="images/portfolio3.jpg" width="170px"></p>   
  </div>
  <div class="item transition metalloid3" data-category="metalloid3">
    <div style="margin: 150px 0 0 -530px;">
    <p class="name"><img src="images/portfolio4.jpg" width="170px"></p></div>   
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<script>
$(function(){
  var $container = $('#container').isotope({
    getSortData: {
      name: '.name',
      symbol: '.symbol',
      number: '.number parseInt',
      category: '[data-category]',
      weight: function( itemElem ) {
        var weight = $( itemElem ).find('.weight').text();
        return parseFloat( weight.replace( /[\(\)]/g, '') );
      }
    }
  });
  // sort items on button click
  $('#sorts').on( 'click', 'button', function() {
    var sortByValue = $(this).attr('data-sort-by');
    $container.isotope({ sortBy: sortByValue });
  });
});
</script>
</body>
</html>

I try this. The only problem is the lowest row cannot be sorted only the first row.

[gentlemedia]

Create a demo with your code, so we can see what you mean. You can use an online editor such as these:

• http://jsfiddle.net/
• http://codepen.io/
• http://cssdeck.com/

And for the images in that demo, you can use http://placehold.it/

[davy_yg]

Here is my demo: Isotope Demo

[gentlemedia]

Why did you wrap that <div style="margin: 150px 0 0 -530px;"> with the weird margins around the last item? That's breaking the layout after sorting. Just get rid of it! Also wrapping the images in a paragraph tag is also not necessary... just give the image the class on which you want to sort.

Also delete the stuff from the original Isotope demo in your demo, because you don't use it and don't need it which makes things only more confusing and complicated then that it is already for you.