In ColorBox, is it possible to control the order that photos appear within a grouped (rel="group") gallery?
Unfortunately, due to the layout of my page, photos appear in vertical columns, which need to be grouped horizontally. So the links are output in vertical order in the html, ie:
1 4 7
2 5 8
3 6 9
...but need to be displayed as...
1 2 3
4 5 6
7 8 9
What I need to be able to do, is to override the natural order, sort of like a tabindex, ie:
rel="group[1]"
rel="group[4]"
rel="group[7]"
rel="group[2]"
rel="group[5]"
rel="group[8]"
rel="group[3]"
rel="group[6]"
rel="group[9]"
Is this possible?
Sorry, I can't think of any easy way to do this. Colorbox's ordering is controlled by DOM placement and there isn't a way to alter that outside of editing the plugin. The easiest thing to do would be somewhat ugly: create a duplicate set of DOM elements in the correct order and assign colorbox to them instead (this could be done with JS and they could have their display set to none so they are hidden from the visitor). Then use the original links to trigger colorbox on the duplicate link that shares the same href value.
Related
I've got a proudct with 4 variations, Single, double, 3 and quad. I'd like to hide a div on the page if someone selects the single variation. does anyone know if this is possible?
I am trying to use nth-child to target 1,6, 7,10, 13 ect. and some style. I was targeting them individually but this wont work as the content will be automatically generated.
I have 1 large div followed by 2 small divs one above the other then the next row is the opposite 2 small and one large and this is to continue as content is added.
What would be my best option for achieving this ?
Below is the css i am using at the min:
div:nth-child(1),div:nth-child(6),div:nth-child(7),
div:nth-child(10),div:nth-child(13){
background:#000;
}
I have 1 large div followed by 2 small divs one above the other then the next row is the opposite 2 small and one large and this is to continue as content is added.
So the same situation repeats every 6 items. Using :nth-child(an+b), you now know that a=6.
2 elements are selected for each group of 6: 1 and 6 (and then 7 and 12 (not 10), 13 and 18, etc). To select the first one, b=1 is OK. To select the 6th one, b=0 or b=6 are OK
That leads to:
li:nth-child(6n+1),
li:nth-child(6n) {
/* sth different */
}
Codepen: http://codepen.io/anon/pen/cypAn
You should use nth-child if you just want to use CSS. See this article here. There is a nice table at the bottom that can help if you are a visual learner.
I would like to implement a UI with 1 or 2 columns depending on screen/device width. I'm using Ajax to load data into these two columns and append it according to those item heights so both columns take approx. the same amount of vertical space.
Everything's ok if user keeps their browser window size the same at all time, because initial loading will either fill 1 or 2 columns. But the problem arises when the user resizes their window I have to consolidate all content accordingly:
smaller size hides column 2 and all it's items should be inserted into columns 1 in correct order
larger size displays both columns and takes some content from column 1 and puts it into column 2
I can use Javascript to do this, but I was wondering whether it's possible to do the same in CSS only way?
An example of this is Google+ that works with 1..3 columns depending on content width.
I came up with a solution of my own
It is possible using CSS only but maybe not feasible
Feasible in terms of resource consumption. When adding items on the page, always put all of them in column 1 adding an additional CSS class to those that you also position in column 2.
Responsive media queries will then either:
Hide column 2 and show those additional items in column 1 (based on CSS class).
Show column 2 and hide items with appropriate CSS class in column 1
That's the only way to avoid Javascript processing when user resizes their browser window.
The problem
The only problem there is to this functionality is when you display lots of items, because your DOM will have on average 50% more nodes as approximately half of those items will be duplicated across the page (even though only one copy of those duplicates will be shown at a time).
I would like to have the Footer Custom Menu Widget to split the items in 2 or 3 column so it doesn't take so much space, but i don't know how to break it after lets say 8 items ( li )
http://marloo.info/sample/marloo/
If you want to break it into 2 columns, you could use the CSS selector nth-child with odd and even...then use CSS to float them left/right.
If you want to break them after X items, you will need to write (or find) a different menu widget that can do this for you.
Let's say that I want a Drupal View to display un unknown amount of "items". I would like to display 4 items per row (in the width of the page).
I would normally use a row-fluid container and have 4 span3 items in it.
Now how would I achieve that using Drupal Views module so that this would get repeated if I have 8 elements (2 rows of 4) or 9 elements (2 rows of 4 + 1 row with only 1 element), etc.
If this is not feasible with the Views module, what approach would you suggest?
Thank you.
Use the http://drupal.org/project/semanticviews module! You'll see it is quite easy.