How can I embed photo slideshows the are viewable on iPad (i.e. non-flash)?

  • 1
  • Question
  • Updated 7 years ago
  • Answered
I need to embed a photo slideshow in my website that is readable on iPad (i.e. non-flash). I tried Slide.com but it doesn't work with iPad. I have a product called WOW Slider, but I don't know how to get the slideshow embedded on my site. I end up with a file that has a ".wowsl" extension. Any answers?
Photo of Larry Onaga

Larry Onaga

  • 5 Posts
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hello,
I am unaware of a slideshow program that is not flash based and will work specifically on an iPad. I am going to ask our HTML team to take a look at this as they might be aware of some options. Please allow for 48 hours for them to review this case and get back to you here. Thanks for your patience in the meantime.

Kind Regards,
Emmy
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Hey Larry, after some searching, I found a slide show jquery plugin that is fully compatible with Ipad and Iphone. You could check it out here:http://love-media.net/twilight-show-en

Sincerely,
Kevin
Photo of Larry Onaga

Larry Onaga

  • 5 Posts
  • 0 Reply Likes
Thank you Kevin, but I think I've got the first part covered - although I could be mistaken. I have an app called WOW Slider (www.wowslider.com) that can make iPad compatible slideshows.

I have very little experience with web design (HTML or HTML5 code writing), so my question is how to get my slideshow embedded onto my website. As I said, I used WOW Slider to create the slideshow, but ended up with a file with a ".wowsl" file extension. Do I upload this file using the File Manager, then use the HTML widget? If so, I have no idea how to write the HTML code.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Larry,

It looks like you are in good hand with Kevin here! I'm confident that he'll be able to help you out!

@ Kevin - thanks so much for lending your expertise on this!
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Thanks Sanja!

Larry, to do this you must have yola silver. If you do, do the instructions below.
1.Larry, first open wow slider.

2. Insert the images needed.

3.Press the publish button with the globe icon.

4.Choose publish to folder and publish it to a folder of your choice.

5.After publish, it should automatically open up in your browser. If it doesn't browse to the folder and open the html file.

6.In the browser, right click and press view source.

7.Open a plain text editor(not word), and copy all the content in that source that is between the <!-- Start WOWSlider.com HEAD section --> and <!-- End WOWSlider.com HEAD section --> tags as well as the <!-- Start WOWSlider.com BODY section --> and <!-- End WOWSlider.com BODY section --> tags into the text editor.

8. Go on yola and mirror all the folders and files in the local folder that has your stuff.

9.Open the text editor with the stuff you copied again and add a resources/ to the start of every single url.

10. Open the html widget in yola and copy the stuff in the text editor into it.

11. Publish the site.

12. Happy site building!
Kevin
Photo of Larry Onaga

Larry Onaga

  • 5 Posts
  • 0 Reply Likes
Thanks so much Kevin. I think I'm half way there. I am a novice at web design, so I need clarification on steps 8 and 9.

In step 8 you say "mirror" all the folders, etc. The application made two folders (data 1 and engine 1) and an "index.html" file that are in a folder that I named "WOW Slider 1st". By "mirror" do you mean make copies of each folder and the html file and upload them (the "WOW Slider 1st folder, data 1 folder, engine 1 folder, and index.html file) to the File Manger in Yola?

In step 9 you say to add "resources/" to the start of every single url. A url would begin with http://, correct? From the text that I copied (step 7), I found only one line with a url:
Photo Carousel jQuery by WOWSlider.com v1.5m
You say add resources/ to the start of the url, so should that look like:
href=resources/"http://wowslider.com"> ?

Thanks again for your help with this.

Larry
Photo of Larry Onaga

Larry Onaga

  • 5 Posts
  • 0 Reply Likes
Kevin,
I just read my reply to you, and for some reason the line of code that I referenced (the line with the url) in step 9, changed in my reply to "Photo Carousel jQuery ...". I hope it still makes sense to you.
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Larry, yes, you copy all the folders and files into the file manager except for the index.html file.

The source of index.html should look something like this.(below)
You should have copied the bolded parts.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml...;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<title>WOWSlider generated by WOWSlider.com</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="WOW Slider, jQuery Carousel Gallery, jQuery Carousel Slideshow" />
<meta name="description" content="WOWSlider created with WOW Slider, a free wizard program that helps you easily generate beautiful web slideshow" />
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" media="screen" />
<style type="text/css">a#vlb{display:none}</style>
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<body style="background-color:#ffffff">
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images">
<a href="#"><img src="data1/images/browser.jpg" alt="browser" title="browser" id="wows0"/></a>
<a href="#"><img src="data1/images/browser2.jpg" alt="browser2" title="browser2" id="wows1"/></a>
<a href="#"><img src="data1/images/buthover.jpg" alt="buthover" title="buthover" id="wows2"/></a>
<a href="#"><img src="data1/images/campatetload.jpg" alt="campatetload" title="campatetload" id="wows3"/></a>
<a href="#"><img src="data1/images/campatetsearchnice.jpg" alt="campatetsearchnice" title="campatetsearchnice" id="wows4"/></a>
<a href="#"><img src="data1/images/campatetsearchtrans.jpg" alt="campatetsearchtrans" title="campatetsearchtrans" id="wows5"/></a>
<a href="#"><img src="data1/images/campatettrans.jpg" alt="campatettrans" title="campatettrans" id="wows6"/></a>
</div>
<div class="ws_bullets"><div>
<a href="#wows0" title="browser"><img src="data1/tooltips/browser.jpg" alt="browser"/></a>
<a href="#wows1" title="browser2"><img src="data1/tooltips/browser2.jpg" alt="browser2"/></a>
<a href="#wows2" title="buthover"><img src="data1/tooltips/buthover.jpg" alt="buthover"/></a>
<a href="#wows3" title="campatetload"><img src="data1/tooltips/campatetload.jpg" alt="campatetload"/></a>
<a href="#wows4" title="campatetsearchnice"><img src="data1/tooltips/campatetsearchnice.jpg" alt="campatetsearchnice"/></a>
<a href="#wows5" title="campatetsearchtrans"><img src="data1/tooltips/campatetsearchtrans.jpg" alt="campatetsearchtrans"/></a>
<a href="#wows6" title="campatettrans"><img src="data1/tooltips/campatettrans.jpg" alt="campatettrans"/></a>
</div></div>
<a style="display:none" href="http://wowslider.com"&gt;jQuery Carousel Slider by WOWSlider.com v1.5</a>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
</body>
</html>


For example the url is engine1/jquery.js.
You should change it to
resources/engine1/jquery.js.
Not all url's start with http://. You're using a relative url here, not a absolute one.

Sincerely
Kevin
Photo of Larry Onaga

Larry Onaga

  • 5 Posts
  • 0 Reply Likes
Great! It worked. Thanks Kevin. I could never have figured this out without your help. It took me a while to get the image size the way I wanted it, but it's working. Best of all, I can see the slideshow on an iPad. Thanks again for all of your help!

Larry