Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Big Graph layout - add labels

Hi, I've used isotope to layout some items using "Big Graph" from the "Custom Layout Modes". As it says, this is based on big.dk.

big.dk adds labels to the bottom of the columns so when laid out alphabetically the A column has A at the bottom and so on. Is there a way to do this in isotope?

My page is at: http://psrw.co.uk/iso/big/doit.html

Thanks in advance,

K

User Gravatar

psrwkeith

Posted Dec 10 2013 4:31 UTC

$50


  • Assigned To NBoychev
  • Solved
  • isotope
  • 681 Views

4 Replies


Hi psrwkeith,

This custom layout doesn't support this feature, but it can be implemented. I will provide you the code later today.

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Dec 10 2013 4:38 UTC

Thanks for response.

User Gravatar

psrwkeith

Posted Dec 10 2013 4:41 UTC

Hi psrwkeith,

Here is the fiddle: http://jsfiddle.net/yM5Z4/2/

You should copy the new custom layout code.

Also you will need to create a new element:

<div class="x-axis-labels"></div> 

(you can choose your own class). The selector for this element is set by option on isotope:

$container.isotope({
  itemSelector: '.project',
  layoutMode: 'bigGraph',
  bigGraph: {
    xAxisContainer: '.x-axis-labels',
    ...

Also you need to include the first three lines of my CSS.

As you can see, my extend works fine on the layouts with one column. For others it will need additional logic.

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Dec 10 2013 9:15 UTC

Solution

This didn't solve your task? Get your own custom solution.

Hi,

That seems to work really well.

Thanks!

K

User Gravatar

psrwkeith

Posted Dec 10 2013 10:39 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions