[TW5] Galleria JavaScript in TW5

231 views
Skip to first unread message

RichShumaker

unread,
Dec 14, 2014, 3:26:29 PM12/14/14
to tiddly...@googlegroups.com
Hello everyone here on TW Dev,
First I don't know if I post here or GitHub so I am starting here.
Let me know if I need to bounce it over to GitHub.

I am trying to understand how to get Galleria into TW.
I have downloaded the JavaScript and dragged and dropped it into TW.
galleria-1.4.2.min.js
galleria-1.4.2.js 
I then changed the Type to "application/javascript".
Is this the right way to get the code into TW?

Next I need to use that code if the above is correct.
I am trying to work with the demo code

<!doctype html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
        <script src="galleria/galleria-1.4.min.js"></script>
    </head>
    <body>
        <div class="galleria">
            <img src="photo1.jpg">
            <img src="photo2.jpg">
            <img src="photo3.jpg">
        </div>
        <script>
            Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
            Galleria.run('.galleria');
        </script>
    </body>
</html>

I am not sure how to change the external references and code above to be 'inside TW'
Any help would be greatly appreciated.

Rich Shumaker

Tobias Beer

unread,
Dec 14, 2014, 7:08:56 PM12/14/14
to tiddly...@googlegroups.com
Hi Rich,

First I don't know if I post here or GitHub so I am starting here.
Let me know if I need to bounce it over to GitHub.

Here is fine, there too. It will take some time, but I think it pays out to find the courage and play with code.
 
I am trying to understand how to get Galleria into TW.

First things first, Adblock doesn't like it.
After disabling it for the site, I actually see a site.
Anyhow... 

I have downloaded the JavaScript and dragged and dropped it into TW.
galleria-1.4.2.min.js
galleria-1.4.2.js 

One is enough, take minified... it's smaller, well, minified.
 
I then changed the Type to "application/javascript".
Is this the right way to get the code into TW?

Also, give it a "module-type" of "library"... I think.
 
Next I need to use that code if the above is correct.
I am trying to work with the demo code

<!doctype html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
        <script src="galleria/galleria-1.4.min.js"></script>
    </head>
    <body>
        <div class="galleria">
            <img src="photo1.jpg">
            <img src="photo2.jpg">
            <img src="photo3.jpg">
        </div>
        <script>
            Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
            Galleria.run('.galleria');
        </script>
    </body>
</html>

Ok, the first thing you see is that galleria comes with an additional dependency, namely jquery.
Would be interesing to know if and how loading such a library from google was supported as in your example.

Alternatively, you could try including jQuery the same way you included galleria...
not sure if that works though, never tried so far.

Secondly, you'd need some js macro that instatiates and runs your galleria script on a selector, e.g.


That macro would perhaps do...

<<galleria "some-class" "optional-template">>

Possibly that macro needs to "require" those libaries for them to be available to whatever it tries to run.
I guess that's not the right approach for jquery though, I wouldn't know yet.
Maybe jquery needs to be loaded on startup... whichever way that is done.

Take a look at how Felix is loading the requred vis.js library in Taskgraph...


Best wishes, Tobias.
Message has been deleted

BJ

unread,
Dec 14, 2014, 8:42:09 PM12/14/14
to tiddly...@googlegroups.com
Hi Rich,
how are you going to use this with tiddlywiki? if you just want it show the slide show in a tiddler you could have it as a separate html file and include that separate html file into a tiddler using an iframe.

cheers

BJ

RichShumaker

unread,
Dec 14, 2014, 11:49:22 PM12/14/14
to tiddly...@googlegroups.com
Thanks Tobias I will research to find out more about what you said and it makes sense for the next steps.
I want all the includes to be inside TW5 so not to have to rely on a net connection if I don't want to have it connected to the net.
Time to start digging into code.

BJ I am trying to come up with solutions to common photo issues I experience with TW5.
Also I am trying to do them inside TW5 so I am avoiding the HTML iFrame option, thank you very much for that idea, I will write it down and at least try it.
TW5 does not have a gallery type options, although Tobias's linkimg works pretty well for creating one.

Right now I am exploring all types of 'options' and 'solutions' for TW5 and Images.
Here is the site I started to track my progress and log my journey, http://www.richshumaker.com/tw5/tw-photo.html
I update my site from my home testing every few days.

I know what I want in my head but it is just not there yet, so I am going to make it(hopefully) and if others use it that would be cool.

Thanks again for your help.

Rich Shumaker

RichShumaker

unread,
Dec 15, 2014, 1:47:51 AM12/15/14
to tiddly...@googlegroups.com
So I downloaded the referenced jQuery Script directly, it is larger than the galleria.js at 277kb.
And here is the Information about the file

/*!
 * jQuery JavaScript Library v1.11.1
 * http://jquery.com/
 *
 * Includes Sizzle.js
 * http://sizzlejs.com/
 *
 * Copyright 2005, 2014 jQuery Foundation, Inc. and other contributors
 * Released under the MIT license
 * http://jquery.org/license
 *
 * Date: 2014-05-01T17:42Z
 */


Also I read information about taking jQuery and making it work with TW Classic not TW5.
Most of the referenced links I found don't exist anymore.
.
Seems to be included in TW Classic or at least on the GitHub, 

So I am off to learn more about JavaScript and jQuery and Galleria

Thanks again everyone.

Rich Shumaker

Tobias Beer

unread,
Dec 15, 2014, 4:48:05 AM12/15/14
to tiddly...@googlegroups.com
Hi Rich,
 
TW5 does not have a gallery type options, although Tobias's linkimg works pretty well for creating one.

As for using galeria in TiddlyWiki, it should be quite straight forward to generate a list of image-tiddlers and have a <<galleria>> macro enable that list for "galeria-view-mode".
 
I know what I want in my head but it is just not there yet, so I am going to make it(hopefully) and if others use it that would be cool.

As for Galeria, I am rather confident you are going to get there with adequate effort ...and I'm sure you'll be getting the help that's needed to do so.

@BJ

how are you going to use this with tiddlywiki?

Precisely the way that galeria example suggests...
  1. render an image list
  2. wrap it in a class
  3. call galeria on it
Sounds simple and probably is... except for the part that we need to find the best way possible first to have jquery loaded into TiddlyWiki. I think this would be the first step in helping Rich achieve that sensible goal.

Best wishes, Tobias.

Tobias Beer

unread,
Dec 15, 2014, 6:49:08 AM12/15/14
to tiddly...@googlegroups.com
Hi Rich,
 
So I downloaded the referenced jQuery Script directly, it is larger than the galleria.js at 277kb.

No need to use anything other than the minified versions of both...

93.5 kb jquery-1.11.1.min
73 kb    galleria-1.4.2.min.js
 
Seems to be included in TW Classic or at least on the GitHub, 

It is, and as you can see it comes with version 1.8.3. in TWc.

Best wishes, Tobias.

BJ

unread,
Dec 15, 2014, 8:00:41 AM12/15/14
to tiddly...@googlegroups.com
at first you could put external calls it initialize the javascript libs (jquery and galleria) in a tiddler and tag it with $:/core/wiki/rawmarkup

galleria can be also be called like this


<div class="galleria"></div>
<script>
var data = [
    { image: "/path/to/myimage1.jpg" },
    { image: "/path/to/myimage2.jpg" },
];

Galleria.run('.galleria', {
    dataSource: data,
});
</script>

which means you could have your galleria widget work with filters to collect image tiddlers
(easy if you have image tiddlers that use the _canonical_uri) 
BJ

Tobias Beer

unread,
Dec 15, 2014, 8:05:52 AM12/15/14
to tiddly...@googlegroups.com
Hi Rich / BJ,

I did some testing and the next problem I could not yet solve is to have galleria load its theme without doing it the way it's used to via Galleria.loadTheme.


Best wishes, Tobias.

RichShumaker

unread,
Dec 15, 2014, 11:26:15 PM12/15/14
to tiddly...@googlegroups.com
Tobias,

Wow, and Thanks, checking out what you built once I take a break.
I have been spending the day learning JavaScript Basics and my head hurts.
Thanks Code Academy.
I need to take CSS lessons after this.

Next step is jQuery.min to save space and I need to learn how to make a tiddler "module-type" of "library".

Once I have the basics of JavaScript I will start to apply what I learn to TW.
Same with the CSS class, silly indents #heheh.

@BJ - Tobias hit it on the head
I want to use Galleria inside TW and see what it does, doesn't do, what I can hack and rework.
Not sure how or what I can or can't do sometimes with TW5 and I needed a starting point so Galleria was it.
My goal is not just 'galleries' but instead a way to deal with all Multimedia.
TW has a lot of Multimedia already so that is awesome, I just want to add more AWE to the awesome.

Thanks again everyone for your help.

Rich Shumaker

RichShumaker

unread,
Dec 15, 2014, 11:32:01 PM12/15/14
to tiddly...@googlegroups.com
figured out the module-type "library" setting.
Very cool the way that works in a Tiddler.

Rich Shumaker

RichShumaker

unread,
Dec 16, 2014, 12:40:56 AM12/16/14
to tiddly...@googlegroups.com
Tobias,

From reading the code for Galleria
Galleria.loadTheme = function( src, options ) {

    // Don't load if theme is already loaded

Question: Could we load the theme when we load TW5?

I see the issue now that I type the question, How will the code find the Tiddler?

Rich Shumaker

RichShumaker

unread,
Dec 16, 2014, 1:42:12 AM12/16/14
to tiddly...@googlegroups.com
Weirdness.
@Tobias
I was testing your [[Test]] and it worked locally but not on the server.
Did you have the same results?

I loved both the External Images(will be learning more about that soon).
I also loved the way you built the [[Galleria]] in a few keystrokes using <Tags>.
That is a great reason to build inside TW and not as an HTML Add in.

This is the way I was hoping I would be able to do stuff.
Fast Galleries using Tagging and External Images(that was actually you as I have been embedding until now).
I know that it is not 100% but it is really far along.

Back to learning more JavaScript.

Thanks again Tobias.

Rich Shumaker

RichShumaker

unread,
Dec 16, 2014, 1:46:54 AM12/16/14
to tiddly...@googlegroups.com
Sorry it did not 'work' it just showed the images.
I got excited to see images but they are not in a 'Galleria'.

Rich Shumaker

Tobias Beer

unread,
Dec 16, 2014, 7:54:46 AM12/16/14
to tiddly...@googlegroups.com
Hi Rich,
 

Question: Could we load the theme when we load TW5?

We can load the theme also later but — as things stand at the moment — it would have to be an external javascript file... I was hoping to avoid that so as to have it in a tiddler.

I see the issue now that I type the question, How will the code find the Tiddler?

Precisely. Will need a little more investigation, or, if all else fails, it will have to be an external js file, I'm afraid.

Best wishes, Tobias.

Tobias Beer

unread,
Dec 16, 2014, 8:41:12 AM12/16/14
to tiddly...@googlegroups.com
Hi Rich,

I did some more fiddling and I've come to the conclusion that, sadly, Galleria's architecture is hard-wired to working with external script- and css files. To get it working as-is, you need put those files in the expected corresponding subfolder structure and then use tiddlers tagged $:/tag/RawMarkup with the contents galleria requires, e.g.:


<script src="galleria/themes/galleria.classic.js"></script>
<link rel="stylesheet" href="galleria/themes/galleria.classic.css">

There is no way for me to hijack and override its internal functions. The only thing that is left to do is to fork the Galleria codebase and rewrite those theme handling bits while doing away with all the external file stuff. That will take some reengineering so as to work in TiddlyWiki.

Best wishes, Tobias.

Tobias Beer

unread,
Dec 16, 2014, 9:00:00 AM12/16/14
to tiddly...@googlegroups.com
Hi Rich,
 
There is no way for me to hijack and override its internal functions. The only thing that is left to do is to fork the Galleria codebase and rewrite those theme handling bits while doing away with all the external file stuff. That will take some reengineering so as to work in TiddlyWiki.

Nope, not doing that. The more I look at it, the more I see just how hard-wired it is to expecting external files and to extract styles from those external stylesheets and all that. So, I won't even try to further modify its source. The only way to use this library is by using it the way it is designed, using external theme files only, within the folder structure of your local directory or that server directory... no remote libraries, I believe.

This thing looks nice when it works... but it's a bit of a pain to implement, unless you follow those file-system-requirements. Galleria was not designed for a SPA (single page app).

Best wishes, Tobias.

RichShumaker

unread,
Dec 16, 2014, 9:24:29 AM12/16/14
to tiddly...@googlegroups.com
Thanks for all the effort Tobias.
I have a feeling the business model(they sell themes) they designed required the software to do what it does.
Which stinks.
But it leads me to think that the software was not always so hardwired and big companies have used them for years.
On the fotomoto(photo selling company) site they say they work with version 1.2.8 of the script but that might be the fact they haven't tested newer versions.

Like I said yesterday I am still learning to walk and learning the basics of JavaScript is my first step.
It was not until I posted that I figured out the external reference issue.

I am going to read over the Galleria stuff at GitHub to see if I can tell if the code was always this way or not.

Also I will start to investigate the code chunks once I can read them to see if I could use any of it.

You rock Tobias and if you go to the hangout say hi to everyone if you read this before that.
I need some more sleep.

Rich Shumaker

RichShumaker

unread,
Dec 16, 2014, 2:25:18 PM12/16/14
to tiddly...@googlegroups.com
Tobias as I said before THANKS.
I went to the oldest version of Galleria(1.2) and I do not think it use the HTTP calls the way the newest does.
It still calls themes though.

If you get a chance to read over the 1.2 code could you see if it is the same architecture and will have the same hurdles.

My next step is to research other JavaScript Galleries as well as exploring Galleria 1.2 or 1.28 more.
I think that forking will be the best solution if I decide I have to use this code and being new to JavaScript and GitHub I won't be up to it for a little bit(maybe tomorrow ;)).
I think it will be my first 'real' project we will see.

Thanks for all your help.

Rich Shumaker

RichShumaker

unread,
Dec 16, 2014, 2:59:18 PM12/16/14
to tiddly...@googlegroups.com
I read some more on Galleria 1.2 and it seems to "activate" things differently.
I have also done some more research and found another javascript gallery to try.

I will be researching the forums to see if anyone has tried this one.
I will probably start a research list of the different galleries I find that are javascript based.
I am sensing a theme though jQuery.

Thank you Tobias for your research on jQuery as it seems that will be necessary for most of them.

Rich Shumaker

Bertrand Grégoire

unread,
Oct 5, 2016, 2:37:22 PM10/5/16
to TiddlyWikiDev
Seems to me like http://photoswipe.com/ could be a good candidate.
How is this project going?
Reply all
Reply to author
Forward
0 new messages