Tutorials
Parallaxis update
03-01, 2016
Foundation Reveal Modal tricks
01-06, 2015
Here's a small tutorial on how to implement the Reveal Modal on a Foundation based theme like Phaedra or Estiasis. We know how to do it with a stack in a Stacks page, but what about implementing a modal into a Blog or Photo Album page?
Here's the example that we'll try to reproduce:
http://www.archetypon.net/preview/phaedra/plugins/Foundation-Reveal-Modal/
All we have to do is:
1. Add the modal markup to the sidebar.
2. Use the data-reveal trigger on a button.
3. Add the Foundation script call to the Custom Header field.
4. Add the Foundation trigger to the Custom Javascript field.
If you're not familiar to the Foundation Reveal Modal or any of Foundation docs, this is a good place to read more about it and where I went to grab the markup: http://foundation.zurb.com/docs/components/reveal.html
1. So let's start by using the markup for the Modal - copy & paste to the sidebar:
After you pasted the snippet, select it an Ignore Format (CMD + .)
2. Now add the Modal call to a button. This is an example for the Phaedra theme button, but can be applied to any button:
3. Call jQuery and Foundation from the Custom Header:
4. Lastly trigger Foundation from the JavaScript field:
That's all to it. You try the demo here:
http://www.archetypon.net/preview/phaedra/plugins/Foundation-Reveal-Modal/
Auto Display
We may also get the modal to display without clicking a button, handy to show any alerts or promotions. In order to accomplish this follow all the steps above and add this piece of code to the Custom JavaScript field, just after the Foundation trigger:
Here's the example that we'll try to reproduce:
http://www.archetypon.net/preview/phaedra/plugins/Foundation-Reveal-Modal/
All we have to do is:
1. Add the modal markup to the sidebar.
2. Use the data-reveal trigger on a button.
3. Add the Foundation script call to the Custom Header field.
4. Add the Foundation trigger to the Custom Javascript field.
If you're not familiar to the Foundation Reveal Modal or any of Foundation docs, this is a good place to read more about it and where I went to grab the markup: http://foundation.zurb.com/docs/components/reveal.html
1. So let's start by using the markup for the Modal - copy & paste to the sidebar:
<div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h2 id="modalTitle">Awesome. I have it.<p class="lead">Your couch. It is mine.<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!<a class="close-reveal-modal" aria-label="Close">×</div>
After you pasted the snippet, select it an Ignore Format (CMD + .)
2. Now add the Modal call to a button. This is an example for the Phaedra theme button, but can be applied to any button:
<a href="#" data-reveal-id="myModal" class="button-2 envelope"></a>
3. Call jQuery and Foundation from the Custom Header:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/js/foundation.min.js"></script>
4. Lastly trigger Foundation from the JavaScript field:
$(document).foundation();
That's all to it. You try the demo here:
http://www.archetypon.net/preview/phaedra/plugins/Foundation-Reveal-Modal/
Auto Display
We may also get the modal to display without clicking a button, handy to show any alerts or promotions. In order to accomplish this follow all the steps above and add this piece of code to the Custom JavaScript field, just after the Foundation trigger:
$('#myModal').delay(5000).foundation('reveal', 'open');Tutorial: upgrading to RapidWeaver 6
05-11, 2014
Here's really nice tutorial from Ryan Smith of RapidWeaver Classroom (http://www.rapidweaverclassroom.com) on upgrading from RapidWeaver 5 to RapidWeaver 6:
Parallaxis + Frameworks Integration
05-05, 2014
In an experimental mode Parallaxis can be adapted to work with Bootstrap or Foundation frameworks.
Visit the frameworks demo sites:
http://archetypon.net/preview/parallaxis/frameworks/
There are two main drawbacks to this approach:
Also note that although both frameworks integrate fine with Parallaxis, this approach is an experiment only and no support can be given on any framework requirements, application and editing whatsoever.
I’ve prepared a dedicated tutorial project to help you getting started, download it here:
http://goo.gl/DLqj3k
More info and docs for both frameworks:
http://getbootstrap.com/css/
http://foundation.zurb.com/docs
As always…have fun!
Visit the frameworks demo sites:
http://archetypon.net/preview/parallaxis/frameworks/
There are two main drawbacks to this approach:
- the page will take a few more seconds to load both style sheet and JavaScript files needed
- the simulator will not work properly
Also note that although both frameworks integrate fine with Parallaxis, this approach is an experiment only and no support can be given on any framework requirements, application and editing whatsoever.
I’ve prepared a dedicated tutorial project to help you getting started, download it here:
http://goo.gl/DLqj3k
More info and docs for both frameworks:
http://getbootstrap.com/css/
http://foundation.zurb.com/docs
As always…have fun!
BigVideo + Parallaxis
16-04, 2014
I've just finished an experiment using BigVideo and Parallaxis theme, after a customer request, and thought it could be of interest for other customers as well. It looks really great in Chrome and Safari, not so in Firefox. Did not tested in Internet Explorers at all. For best results we may use mp4, mov or Vimeo videos.
An example can be seen here: http://archetypon.net/preview/parallaxis/BV/
How to do it using Parallaxis theme:
That's all. Note that this is given without any guaranties or support from my part.
Have fun!
An example can be seen here: http://archetypon.net/preview/parallaxis/BV/
How to do it using Parallaxis theme:
- Download the RapidWeaver project from this location: http://goo.gl/ICCNnV
- Open the page in edit mode and double click on the very first element, the HTML element, to edit it's contents
- Replace the link on the little script with a link to your own video
That's all. Note that this is given without any guaranties or support from my part.
Have fun!
Social Media
12-05, 2012
How to embed social media in Photographos themes II, III and IV.
You will need:
Joe Workman's Like It stack
Stacks and Pluskit plugins
Still don’t have Stacks and Pluskit? Go get them, both are “must have” plugins for Rapidweaver:
Stacks
Pluskit
You can also find the Like It stack here:
Joe Workman’s Like It stack
Flickr Tutorial Video
05-05, 2012
Pulling images from Flickr sets is drop dead easy with Photographos theme for Rapidweaver, just watch this tutorial video.
Ready available on Photographos III.
Video Player Tutorial Video
04-05, 2012
Video playback was added in latest versions of Photographos themes (except for Photographos IV).
Implementation is ultra easy, just watch this tutorial video.