[Image Slider] Discussion

[Image Slider] Discussion

  
Forge Component
(9)
Published on 2010-11-11 by Miguel "Kelter" Antunes
9 votes
Published on 2010-11-11 by Miguel "Kelter" Antunes

Hello,

Would it possible to convert this espace to an 5.0 version?

I hope so.

Kind Regards,
Evert
From what i know that can only be done manually, looking at the 5.1 version and do it in 5.0. I'm sure you can do it easily. But apart that when i got some free time to spare i'll create a 5.0 version.

In response to the email that you send regarding license, it is possible to use and abuse from it, since you include the licence.txt in your projects.
I'll quote: "Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software..."

So feel free to use it :)

Miguel Antunes
Hi all,

any idea as how to set the javascript options?

Thanks
hi, just take a look to the bottom expression inside the web block, in the line $('#"+slider.Id+"').nivoSlider(); you can set the options by putting them inside the ( ) next to nivoSlider, like this

.nivoSlider({ effect:'random', slices:15 });

just check the homepage and see what you can add, also check http://nivo.dev7studios.com/ to see with more detail.
Hi Miguel,

i'm new to outsystems and I can't seem to find that piece of code.
Here is my sequence of actions:

- Opened the ImageSlide eSpace and published it to server.
- In my project eSpace added a reference to all the content in the ImageSlide eSpace (which is now OSS version 5.1.0.22).
- Added the preparation and variables as in the ImageSlide example.
- Set the ImagesPathList of ImageSlide as the ImageListInfo variable.
- Published the eSpace and opened in browser.

It shows as white space in the browser which leads me to think that i have to configure some of the options in the javascript, which I can't find.

Thanks again,
Hello António,

Which browser are you using? And have you set a title or not? If it's correct it works in FireFox but not in IE or Chrome.

I already have been busy with this component and noticed there is small bug in the imgsrc variable:

In het preparation of the ImageSlider webblock in the assing (Set html Img Code) you must insert the following sign: "/>" as closing in the if statement of the imageSlider title, so the if statement must be like:

If(ImagesPathList.Current.ImageSlideInfo.Title <> "" ,
    "title='"+ ImagesPathList.Current.ImageSlideInfo.Title +"'/>",
    "/>"
)


Hope this works, else I can take a look at you're espace.

Kind regards,
Evert
Hi Evert,

you are right, there is that small bug, but it's still not working.
Then i noticed the component's javascript is not being included in the page as seen in the picture.

Any advice?

Thanks,

Hi António,

You need to add the .js file to your project, take a look bellow



you can right click and save it, then import to your project.
Hi António,

Are you using the ImageSlider espace or have you copyed it all to you're own espace?

Do you also have acces to the internet (since one of the JavaScript source files is google)?

Kind Regards,
Evert
Thanks guys, it's working now ;)

PS: i did not include the js file.
"Hi António, You need to add the .js file to your project, take a look bellow you can right click and save it, then import to your project."

Once you import the script, don't forget to change the following property on it:

DEPLOY ACTTION: DEPLOY TO TARGET DIRECTORY.

Check the picture:



Best regards,
-- --
R. Saraiva
Hello!
Good morning

I'm trying to dynamically populate the ImageSlider image List width data base image.What i did was to create a entry point to a screen that only downloads the image associated with the ID sended as a InputParameter.

The Image Slider Widget works great with Firefox, Chrome.... but width IE images aren't displayed

Does anyone have any idea why this is happening?

Thanks :)

Hi Wilson, 

check the Evert post above, where he talks about a similar problem.


"In het preparation of the ImageSlider webblock in the assing (Set html Img Code) you must insert the following sign: "/>" as closing in the if statement of the imageSlider title, so the if statement must be like:

If(ImagesPathList.Current.ImageSlideInfo.Title <> "" ,
    "title='"+ ImagesPathList.Current.ImageSlideInfo.Title +"'/>",
    "/>"
)"



regards,
Miguel
Hello Wilson,

Do you also use the imageSlider options?

If so, look at the last option and make shure there is no 'comma' after the last option.

This was one of mine problem I had with it.

Kind Regards,
Evert
New minor version released.

This version corrects the bug reported by Evert when images don't show in IE, thanks Evert.


Regards,
Miguel Antunes
Hi every one!

Even after correct the bug still doesn't work on IE.

I forget to mention thar the slider is inside a Tab_Body Container... Could this be the reason ? I'm just guessing...

Best regards!
My Guess was right.

I made a spike solution where i wrapp up the given example in a Tab of a Tabs_ClientSide widget ,and thar tab was initialy hidden. With that the Slider stop working!

Does anyone have a sugestion?

Thanks...

Hello everyone.

I was to testing my app with tabs and the ImageSlider eSpace, and noticed that: if the Image Slide is before the tab or inside one, it doesn't work. However if you are  at the bottom and outside of the tabs (outside Tabs_Wrapper) it works correctly.

Could this have to do with the $(window).load()  ?

Chears...

P.S This only happens with IE,  at FF or Chrome everything works just fine.

Hi Wilson,

Since this kind of components is very javascript-intensive, it could well be the problem. However, since this is a component based on a third-party widget, it might be hard to troubleshoot the exact problem.

If someone doesn't have a solution for it, I recommend goind to the Nivo Slider support page.

They recommend using jQuery 1.4+, and also go about some possible fixes for some glitches.

Let us know if you managed to work around it - or, if you happen to edit the component and contribute with a fix, submit it here as well!

Regards,

Paulo Tavares
I already used this slider outside the Outsystems plataform, it's known that the original developer clearly admits the slider doesn't work properly on IE6 or neither is going to give the proper suport, although it should work fine on IE7+.

As for it still not working on IE i would consider a CSS problem, maybe it's working and not being correctly displayed.

I suggest using IE Developer Toolbar.

I belive this is not the case but i had some problems because of the CSS reset standard and the yahoo one.

Hello Pedro,

I've implemented this slider in eSpace and in the testing environment it works fine.

If I test the slider with IE tester it also works fine in the IE6 tab.

Kind regards,
Evert

Hello,

Since the ImageSlider is on the customer production and works fine (in FireFox, Chrome, IE 6, 7, 8, 9) , maybe it's nice to see how it looks.

So you can see it working at: www.wasco.nl.

The power here is that the customer can choose his own images (for the logged in customers there are other images shown), and can set all the slider option itself by a small backoffice application. So no work for me anymore :).

Kind Regards,
Evert
Way cool Evert.

Congrats on getting it live in the customer's production website!

Cheers,

Paulo Tavares

P.S. - I'm also happy to see that you configured it so that if I type www.wasco.nl/servicecenter, it will NOT take me to Service Center ;)
Guys,

I'm getting an error using this inside another webblock. I'm no javascript master. Does anyone knows how to fix this?

Tks!
Hi Carlos,

Even if you're not a Javascript master, now is as good a time as ever to introduce you to Firefox's extension "Firebug" - it does wonders in troubleshooting CSS and JavaScript problems.

What's the error you're getting?

Regards,

Paulo Tavares
Hi Carlos,

try to understand why that is happening because it works normaly inside a webblock.

Feel free to grab the attached OML with an example for you.

regards,
Miguel Antunes
Carlos,

What error do you got?

In the example of miguel it's works within a webblock. Keep notice that you're JS must be loaded before the ImageSlider block does.

Kind regards,
Evert
I'm having no error now! 

But there is something I need to ask you guys: I want to use this widget with binary files that I've stored in database. How can I do this? I was thinking in saving the files in my "img" folder but I've no permissions. Do you see any work around?
Carlos,

Nice to know you don't got an error anymore!

Regarding the images. I know 2 ways:

1). Include the image in ServiceStudio, you image will be available by: <servername>/<espacename>/img/<imagename>
2). You can save the image(s) on the fileSystem (in IIS make an virtual directory to a folder on you're server), save the url to the image and use that url in you're ImageSlider. You can use the fileSystem extention for this.

Kind regards,
Evert
Tks for the reply.

1 - I think that's not a solution because the files are uploaded by the users and are dynamic. I tried to use filesystem to save in the img folder but it gives me access denied (anyone knows if we have a way, in C#, to do an operation as Windows Admin? because if i create the file using windows explorer, no problems at all)

2 - I tried to create a temp folder inside my project and store the images there, but always the same problem: access to the path XXX is denied.

Carlos,

you can do what Evert said, but you still have at least two more ways to do it.

1) Create a screen and in the preparation you query the database for the image you want and replace the "End" with "Download" and set the property "Save to disk" = "No". and in the slider the image path should look like this:

http://www.domain.com/eSpaceName/GetImage.aspx?ImageId=XX

2) This way is a tricky way... You can use a "get image screen" already present in our platform. You should build a url like this one:

http://www.domain.com/eSpaceName/_image.aspx/IMAGE_ENTITY/BinaryAttribute/ImageId/imagename.jpg"

by replacing the fields should look like this:

http://www.domain.com/eSpaceName/_image.aspx/MOVIE_PICTURE/Picture/1/nemo.jpg


hope this helps, let us know how it goes!

regards,
Miguel Antunes
Miguel,

Nice to know more way to do it know :), maybe it's an option to make a general HowTo post of you're suggestion for displaying images?

For Carlos, where do you make the temp folder? I got the suggestion you make it somewhere in the ProgramFiles OS folder?

Regarding the acces to the folder, read this post:
http://www.outsystems.com/NetworkForums/ViewTopic.aspx?Topic=How-to%3A-Setting-up-Application's-access-to-file-systems

Kind regards,
Evert
I didn't know the option of run as! It worked perfectly :)

Now, another problem:

imagine you have different sizes in your showcase, how do you clear/reset to the "new" size that is being shown up?

For example, I have a case that the picture has less width than the previous one. In that case, the previous one is visible in the part that the new photo doesn't "fill".

Carlos,

The images must be the same size :).

Maybe you can resize the images to one format when people insert them? Or attach the inputted image to an image (with the same color as the background) with the biggest size possible (so the overhead is always the same color as the background).

Kind regards,
Evert
Hi all,

The url to the 'manufacturer' isn't correct anymore, you can find the original slider here: Nivo slider.

@ Miguel, maybe you can change it in the forge.

Kind regards,
Evert
Evert van der Zalm wrote:
Hi all,

The url to the 'manufacturer' isn't correct anymore, you can find the original slider here: Nivo slider.

@ Miguel, maybe you can change it in the forge.

Kind regards,
Evert
 Thanks for reporting this! Links are fixed now.

Cheers,
Miguel