Replies to This Discussion

Permalink Reply by JenSocial on January 17, 2012 at 10:15pm

Hi Sylvia,

It's such a long story. Basically, you either have to upload all files involved via the Ning File Manager or a Blog, and use the long Ning URLs. With this method, each time you edit slider, all affected files (1) must be reuploaded, and (2) The file path has to be changed in the slider code. It's kind of a nightmare.

OR, and the easiest way on Ning - - upload all files, code, and images to an external server. Call the final slider HTML file into your Ning site within an iframe. Here's example code for the iframe:

<iframe width="670" height="320" allowtransparency="true" src="http://yourserver.com/slider.html" frameborder="0" scrolling="no"></iframe>

Here's what I just wrote a Design Client I'm working for - - keep in mind as you read this, I am talking to my Design Client about his Slider that I am building for his Ning Network. BTW, I love WOW Slider, but you still have to do all the things I describe below, several options I talk about:

=========== Start of Email Message ============

Let me warn you, this will be a little overwhelming. We need to make a decision on how to code the slider for the final install. Sliders are never easy on Ning. And more often than not, Clients either never change the slider, or they hire someone to edit it.

I install a slider for 99% of all Ning Design Projects. And, I usually just add the slider via external files, asking Client upfront for a place to host files. This time my goal was to make the slider easier to edit, and not have to use an external server. But, it just won't work without issues. I finally had to revert back to adding the slider via an iframe within the Instant Ad Box, and upload files the Ning way (Sylvia, what I mean by this: On Ning we have no normal FTP or way to upload files. You have to use either the File Manager or upload files via a Blog. The Ning API file URLs are very long, and files have to be re-uploaded and slider image paths edited on each slider edit). ==== back to the email message... ==== This is the common method. But I wanted you to be able to edit it easier. My new way will not work because it loads too slow, and the styling conflicts with Ning CSS. This is the method I wanted to utilize:

• Add all slider scripts to Custom Code Box, which would never change.
  
• Add slider code for each slide directly inside Text Box, so you could edit it easier.
  
• Now I know, it just can't be done without conflicts. There are too many styling and scripting issues.
  

What does this mean for you? It makes it harder to edit the slider. You'll have to edit an HTML file on your local computer. Upload via a Ning Blog to get the new file path, and change the iframe src for HTML file to the new URL within the Instant Ad Box.

Please look at test site and see if you like the slider, and let me know of any changes. If possible try to make all changes at once. Because, I have to do what I described above. Basically these are the steps:

How To Add or Edit Slide

• Edit slider.html
• Locate Slide # in code.
• #3 Upload new image via a Blog or Text Box by clicking on Upload Image Icon.
• After you upload, you need to grab the URL for the new slider image.
  
• Copy/Paste the newly uploaded image/slider URL, and replace in HTML file.
• Change Slider Title, URL, etc...
• Save HTML.
• Upload HTML file via Blog or Text Box (follow #3 above)
• Edit Top Instant Ad Box.
• Locate long Ning API URL within iFrame. The file URL will end in slider.html
• Replace the Ning API HTML file URL with the new.
• Click on Save.

The only other way we could go - - and the cleanest and easiest. However this could load slower:

• You would need a server for hosted files. To upload new slider image, you would upload image to your server. I would write the code so you wouldn't have to change the slider image file name/URL within your HTML file. We would always use the same filenames. For example: slide1, slide2, etc...
• Detail Steps for this method:
• Upload new slide image to your external server.
• Use the same name as the previous image file.
• Change your slider link and slider text within the HTML, which would also be on your server.
• Save HTML. This name would always be slider.html and located in same folder on your server.
• It would automatically update on the Ning site.
• In other words: All of your editing would be on your server, using all the same file names. This is the easiest method.

====== End of Email Message ======

I know this is one confusing mess. But I'm hoping you gain something from it, especially the last method using your own server location.

Best Regards,

Jen

• ▶ Reply

Permalink Reply by Sylvia Hysen on January 17, 2012 at 11:05pm

So best case...

use WOW Slider software

upload files to an external server

leave all slide titles generic

paste sample code (below) within an iframe

when I make changes to the generic slides in WOW

and save it to the external server

NING site will automatically update?

Question? What is an iframe? Sorry...I'm a newbie, but a quick study.

Thanks Jen 

• ▶ Reply

Permalink Reply by JenSocial on January 17, 2012 at 11:22pm

Bingo, and yeah I would say you were a super fast study. ;-)

When you upload new slides using the generic names, correct, the slider will automatically update. Because you will be using the iframe to call in the HTML that contains the same image file names.

An iframe is just a frame or HTML tag that calls a file into a site. It's like a frame for a window, and the window is your external HTML file. You will be calling in your external HTML file inside the iframe.

Best Regards,

Jen

• ▶ Reply

Permalink Reply by Sylvia Hysen on January 18, 2012 at 11:41am

Where do I place the iframe code if I want my slider to be at the top left of my NING homepage, using 2 of my 3 columns?

Really appreciate having you here to help, Jen.

-Sylvia

GenYHub.com 

• ▶ Reply

Permalink Reply by JenSocial on January 18, 2012 at 8:25pm

Hi Sylvia,

That's a VIP answer. ;-) I'll pop you a private email.

BTW, you may enjoy asking questions in the VIP Club here: http://jensocial.com/group/premiumningtipsbyjen/forum/topics/ask-an...

I usually see them first, and they take priority. =)

Best Regards,

Jen

• ▶ Reply

Permalink Reply by JenSocial on August 14, 2014 at 12:51pm

Get the Ning Slider!   |   See it in Action - DEMO

Ning Slider 3.0! - Integrated Slider or Ad Rotation App for Ning 3.0 Networks! Create a beautiful responsive slider with a few clicks. Once installed, no more coding, just "Feature Blog Posts"!  It takes minutes to update slider! It really is that simple. Your Slider can be placed anywhere on your site, and modified to any size.
You can even add other internal links or external links for slides to access, using the slider as an Ad rotation app.

• ▶ Reply