Add owlcarousel jquery carousel or make slideshow have stage padding

97 views
Skip to first unread message

Marc Blümner

unread,
Jun 16, 2015, 7:23:12 AM6/16/15
to apostr...@googlegroups.com
Hey guys Im using apostrophe to develop a design I need to do for a client and the page bascicaly is slideshows animated so I need it to have stagepadding here  a link to the design so you know what Im talking about:


If a cant do this with your slideshow then I could with owl carousel 2 how can I use it and integrate it to fit my design?

greetings from germany

Tom Boutell

unread,
Jun 16, 2015, 8:34:43 AM6/16/15
to apostr...@googlegroups.com
Check this out:


You can just assign a new function to be the "player" for the slideshow widget type. That function receives the slideshow's jquery element as $el. You can also grab any JSON data that was passed to it.

You can use that to fire up any carousel you happen to like.

(Please use this mechanism, please do not just hack it in via a domready event. That will "work" but it will force your customer to click refresh after all of their edits to see them work, which is unnecessary and janky.)


--
You received this message because you are subscribed to the Google Groups "apostrophenow" group.
To unsubscribe from this group and stop receiving emails from it, send an email to apostropheno...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--


THOMAS BOUTELL, DEV & OPS
P'UNK AVENUE | (215) 755-1330  |  punkave.com

Marc Bluemner

unread,
Jun 16, 2015, 8:55:16 AM6/16/15
to apostr...@googlegroups.com
Hey Tom,

I just sited the snippets tutorial on the HowTo pages :)

I love the way I see New Story and Manage Stories on the side. Actually thats exactly the kind of feature Im looking for, I want my client to do a: New photo story or Manage Photo stories and then be able to populate my Carousel (probably Owl2 in my case As I need it to look exactly like the slider I posted in the Link). Or can I do this with your one? I would prefer to use everything local to the CMS, if it’s possible?

Basically I need it to fill the hole page with 1 Pic visable and on every side 0.5, they call this stage padding with the owl plugin. The thing is I will need to have a kind of overlay with information on the image activated through an onclick() or hover, not sure jet how I will do that but we will see. 
Another thing is I need to or want to use fullpage.js (jquery) do I just load it as an asset and can then use it? Or do I need to declare it any ware else?

Im really happy I found your CMS :) I think I actually found it again but back then I was still to young and only wanted to do ruby on rails development, although I have actually been doing nodejs longer :). I understand now that there is a right tool for a Job not a right tool for every job ;)


Greetings

-- 
Marc Bluemner
Sent with Airmail


Ruby on rails developer / Consultant
QA / Agile Coaching

017670380501

Rittmeisterkoppel. 3a 
22359 Hamburg

marc.b...@gmail.com

Github: https://github.com/rocknrollMarc
You received this message because you are subscribed to a topic in the Google Groups "apostrophenow" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/apostrophenow/F6AAfPwY1eA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to apostropheno...@googlegroups.com.

Tom Boutell

unread,
Jun 16, 2015, 9:00:22 AM6/16/15
to apostr...@googlegroups.com
Hi Marc,

You can push any .js file you wish as an asset. It is then loaded by a script tag like any other (or via one merged, minified .js file in production, but you can think of it as a separate script file for each one).

Assigning a new widget player will allow you to call any code you want when a widget is loaded or finishes being edited. After that of course... it's up to you. It doesn't matter if it's Owl2 or whatever else, Apostrophe's job is just to call the player method when it's time for you to use whatever you want to use.

If you need a lot of metadata for the presentation you have in mind, consider using a schema widget (via the apostrophe-schema-widgets module).

Marc Bluemner

unread,
Jun 16, 2015, 9:05:21 AM6/16/15
to apostr...@googlegroups.com
Ok yes you are probably right, as its a project for a Photographers Portfolio there will be a lot of metadata.

So do you think Im on the right side doing the snippets story tutorial to get into that?

I really don't care which carousel I use as long as it will be easy to make it look the way I need it.

Thank you so much for helping me this way. You guys are so friendly im not used to that from the ruby community anymore.

I guess Nodejs is the new Punkrock ;)

-- 
Marc Bluemner
Sent with Airmail


Ruby on rails developer / Consultant
QA / Agile Coaching

017670380501

Rittmeisterkoppel. 3a 
22359 Hamburg

marc.b...@gmail.com

Github: https://github.com/rocknrollMarc

Tom Boutell

unread,
Jun 16, 2015, 9:06:29 AM6/16/15
to apostr...@googlegroups.com
Are snippets right for you? Well, if you want to have a big collection of them, and be able to feature them on any page, and have index pages that present various subsets of them... snippets are pretty great for your needs.

Marc Bluemner

unread,
Jun 16, 2015, 9:16:08 AM6/16/15
to apostr...@googlegroups.com
Ok let me brainstorm:

I need a kind of Photo Story which will be a slideshow row were my client takes any amount of photos (max 10 i guess) and with description and a flip overlay showing this description.
It would be nice for him to just do a New photo story. Basically Im limiting him down so he doesn't get confused deciding on text or richtext etc. 

The thing is your slideshow basicaly has all the functionality I need its just the looks that I need to change and ok the overlay. SO I guess its a new widget I need right?

I could also just create a photo story schema like in the Story tutorial and give it the slideshow and the overlay right ?

How would you go in my case?

-- 
Marc Bluemner
Sent with Airmail


Ruby / Node.js / Go / NoSQL full Stack developer

Devops / QA / Workflow optimisation  
Agile &  BDD Consultant

QA / Agile Coaching


017670380501

Rittmeisterkoppel. 3a 
22359 Hamburg

marc.b...@gmail.com

Github: https://github.com/rocknrollMarc

Tom Boutell

unread,
Jun 16, 2015, 9:31:58 AM6/16/15
to apostr...@googlegroups.com
You can override the slideshow.html template in views/global if you need to, and replace the player method as I described to use the slideshow player javascript code of your choice.

You could combine that with a snippet subclass or a schema widget to add additional metadata, and make that data available in the browser via the template for that widget.

Marc Bluemner

unread,
Jun 16, 2015, 9:33:23 AM6/16/15
to apostr...@googlegroups.com
Cool man thanks a lot Ill go and do some PunkRockin on that and let you know if I succeed ;)



-- 
Marc Bluemner
Sent with Airmail


Ruby / Node.js / Go / NoSQL full Stack developer

Devops / QA / Workflow optimisation  
Agile &  BDD Consultant

QA / Agile Coaching


017670380501

Rittmeisterkoppel. 3a 
22359 Hamburg

marc.b...@gmail.com

Github: https://github.com/rocknrollMarc

Marc Bluemner

unread,
Jun 16, 2015, 9:45:39 AM6/16/15
to apostr...@googlegroups.com
Sorry Tom,

were do I override the function? Im sure its not in your slideshow.js right?
Were do I place the files I mean?

-- 
Marc Bluemner
Sent with Airmail


Ruby / Node.js / Go / NoSQL full Stack developer

Devops / QA / Workflow optimisation  
Agile &  BDD Consultant

QA / Agile Coaching


017670380501

Rittmeisterkoppel. 3a 
22359 Hamburg

marc.b...@gmail.com

Github: https://github.com/rocknrollMarc

Tom Boutell

unread,
Jun 16, 2015, 9:54:00 AM6/16/15
to apostr...@googlegroups.com
You can place any js files you like in the public/js folder of your project, and in app.js, include them under "assets."

You can override the function in any of the js files that you "push" to the browser by configuring them as assets. Since Apostrophe's js files load first, this is "late enough" and your override will be honored.

Marc Bluemner

unread,
Jun 16, 2015, 9:57:27 AM6/16/15
to apostr...@googlegroups.com
Oh ok thanks great.
SO best thing you think would be to load slideshow.js as an asset and then override in public/js?

-- 
Marc Bluemner
Sent with Airmail


Ruby / Node.js / Go / NoSQL full Stack developer

Devops / QA / Workflow optimisation  
Agile &  BDD Consultant

QA / Agile Coaching


017670380501

Rittmeisterkoppel. 3a 
22359 Hamburg

marc.b...@gmail.com

Github: https://github.com/rocknrollMarc

Am 16 Jun 2015 bei 15:16:09, Marc Bluemner (marc.b...@gmail.com) schrieb:

Tom Boutell

unread,
Jun 16, 2015, 10:13:34 AM6/16/15
to apostr...@googlegroups.com
assets: {
    stylesheets: ['site'],
    scripts: ['site']
  },

... Now you can put whatever you want in public/js/site.js.

Our current sandbox also has browserify in play but you don't have to go that route.

Marc Bluemner

unread,
Jun 16, 2015, 10:15:10 AM6/16/15
to apostr...@googlegroups.com
Cool thanks

-- 
Marc Bluemner
Sent with Airmail


Ruby / Node.js / Go / NoSQL full Stack developer

Devops / QA / Workflow optimisation  
Agile &  BDD Consultant

QA / Agile Coaching


017670380501

Rittmeisterkoppel. 3a 
22359 Hamburg

marc.b...@gmail.com

Github: https://github.com/rocknrollMarc

Reply all
Reply to author
Forward
0 new messages