Slideshow

Bezleputh

Slideshow
July 18, 2014 07:34PM

Registered: 10 years ago
Posts: 25

Hello,

Little post to share a hack I made in order to add a slideshow in the piratebox main page.

This plugin will display a slideshow using photos uploaded in your PirateBox.
It is based on ResponsiveSlides.js (https://github.com/viljamis/ResponsiveSlides.js)

You can install this addon using admin panel automatocally.
Or you can install it manually, in this case :

1. Run install.sh
2. Add those two lines in index.html

Language: HTML...
    <head>
        <link rel="stylesheet" href="style.css">
        <title>PirateBox - Share Freely!</title>
        <script src="jquery.min.js"></script>
        <script src="scripts.js"></script>
        <!-- add the slideshow javascript here -->
        <script src="slideshow/script.js"></script>
        <!-- add the slideshow javascript here -->
 
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
    </head>
    ...
 
    ...
        <div id="main">
              ...
              <!-- add the slideshow div here -->
              <div id="slideshow" class="card"></div>
              <!-- add the slideshow div here -->
              ...
         </div>
    ...

3. Enjoy !

Here are some photos to show how it looks like:

Version 0.0.4
- hyperlink the slideshow photos to the file folder location

Version 0.0.3
- fix install script

Version 0.0.2
- get photos from subfolders

Version 0.0.1
- first try

You can download the package here : slideshow.zip

Edited 6 time(s). Last edit at 02/24/2016 11:20AM by Bezleputh.

Reply Quote

mikefisher2176

Re: Slideshow
November 14, 2014 06:28AM

Registered: 10 years ago
Posts: 23

Well this if I have pictures stored in a subfolder of the shared folder

Reply Quote

Bezleputh

Re: Slideshow
November 17, 2014 01:46PM

Registered: 10 years ago
Posts: 25

Hello,

I updated the zip file.
Now the slideshow plugin will also browse subfolders photos

Reply Quote

mikefisher2176

Re: Slideshow
November 18, 2014 10:02PM

Registered: 10 years ago
Posts: 23

Awesome!!!

Reply Quote

mikefisher2176

Re: Slideshow
November 19, 2014 07:38AM

Registered: 10 years ago
Posts: 23

I'm sorry but I don't understand how you are able to unzip the folder in www. It's not visible when in a Windows, am I missing something? Could you please explain? I'm super new to all of this! smiling smiley

Reply Quote

lostsys

Re: Slideshow
November 19, 2014 11:49AM

Registered: 10 years ago
Posts: 38

Yes.. I can see the difficulty..

I think what you want to do is copy the zip into the Shared folder on the USB stick
then
via ssh root@192.168.1.1
cd ../
then cd opt/piratebox/shared (will take you to the usb stick)
then copy and unzip the file from there into the www folder (via ../www ..)

To copy files:
[askubuntu.com]

Hope this helps somehow..

Reply Quote

Bezleputh

Re: Slideshow
November 19, 2014 12:40PM

Registered: 10 years ago
Posts: 25

As said by lostsys, the simpliest way to do if you are new to all of this would be to upload the zip file using the piratebox user interface.

then:
ssh root@192.168.1.1

cd /opt/piratebox/www
unzip ./Shared/slideshow.zip -d .

concerning the index.html file, you can start by creating a copy

cp index.html index.html.bk

then

vi index.html

you can edit this file like this:

Language: HTML...
<head>
        <link rel="stylesheet" href="style.css">
        <title>PirateBox - Share Freely!</title>
        <script src="jquery.min.js"></script>
        <script src="scripts.js"></script>
        <!-- add the slideshow javascript here -->
        <script src="slideshow/script.js"></script> 
        <!-- add the slideshow javascript here -->
 
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
</head>
...

and

Language: HTML...
                <div id="main">
                           ...
                            <!-- add the slideshow div here -->
                            <div id="slideshow" class="card"></div>
                            <!-- add the slideshow div here -->
                           ...
                </div>
 
...

you can find some help about editing a file using vi here

PS: I do not have acces to my pirateBox right now, so some things should not be exact, do not hesitate to adapt in case of error

Reply Quote

mikefisher2176

Re: Slideshow
November 20, 2014 04:28AM

Registered: 10 years ago
Posts: 23

Thanks for the help guys n gals. It is much appreciated! A twelve hour day at work has got me wore out so I'll give this a shot tomorrow and let you know how it turned out.

Reply Quote

sniper_eyes

Re: Slideshow
November 24, 2014 03:28PM

Registered: 11 years ago
Posts: 71

Hi,

How can I run install.sh? Sorry I'm a newbie. Thank you.

Reply Quote

Bezleputh

Re: Slideshow
November 24, 2014 05:01PM

Registered: 10 years ago
Posts: 25

Hi,

Once you unzip the slideshow zip file as describe below.

cd /opt/piratebox/www/slideshow
chmod +x install.sh
./install.sh

Reply Quote

mikefisher2176

Re: Slideshow
November 25, 2014 06:54AM

Registered: 10 years ago
Posts: 23

I think I might have Lil problem. I getting a blank box where the pictures should be at. I've for my box setup to where you can upload to specific folders, none of which are password protected. Could this be causing a problem for me? My pictures would be in sub of the shared folder by just one level. I double checked my index.html file to make sure I put everything in Ok and that seems fine. Any ideas Bezleputh?

Reply Quote

Bezleputh

Re: Slideshow
November 25, 2014 11:44AM

Registered: 10 years ago
Posts: 25

Hum you should find a slideshow_content.html file inside the slideshow folder.
This file should contain the part of code that will be used to display your photos.

Is this file well filled ? (could you find the location of your photos inside)

Could you post the content of this file (slideshow_content.html) and the content of your index.html file ?

Reply Quote

sniper_eyes

Re: Slideshow
November 26, 2014 01:36AM

Registered: 11 years ago
Posts: 71

Bezleputh Wrote:
-------------------------------------------------------
> Hi,
>
> Once you unzip the slideshow zip file as describe
> below.
>
>
> cd /opt/piratebox/www/slideshow
> chmod +x install.sh
> ./install.sh
>

Hello,

After unzipping the slideshow zip and running the install.sh, this shows up:

mv: can't rename 'cgi-bin/generate_slideshow_content.py': No such file or directory

What could be the problem? Thank you.

Reply Quote

Bezleputh

Re: Slideshow
November 26, 2014 12:27PM

Registered: 10 years ago
Posts: 25

My bad, there is a mistake in the install.sh file ... (too easy, too quickly written, not tested ....)

I recreated a zip package.

Anyway, if you do not want to download and install it again, you can easily correct the file by replacing

mv cgi-bin/generate_slideshow_content.py ../cgi-bin/

by

mv ./cgi-bin/generate_slideshow_content.py ../cgi-bin/

using vi and re-run install.sh

Reply Quote

sniper_eyes

Re: Slideshow
November 26, 2014 02:22PM

Registered: 11 years ago
Posts: 71

Hi,

I tried to download and unzip the new zip file you uploaded but still same problem shows up. What could be wrong? Thank you.

Reply Quote

Bezleputh

Re: Slideshow
November 27, 2014 01:02PM

Registered: 10 years ago
Posts: 25

Hum could you post the content of the install.sh file ?

Reply Quote

sniper_eyes

Re: Slideshow
November 29, 2014 09:43AM

Registered: 11 years ago
Posts: 71

Here are the contents, I opened the install.sh it with notepad:

#!/bin/sh

mv ./cgi-bin/generate_slideshow_content.py ../cgi-bin/
chmod +x ../cgi-bin/generate_slideshow_content.py

Thank you.

Edited 1 time(s). Last edit at 11/29/2014 09:44AM by sniper_eyes.

Reply Quote

mikefisher2176

Re: Slideshow
November 29, 2014 05:58PM

Registered: 10 years ago
Posts: 23

Hey Bezleputh,
i got a chance to look at the slideshow_content.html to see if it was populated by my pictures and at first it did look it was. But then I got to looking at the file names more closely and they are picture files that are not on my piratebox. I would post what is in there but I am unsure of the command to copy the screen to the clip board, I'm using my phone to access the box through an ssh client. You think there might be something going on with the script? Thanks for the help!!!

Reply Quote

Bezleputh

Re: Slideshow
December 01, 2014 12:14PM

Registered: 10 years ago
Posts: 25

@sniper_eyes ....

Strange that should work... I will double check on my PB tonight.

could you try to connect to your piratebox using ssh and run those commands manually :

cd /opt/piratebox/www/slideshow
mv ./cgi-bin/generate_slideshow_content.py ../cgi-bin/ 
chmod +x ../cgi-bin/generate_slideshow_content.py

then check if the slideshow works ?

Reply Quote

Bezleputh

Re: Slideshow
December 01, 2014 12:42PM

Registered: 10 years ago
Posts: 25

@mikefisher2176

Hum I think that the content of your slideshow_content.html file are some exemples I forgot to remove before packaging....

It means that this file as not been regenerated.
Two possibilities:
- slideshow/script.js is not called by the index.html
- /opt/piratebox/www/cgi-bin/generate_slideshow_content.py is not called by slideshow/script.js.

We will first try to test generate_slideshow_content.py

Does this command returns something:

ls -l /opt/piratebox/www/cgi-bin/generate_slideshow_content.py

<script src="slideshow/script.js"></script>

index.html

cd /opt/piratebox/www/slideshow
mv ./cgi-bin/generate_slideshow_content.py ../cgi-bin/
chmod +x ../cgi-bin/generate_slideshow_content.py

Reply Quote

sniper_eyes

Re: Slideshow
December 02, 2014 01:03PM

Registered: 11 years ago
Posts: 71

Bezleputh Wrote:
-------------------------------------------------------
> @sniper_eyes ....
>
> Strange that should work... I will double check on
> my PB tonight.
>
> could you try to connect to your piratebox using
> ssh and run those commands manually :
>
>
> cd /opt/piratebox/www/slideshow
> mv ./cgi-bin/generate_slideshow_content.py
> ../cgi-bin/
> chmod +x ../cgi-bin/generate_slideshow_content.py
>
>
> then check if the slideshow works ?

Sir,

I tried to do it manually but still no slideshow appears on the main page.

Thanks.

Snipy

Reply Quote

Bezleputh

Re: Slideshow
December 02, 2014 01:18PM

Registered: 10 years ago
Posts: 25

You did not encountered an error running those commands manually ?

Could you post the content of theindex.html file and the content of slideshow/slideshow_content.html ?

Could you also post the result (or the screenshot of the result) of this command :

ls -R /opt/piratebox/www/

Regards

Reply Quote

mikefisher2176

Re: Slideshow
December 03, 2014 02:36PM

Registered: 10 years ago
Posts: 23

Hi Bezleputh,
thanks for taking the time. I ran the firstcommand you asked me to do and it gave me this:
-rwxr-xr-x 1 root root 1151 Nov 17 13:18 /opt/piratebox/www/cgi-bin/generate_slideshow_content.py

I checked the index.html file and everything checked out ok. When I triex the mv command it said it could not rename ./cgi-bin/generate_slideshow_content.py

Reply Quote

Bezleputh

Re: Slideshow
December 03, 2014 03:53PM

Registered: 10 years ago
Posts: 25

Ok, the failure of the mv command is logical, generate_slideshow_content.py has already been moved in the proper location.

Would it be possible to run this command and post the result ?

ls -Rl  /opt/piratebox/www/slideshow

In the result, you should find a line that should looks like this :

-rwxr-xr-x 1 root root 1151 1074 déc.   3 16:32 /opt/piratebox/www/slideshow/script.js

if the bolded x are missing, could you run this command and re-test

chmod +x /opt/piratebox/www/slideshow/script.js

If it is still not working, could you send me your in PM the index.html and slideshow/script.js files.
An easy way to do is to copy those files in the Shared folder using those commands :

cp /opt/piratebox/www/slideshow/script.js /opt/piratebox/www/Shared/
cp /opt/piratebox/www/index.html /opt/piratebox/www/Shared/

Then you will be able to access them using your browser in the browse files section.

Reply Quote

sniper_eyes

Re: Slideshow
December 04, 2014 03:02PM

Registered: 11 years ago
Posts: 71

@Bezleputh

Sir here are the results of the command:

root@piratebox:~# ls -R /opt/piratebox/www/
/opt/piratebox/www/:
Shared library
board menu.png
cgi-bin ncsi.txt
chat_content.html piratebox-logo-horizontal-white.png
favicon.ico piratebox-logo-small.png
forban_link.html redirect.html
forum.html scripts.js
index.html slideshow
index.html.bk station_cnt.txt
install.sh style.css
jquery.min.js

/opt/piratebox/www/cgi-bin:
data.pso psowrte.py
generate_slideshow_content.py style.css
psoread.py

/opt/piratebox/www/library:
test

/opt/piratebox/www/library/test:
success.html

/opt/piratebox/www/slideshow:
README.TXT install.sh script.js
cgi-bin responsiveslides.css slideshow_content.html
index.html responsiveslides.min.js template.txt

Thank you.

Reply Quote

sniper_eyes

Re: Slideshow
December 04, 2014 03:16PM

Registered: 11 years ago
Posts: 71

@Bezleputh

Sir,

Please see the screenshots on the following links below:

[dl.dropboxusercontent.com]
[dl.dropboxusercontent.com]
[dl.dropboxusercontent.com]

Thank you

Snipy

Edited 1 time(s). Last edit at 12/04/2014 03:17PM by sniper_eyes.

Reply Quote

Bezleputh

Re: Slideshow
December 04, 2014 03:44PM

Registered: 10 years ago
Posts: 25

@sniper_eyes

hum, would it be possible to screenshoot the result of :

ls -lR /opt/piratebox/www/

(the 'l' (lowercase L) near the R is important to see if the files /opt/piratebox/www/slideshow/script.js and /opt/piratebox/www/cgi-bin/generate_slideshow_content.py can be launch by the index webpage)

Reply Quote

sniper_eyes

Re: Slideshow
December 04, 2014 09:37PM

Registered: 11 years ago
Posts: 71

@Bezleputh

Sir here are the results:

root@piratebox:~# ls -lR /opt/piratebox/www/
/opt/piratebox/www/:
lrwxrwxrwx 1 root root 27 Jan 1 00:11 Shared -> /opt/piratebox/share/Shared
lrwxrwxrwx 1 root root 26 Jan 1 00:11 board -> /opt/piratebox/share/board
drwxr-xr-x 2 nobody nogroup 1024 Jan 1 00:02 cgi-bin
-rw-r--r-- 1 nobody nogroup 289 Jan 1 00:00 chat_content.html
-rwxr-xr-x 1 nobody nogroup 1406 May 29 2014 favicon.ico
-rw-r--r-- 1 nobody nogroup 0 Jan 1 00:11 forban_link.html
-rwxr-xr-x 1 root root 254 Jan 1 00:12 forum.html
-rw-r--r-- 1 nobody nogroup 4030 Jan 1 00:04 index.html
-rw-r--r-- 1 root root 4030 Jan 1 00:03 index.html.bk
-rwxr-xr-x 1 root root 0 Jan 1 00:02 install.sh
-rwxr-xr-x 1 nobody nogroup 94840 May 29 2014 jquery.min.js
drwxr-xr-x 3 nobody nogroup 1024 May 29 2014 library
-rw-r--r-- 1 nobody nogroup 2992 May 29 2014 menu.png
-rw-r--r-- 1 nobody nogroup 15 May 29 2014 ncsi.txt
-rw-r--r-- 1 nobody nogroup 6607 May 29 2014 piratebox-logo-horizontal-white.png
-rwxr-xr-x 1 nobody nogroup 12637 May 29 2014 piratebox-logo-small.png
-rwxr-xr-x 1 nobody nogroup 201 May 29 2014 redirect.html
-rwxr-xr-x 1 nobody nogroup 3715 May 29 2014 scripts.js
drwxr-xr-x 3 root root 1024 Jan 1 00:03 slideshow
-rw-r--r-- 1 nobody nogroup 122 Jan 1 00:02 station_cnt.txt
-rw-r--r-- 1 nobody nogroup 5129 Jan 1 00:07 style.css

/opt/piratebox/www/cgi-bin:
-rwxr--r-- 1 nobody nogroup 132 Jan 1 00:00 data.pso
-rwxr-xr-x 1 root root 1151 Nov 17 2014 generate_slideshow_content.py
-rwxr-xr-x 1 nobody nogroup 315 May 29 2014 psoread.py
-rwxr-xr-x 1 nobody nogroup 804 Jan 1 00:10 psowrte.py
-rwxr-xr-x 1 nobody nogroup 298 May 29 2014 style.css

/opt/piratebox/www/library:
drwxr-xr-x 2 nobody nogroup 1024 May 29 2014 test

/opt/piratebox/www/library/test:
-rw-r--r-- 1 nobody nogroup 127 May 29 2014 success.html

/opt/piratebox/www/slideshow:
-rw-r--r-- 1 root root 512 Nov 19 2014 README.TXT
drwxr-xr-x 2 root root 1024 Jan 1 00:02 cgi-bin
-rw-r--r-- 1 root root 48 Jul 29 2014 index.html
-rwxr-xr-x 1 root root 116 Nov 26 2014 install.sh
-rw-r--r-- 1 root root 490 Jul 29 2014 responsiveslides.css
-rw-r--r-- 1 root root 3397 Jul 29 2014 responsiveslides.min.js
-rw-r----- 1 root root 1074 Nov 18 2014 script.js
-rw-r--r-- 1 root root 727 Jul 29 2014 slideshow_content.html
-rw-r--r-- 1 root root 406 Jul 29 2014 template.txt

Thank you.

Reply Quote

Bezleputh

Re: Slideshow
December 05, 2014 01:08PM

Registered: 10 years ago
Posts: 25

ah !

could you try to run this command :

chmod +x /opt/piratebox/www/slideshow/script.js

It will give execution rights to the file script.js

Reply Quote

sniper_eyes

Re: Slideshow
December 05, 2014 01:36PM

Registered: 11 years ago
Posts: 71

Sir,

It's still not working sad smiley

Reply Quote