benschwarz/gallery-css

adding more items

Closed this issue · 8 comments

bruce1969 commented

I see that 3 items are default (or max), but in my attempt to add more items, the screen goes "white" and doesn't render anything added past 3 items.

Is there something I'm missing or not seeing?

Thanks in advance

benschwarz commented

By default, gallery will work with up to 5 items. If you want to use more than 5, you can build your own edition (and change the variables in gallery.build.css)

bruce1969 commented

I viewed the file, but unaware how to use it for additional items. Does this get included in a .js file or it's own file?

benschwarz commented

You'd change the @for $i from 2 through 5 to something like @for $i from 2 through NUMBER_OF_ITEMS_YOU_WANT. No javascript involved.

To generate, you'll need to check out the repo, npm install and then run grunt.

benschwarz commented

(Check the readme)

bruce1969 commented

not your fault, but the responses seem to cause me more grief for something that should be simple as I still do not understand them. I will exercise other options at this point, but I do thank you for your attempted help

benschwarz commented

@bruce1969 sorry, was trying to get back to you while working actual billable (maybe I should've waited?).

Gallery out of the box works with 5 items, so not sure why you're seeing issues with > 3… if you post the code somewhere, I'd be happy to check it out.

benschwarz commented

@bruce1969 I noticed that in your demo you've used the .items-3 class on the .gallery container.
Switching to .items-5 will work with up to five items. (However, you'll need to make a custom build of your own for more than 5 items).

I didn't realise that you'd need to change the items-x class for non-autoplaying galleries… so I made some changes. Now, if you don't want auto play, you don't need the items-x class at all!

Fresh version is available as 1.0.2 in bower, or present in the repo / S3 download.

👍