Viewing Background slideshows (full screen)

Background slideshows (full screen)



User: Joe N. 9 years ago
"Make sure you dragged the images and the query.backstretch.min.js file into the EverWeb Assets list."

I've tried dragging this code into the assets list, but I can't. What am I doing wrong Roddy?
User: Roddy 9 years ago
You don't drag the code - you drag the jquery.backstretch.min.js file and the images into Assets and paste the code into the Footer Code box in the Page inspector.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Joe N. 9 years ago
Where is this file? "you drag the jquery.backstretch.min.js file"
User: Joe N. 9 years ago
Ok, I found the file and put it in the assets folder. I've inserted the code. And set the relative paths. Here is the error I'm getting: [Error] Not allowed to load local resource: file:///Users/MoJoe/Library/Application%20Support/EverWeb/9A61EA8BE7E84B65A8B736EFFE8A6912.everweb/Assets/External%20Files/jquery.backstretch.min.js//file (index.html, line 0)
User: Roddy 9 years ago
That's not a relative path.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Joe N. 9 years ago
That's the error message.
Ok, I'll try again.

Last edit 9 years ago
User: Roddy 9 years ago
Relative path...

{!-ASSETSPATH-!}External%20Files/jquery.backstretch.min.js

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Joe N. 9 years ago
FINALLY!
http://goldenlightproductions.com/index.html
Thank you Roddy!
User: Sheldon R. 3 years ago
Help!
I have tried and tried and scoured every bit of the forums and Google searching and here is the closest and more explicit set of instructions and still I am not getting it.

Here is my posting.
Quote: Sheldon R. - 22/07/2020 1:21:33
To date, I am unable to find any explicit tutorials on how to create that backstretch browser background effect using the open source java script available here, https://www.jquery-backstretch.com and other places.

What I am trying to copy is how the background changes in the example website, http://www.yelenakurdina.com featured by EverWeb in the example gallery (https://www.everwebapp.com/resources/customer-sites/) and later I want to do something fancy as done here http://vegas.jaysalvat.com

I have tried Googling for answers, but most address doing in WP, Drupal, or some other web building kit but not how it is done using EverWeb.

I am looking for clear, step by step instructions on how to recreate what I see at aforementioned sites using EverWeb.

I hate coding. Hence why I like the drag n drop interface of EverWeb and iWeb before then. If there is coding, then please, please, be very explicit and clear on what needs to be done and how to do it. A video walkthrough like how done in Unity instructional videos is ideal.

Otherwise, I am a capable reader.

Thanks in advanced.


To date, I have not received any reply from the 'yelena' nor from Scott.

Again, reading this thread was the more clear, explicit instructions but to no avail.
Other threads read include,
• https://billing.ragesw.com/forum.php?act=thread&tid=817
but with dead links and incomplete postings, I am unable to figure out what to do.

What I have done, among the various things is thus.
• After downloading from Scott Robbin, I dragged the .js files into the Assets
Then used the HTML Snippet widget to add the suggested code -- Copy & paste from the website itself
No effect.
• The closest success has been through a third party app, Wow Slider, which after drag-n-dropping the images, the app spit out two folders that were to uploaded to the server, the java scripted to added to the <head> and the html code to be added to the body.
Success of some sort. Where I placed the HTML Snippet is where the images and slideshow did appear -- but not the effect I wanted by comparison to the aforementioned sites.

• Some places instructed placing the .js code into the <head> while another advise placing in the <body>
Which gives?

• To date, I happened upon this thread which contains the most readable and comprehensible, albeit not informative, set of instructions.
What I have done.
1. Re-downloaded the files from Scott Robbin's site and decompressed zip file
2. Dragged 'n' dropped all .js files from folder into the Assets, one by one.
3. Using the code from this very thread,
Quote: Roddy - 14/04/2014 6:05:31

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/java script"></script><br />
<script src="{!-ASSETSPATH-!}External%20Files/jquery.backstretch.min.js" type="text/java script"></script><br />
<script type="text/java script"><br />
$.backstretch([<br />
"{!-ASSETSPATH-!}Images/image-1.jpg",<br />
"{!-ASSETSPATH-!}Images/image-2.jpg",<br />
"{!-ASSETSPATH-!}Images/image-3.jpg"<br />
], {<br />
fade: 2000,<br />
duration: 4000<br />
});<br />
</script>

which seemed similar and not unlike all other code I came across in my Googling, I copied & pasted into the Home page Footer box.

4. Right-clicked on jquery.backstretch.min.js file for 'Copy Relative File Path..." then pasted into src="..." in Footer code.
5. Right-clicked three photos of choice -- used just the default photos from the template for quick testing, to 'Copy Relative File Path...".
6. One by one, I pasted the copied addresses/file path of each photos into the Footer code, replacing what was between the quotes i.e. I changed
Quote:
"{!-ASSETSPATH-!}Images/image-1.jpg",<br />

to
Quote:
"{!-ASSETSPATH-!}Images/photo-2.jpg"


7. I saved.
8. I selected Preview
9. Nothing noticeable
10. I published.
11. Still no noticeable effect

Compared site source code.
Because I play ARGs, I know how to access and examine website's source code.

• In one attempt, I copied & pasted the <script> pertaining to the slideshow from Yelena's source code and pasted into my HTML Snippet. Obviously, to no effect.
• An examination of http://goldenlightproductions.com/index.html shows such a clean, bare essentials code, and right there in the footer is code from this thread.
• Comparing my source code, curious to note that .js files do not appear. Ah ha! that is the problem? Using another third party app, I did a direct ftp upload of the .js files into both ewExternalFiles and the ew_js folders. Obviously, to no effect.
• In the GoldenLight site, I can see all the .js files, including the jquery.backstretch.js and the jquery.min.js files
vs
my site, under the source code, even after having uploaded the all the .js files from the downloaded Scott Robbin folder, only the jquery.min.js files shows up.
Yet sure enough, the code I pasted in the Footer box for the page, has the line, src="ewExternalFiles/jquery.backstretch.js" followed by the rest of the copied code.

Further points.
• HTML Snippet widget only works in a restricted spot on the page wherever placed. I cannot expand or cover the actual "browser background" which is not the same as the Page background.
• I am unable in EverWeb seemingly to choose None for "browser background" either an image fill or color fill.
• Why are not all the js files being uploaded? Of course, this is after repeated publishings.
• I host more than one site in my domain. I shall like to be able to use the same slideshow effect for multiple sites I create and not be limited to one site that uses this backstretch effect.

Finally, here is my testing site url
http://www.geocities.ws/sheldonross/public/testing/index.html

On MacBook Pro laptops, one running Mojave, the other Catalina.
My iMac desktop still on Sierra (10.12)
I am using, to date, the current EverWeb -- not EasyWeb, ver. 3.1
I am using template "Delicious".


I do apologize for seemingly hijacking this thread but addresses the same issue with some success apparently and I am at my wit's end trying to figure out what seems to be a common website feature.

So I am posting here in hopes of receiving clear, comprehensive directions on what needs to be done to achieve the desired effect.
Acknowledge but forget where I made my mistakes. Just correct and direct on what I should do.

Thank you.

Last edit 3 years ago
User: Sheldon R. 3 years ago


https://www.dropbox.com/s/5gbvw32zc227ooy/Screen%20Shot%202020-07-22%20at%2010.54.04%20PM.png?dl=0

difference between what I seen in source code and ftp upload

Last edit 3 years ago


Post Reply
You must login or signup to post.