PIRATEBOX

Slideshow

Posted by Bezleputh 
This forum is currently read only. You can not log in or make any changes. This is a temporary situation.
Now, this forum is in read-only mode. You find details Details hereContinue on /r/PirateBox
Forum List Message List New Topic
Bezleputh
Slideshow
July 18, 2014 07:34PM
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
Well this if I have pictures stored in a subfolder of the shared folder
Reply Quote
Bezleputh
Re: Slideshow
November 17, 2014 01:46PM
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
Awesome!!!
Reply Quote
mikefisher2176
Re: Slideshow
November 19, 2014 07:38AM
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
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
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
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
Hi,

How can I run install.sh? Sorry I'm a newbie. Thank you.
Reply Quote
Bezleputh
Re: Slideshow
November 24, 2014 05:01PM
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
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
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
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
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
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
Hum could you post the content of the install.sh file ?
Reply Quote
sniper_eyes
Re: Slideshow
November 29, 2014 09:43AM
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
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
@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
@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

    [*] yes, could you check that there is no error on this line <script src="slideshow/script.js"></script> in index.html

    [*] no, could you try to run the following lines
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
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
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
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
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
@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
@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
@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
@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
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
Sir,

It's still not working sad smiley
Reply Quote
Page 1 of 2    Pages: 12Next
Newer Topic Older Topic