Free responsive HTML5 slideshow - Slippry

Has anyone tried this one yet? It looks good - (Still waiting for Exhibeo to have a simple undecorated responsive slideshow that auto-plays.)

Anyway, the code is here for this (on the main page +extras on another) but I’m unsure about how one would wedge this into FW.

Drop all items ifrom the Zip folder into the site root level? Add one HTML box with Markup? Pretty sure we add Extended attributes?
The thing is, I think it’s done in pieces in different places - so any assist would be greatly appreciated and hopefully useful to many others to read and learn too.

Here’s what’s in the Zip - http://photography.karenengel.com/img/s3/v8/p1398713125-3.jpg


freewaytalk mailing list
email@hidden
Update your subscriptions at:

I did try Slippry about a year ago, together with Responsive Slides. The latter made the cut.

Both did take some ‘extended attributes’ work and some Markups … Responsive Slides did it for me at that time. Perhaps also worth a look.

Richard


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Hi, I agree with Karen E. Slippry looks very cool. I especially like the Ken Burns effect. So, if anyone has a write-up on how to implement this in Freeway Pro, I’d love to see it too!
– Lewis


freewaytalk mailing list
email@hidden
Update your subscriptions at:

I haven’t had time to play with it, and in my current/new project I’m using a [sequence timer + target show/hide] to get the one “hero” slideshow I wanted. Elsewhere I use Exhibeo - I just didn’t want it on the home page because it doesn’t auto start, and you can’t hide the controls (among other things)
http://www.gatorpromo.com

If I ever get back to this, I’m guessing Slippry can very likely be implemented using the same Amazing Slider implementation guide for FW - (minus step 1 parts that aren’t relevant)

https://amazingslider.com/how-to-add-jquery-slider-to-freeway-pro/

If you try it and it works - let us know!


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Hi Karen, I’ve been playing around with Slippry and cannot get it to work – yet. I think that it’s likely I don’t have the resources in the right Site folder locations, though I’ve tried many options.
I think it’s possible to implement, though some step by step how to do so in Freeway would be most helpful. I’ll get muddling and if successful will update this post.
The code before in head and the html insert look pretty straight forward, there’s obviously something I’m missing.


freewaytalk mailing list
email@hidden
Update your subscriptions at:

One of the most important things if it comes to slider (or carousel) is to check if it is possible to recreate it natively in Freeway. The answer for slippry is yes - as long as you follow a markup such as:

This is using DIVs while some others do lists (which is nearby impossible). But I think all the rest could be created in DIV-structure as well.

Dealing with native code-snippets is mostly off the view of average mortal “why should I know about code” web designers, so its implementing.

Share a public link - so chances increase getting a helpful hand what’s going wrong.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:

I’ve been playing around with Slippry and cannot get it to work – yet. I think that it’s likely I don’t have the resources in the right Site folder locations, though I’ve tried many options.

Post a link to an online example that you have made and we can suggest where you might be going wrong.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Hi Thomas and David, I’ve been trying to get this to work locally on my computer as I didn’t want to mess up the file structure of a live working website.

Here is the Before html I’m using:

and the html markup inserted into the page:

  • Welcome to Slippry!
  • This is an awesome jQuery slider plugin.
  • Check it out, you are going to <span class='red'>♥</span> it :)

with this and a lot playing with where the Slippry files go, I get a display on screen that shows three images. They are not in a slider and they all appear at the same time vertically and they are not responsive.

While my goal is to get the Ken Burns effect working, I’m just trying to get Slippry to work first as a basic slider.

I have a screenshot of the file structure under my Site Folder but cannot get it into this response. I would be happy to email to anyone that wants to take a look.

If I simply must put it live, let me figure a way that I can remove/fix files/folders improperly loaded up to the website.

Thanks for any help!


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Hi all, here’s a link to my Site Folder structure.

http://www.steedrealestate.com/Resources/ScreenShot.pdf

Again, I’m not at all sure what files to put where to get Slippry to work. I’ve taken a just that .js files need to be in js folder and css files need to be in css folder, that’s from looking at the src reference locations in the code.

You can get all the Slippry files from here:
https://github.com/booncon/slippry/archive/v1.3.1.zip

I’m also unclear where this following code goes:

Call Slippry slider
Make sure it’s called within $(document).ready()!

jQuery(document).ready(function(){
jQuery(‘selector’).slippry()
});


freewaytalk mailing list
email@hidden
Update your subscriptions at:

On 23 Sep 2015, 4:57 pm, Lewis wrote:

Hi Thomas and David, I’ve been trying to get this to work locally on my computer as I didn’t want to mess up the file structure of a live working website.

Hi Lewis,

consider dropbox for “local” development. Unfortunately it is - at least for me - impossible to debug theoretical things going on in a nutshell. I need “inspect items” in a browser to figure out things going on (the best I can). Cause this reflects the major points such as paths, connections, resources and structure (down to your Freeway file you’re working on).

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Here is the Before html I’m using:

This link to jQuery will NOT work locally. Only online!

Try this instead

<script src=”https://code.jquery.com/jquery-1.10.2.min.js”>

I’m also unclear where this following code goes:

Have a look at my example http://deltadesign.co/FW7Test/slippry.html - it uses the Ken Burns effect and all the code for that is added before

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Just to explain this a little more, the reason why the code example is given in this form (using the leading // instead of a full http://) is so that the same code example can be dropped into a page that is being hosted on a secure server (https://) and nothing will break or throw a security warning.

When you preview a page locally on your Mac, the URL is expanded to file:/// (yes, three slashes) and that means a “root relative path” from the very top of your filesystem to the HTML page, like this: file:///Users/dave/Documents/Projects/Client%20Name/Web/Version9/Site%20Folder/index.html Since there isn’t such a file on your Mac as /ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js (unless you take the step of creating such a nest of folders at the root of your hard drive and copying the jQuery library file into the appropriate folder) the script will just not load.

Walter

On Sep 23, 2015, at 6:24 PM, DeltaDave email@hidden wrote:

Here is the Before html I’m using:

This link to jQuery will NOT work locally. Only online!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

I’ve got this working and am happy to create a tutorial, but am stumped on something…

I am using this in BackDraft, and no matter what I put under the div holding the Slippry mark up (even another div or two), if it has text in it, the text is linked to the last slide…

pageName#lastSlideName

You can look at the file at http://soletc.com/kms/sly.html

'been banging my head on this for hours and am still clueless!

-Thanks


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Solutions Etcetera, this looks good and other than your issue, I’d love to see a tutorial - a step by step how to recreate it. What code to put in where and how. And what resource files need to be uploaded to the web server. Look forward to your further postings. - Lewis


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Nevermind… figured it out.

stupid typos!!!


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Great to hear! Cannot wait to see your step-by-step tutorial in figuring out how to integrate Slippry into Freeway Pro with Backdraft template! Really appreciate all the sharing and help on the forums.


freewaytalk mailing list
email@hidden
Update your subscriptions at:

As promised…

http://soletc.com/slippry/


freewaytalk mailing list
email@hidden
Update your subscriptions at:

so far, so nice.

Small note on this:

Never call JavaScript before CSS files!

Preferably call CSS in the before end head Tag, and JS in the before end body Tag (behind the fold).

Sorting order for JS (behind the fold)

  1. Basic Library (e.g. jQuery)
  2. Specific Libraries (eg. slippry.min.js)
  3. The functional part (wrapped in script Tags)

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:

On 28 Sep 2015, 12:56 pm, Thomas Kimmich wrote:

Small note on this:
Never call JavaScript before CSS files!

Why not?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

There are a couple of reasons:

  1. Assumed JS will screw up

    Then you end up in an unstyled page (cause CSS isn’t loaded).

  2. Browser

    There had been an experience in the past which leaded to this “rule”. I think it was a minor number of Firefox.

  3. Loading issues

    JS is the monolith. You force heavy loading before small loading. The other way round, you’l ensure that “full rendered” comes before “full function”.

It’s always better to have “content” first and function later. Cause in this case you can view and read which is preferably the main aspect of web-design. Think of the electric toothbrush. If power fails, it’s still a toothbrush.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at: