Image Slider

by Naga Harish (Share Our Ideas)
Image Slider preview

Price

$0

Details

Licence:
Free
Works with:
5.5R2, 6.0
Version:

Web site

http://shareourideas.com/

Summary

Web part for creating an image slide show.

Description

This web part displays images with slider effect. It also makes it easy to add images to the slider. The web part can be added to the top of a page as a banner with some content. The admin users only need to specify the images folder and the web part will automatically fetch images and content from this folder.

Inside this package you can find two web parts for Kentico CMS 5.5 R2 and 6.0:
1) Basic image slider
2) Image Slider with Effects

To see the whole process of installation and using the web part, watch the video at
http://www.youtube.com/watch?v=ToLoMku55VY (for the 5.5 R2 version)
http://www.youtube.com/watch?v=6S-iC4KEz3Y (for the 6.0 version)

The installation intruction are also included in the package.

Comments


Naga Harish commented on

Hi Ramesh,

I am not sure we can use in Kentico CMS 8.2. I will try to create for that version and upload soon.

Thank you,
Naga Harish.

ramesh69vishwakarma-gmail commented on

i m using kentico 8.2 and i want to use image slider can you help me and tell me in detail.......could i use content slider for that can you explain me plzzz?????

FroggEye commented on

@Kyle, I've used this in v7 without an issue but I cannot remember if I made modifications or not. Here is a link to a working version I just exported from a v7.0.12 site. https://www.dropbox.com/s/73o87wd5f9g987b/cms_webpart_ImageSliderV2_20130613_1511.zip

Naga harish commented on

Hi kyle,
I am not sure it is working in 7..

but try to unzip the downloaded file inside you have two version of webparts... Please check with youtube.

I am working on webpart for 7 soon i will upload it.

thank you

kyle.dahlgren-66fcu commented on

I have version 7.0.38 and I tried to import the downloaded zip package and I'm getting this error: Error during temporary files creation. Original exception: [ImportProvider.CreateTemporaryFiles]: Data not found or the package is not a valid export package. (C:\inetpub\wwwroot\KenticoCMS\App_Data\CMSTemp\ImportExport\Data)
at step 1 of the import wizard after I load the package and click Next. Any ideas what might be causing this? I tried re-downloading and importing but I get the same error at the same place.

FroggEye commented on

@ksigman-canyonco, I implemented it in v5.5, upgraded to v6 and upgraded the site in January again this year to v7 without an issue.

ksigman-canyonco commented on

Has anyone successfully implemented an image slider on Version 7?

Alex commented on

Thank you for this webpart, it works very nice. Is it possible to postpone the loading of the images, it takes a long time to load al the images. I would like to load all the images for the Image Slider after the rest of the page is already loaded.

hungquang_itsyad-yahoo.com commented on

after Convert To Web Application, when I rebuild the solution, i have an error:

protected void SetupControl()
{
cmsrepeaterImageSlider.Path = this.Path;
.....
.....
}

Error 166 'System.Web.UI.UserControl' does not contain a definition for 'Path' and no extension method 'Path' accepting a first argument of type 'System.Web.UI.UserControl' could be found (are you missing a using directive or an assembly reference?)

How to fix?

steven4733-gmail commented on

Wish I know the reason, but I don't. And I have no way to trace it because it is not some code logic error, it just appear strang alt of the last image and clickable to jump to a page shows that last page. Seems like there is a hyper-link area near the web part.

Harish commented on

Hi steven4733,

are you able to trace the issues, why it is arriving or suggestions for that to fix. (I did not check that issue yet)

Naga Harish commented on

Sorry steven4733, not yet checked.. Because bit busy with my work.

steven4733-gmail commented on

@Naga Harish:
Have you checked that issue I mentioned?

Naga Harish commented on

Hi brenden.kehren,

Great Suggestion!, I am planning to release another version of this Webpart Surely I'll add this feature, InLine Control as well and also few reported issues addressed.

Thank you Guys for your support/comments. Those are giving more boost to me...

FroggEye commented on

Suggestion: add a random order so it picks a different load order each time the page is loaded. This way I could put 30+ pictures in the folder and it would be very random. Great webpart though!

Naga Harish commented on

Hi steven4733@gmail.com,
I will check it and if I found that issue and solution. I will post as comment here.

Now I am away from my Windows computer. I will try to comment ASAP.

Thanks for reporting an issue!

steven4733-gmail commented on

I'm using effects slide web part in IE 9.0. The effect is good, only problem is when you pause your mouse at some near area, the title of one image will show, as the mouse is hover on the image the 'alt' content shows. Things get even worse that if you click that area,it just like you click an image link, the page is redirected to a new page showing that image. I've already unchecked the show as link option in the web part. Don't know why.

Naga Harish commented on

Hi steven4733@gmail.com,

Can you please tell me more info.

In which image slider your having this problem (is it basic or with effects webpart)

And also in which browser(s)?

Thanks for your comment

steven4733-gmail commented on

Does anyone also encounter an issue that when your mouse pause in somewhere out of the slide image web part, the last title of last image will appear just as an alt, and when you click the mouse, the page will jump directly in to a page that shows the last image of the slide? Very weird. I have no idea how to resolve this issue. Please help.

minhbios-yahoo commented on

Hi Haris,

Is it possible to convert it to inline controls ?

Thank for nice control !

steven4733-gmail commented on

@FroggEye, I found a solution on the issue that all images display and then collapse. You refer the script directly, I mean use the format of <script type="text/javascript" src="/JS/jquery.js"></script> but not <script type="text/javascript" src="/CMSPages/GetResource.ashx?scriptfile=/JS/jquery.js"></script>

Naga Harish commented on

@steven4733-gmail,

if already added jQuery in you page you can unchecked for "include jQuery" field. So, it won't include it again.

FroggEye commented on

@steven4733-gmail yes, I've had the same issue as well.

steven4733-gmail commented on

Does anyone encount the problem that when page load,all pictures of the slide image will display and then collapse? Seems like the jQuery is loaded after the web part. But I have already added jQuery reference on the top of the page, don't understand why that happens.

steven4733-gmail commented on

@FroggEye, I set z-index of web part wrap div to -1, it does not work. I also tried to set the menu z-index to 9999, no luck too. The css menu item is in masterpage, while the image slide web part is in content page, does it matter?

Harish commented on

@steven4733-gmail,
Try this css style
Apply z-index to Menus (main li)'s UL items... with default css class names it looks like this

.zoneMenu .CMSListMenuUL li .CMSListMenuUL
{
z-index:9999;
}

steven4733-gmail commented on

@FroggEye, I set z-index of web part wrap div to -1, it does not work. I also tried to set the menu z-index to 9999, no luck too. The css menu item is in masterpage, while the image slide web part is in content page, does it matter?

FroggEye commented on

@steven4733-gmail, if you wrap the webpart in a <div> and set the z-index: -1; it should place it "behind" your menu. Or set the z-index of your menu to 9999 or something high like that so it is always on top.

steven4733-gmail commented on

The slide web part works fine, just it hides the drop down menu if you put it in on the position right down the top menu. How to resolve this issue?

Naga harish commented on

Hi ahmad,

Yes, I hope it will work and it is possible with add new input for file doctype called "URL"...

ahmad.mai-edata-tc commented on

hi again
i need help in change Transformation code so I can open popup
video directly on click on slide

now I created video popup
and add the link to JavaScript in master page head
and add tha css in css file
now
its work in any page
this is the html code that i put in a page to run the video as popup
""
<script type="text/javascript">

function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("video_overlay");
ytplayer.setVolume(100);
}

</script>
<div id="videogallery">
<a href="http://www.youtube.com/v/SPG_iYotfYY?autoplay=1&rel=0&enablejsapi=1&playerapiid=ytplayer" rel="#voverlay" title="AQtime Integration into Embarcadero RAD Studio"><img alt="AQtime Integration into Embarcadero RAD Studio" src="../CMSWebParts/edata/v/data/thumbnails/0.png" /></a></div>
..

now i need to make the file url in " file document type "
to show popup video on click on slide
is that possible

Naga Harish commented on

Superb! ahmad,

That is also a nice idea. It is best to use that unless it won't effect any other things in the site.

ahmad.mai-edata-tc commented on

thanks a lot its work ,
but i add "url" field to file and I change Transformation code to this


<li class="s3sliderImage">
<a href="<%# Eval("url") %>" title="<%# Eval("FileName", true) %>">
<img src="<%# GetFileUrl("FileAttachment") %>" alt="<%# Eval("FileName", true) %>" width="100%" height="100%" />
</a>
<span style="display:none;"><b><%# Eval("FileName", true) %></b><br/>
<%# Eval("FileDescription", true) %>
</span>
</li>

Harish commented on

Hi ahmad,

This current file doctype we can't do like that. But, my suggestion is change Transformation code we can use FileDescription has hyper link...

change for example
<li class="s3sliderImage">
<a href="<%# GetFileUrl("FileAttachment") %>" title="<%# Eval("FileName", true) %>">
<img src="<%# GetFileUrl("FileAttachment") %>" alt="<%# Eval("FileName", true) %>" width="100%" height="100%" />
</a>
<span><b><%# Eval("FileName", true) %></b><br/>
<%# Eval("FileDescription", true) %>
</span>
</li>
To
<li class="s3sliderImage">
<a href="<%# Eval("FileDescription") %>" title="<%# Eval("FileName", true) %>">
<img src="<%# GetFileUrl("FileAttachment") %>" alt="<%# Eval("FileName", true) %>" width="100%" height="100%" />
</a>
<span style="display:none;"><b><%# Eval("FileName", true) %></b><br/>
<%# Eval("FileDescription", true) %>
</span>
</li>

ahmad.mai-edata-tc commented on

hi
can I connect the slide file to a custom urls ?
so when visitor click on slide the custom url will open

Naga Harish commented on

Hi,
@Tom , Sorry I did not work with media library.
if possible, I will add it in my next version.

Tom commented on

Can one browse to a media library and select a folder?
We store our files in the file system, not as attachments in the db.

FroggEye commented on

@Harish: I tried your suggestion and it did not work. I also tried the function built into Kentico and the coin slider JavaScript must have some code incorrect in it because it does not resize at all.

This is the function I tried, with no success:
<%# GetImageByUrl(GetFileUrl("FileAttachment"), 663, 468) %>

Harish commented on

@FroggEye
@neven.stojanovic-roma
Yes, we have to upload same size images. In V1 webpart I did not much effect. So, I used width="100%" and Height="100%" in this V2 we have effects. So, it have more divs with background images with position set up.

But, for now I have solution for you guys
Please change ImageSliderV2 Transformation

For
<img src="<%# GetFileUrl("FileAttachment") %>" alt="<%# Eval("FileName", true) %>" width="100%" height="100%" />


To
<img src="<%# GetFileUrl("FileAttachment") %>?width=YOUR_WIDTH&height=YOUR_HEIGHT" alt="<%# Eval("FileName", true) %>" width="100%" height="100%" />

Replace YOUR_WIDTH and YOUR_HEIGHT with int values. So, Kentico CMS will automatically converting big images to small images size.

For next time, I will create two WEBPARTS one with effects and with out effects.

Thanks for review.

FroggEye commented on

@neven.stojanovic-roma

I used v1 in 5.5 r2 without a problem, then did an upgrade and fresh install of 6.0 and v1 worked just fine. I also used v2 but there are issues with the image not stretching to fit the area. In my case I have some images that are 500x400 and I set my height and width in the Image Slider properties to 600x450 and it just repeated the image horizontally and vertically vs. in v1 it would actually stretch the image out.

neven.stojanovic-roma commented on

Hi,
First question, does it work with 6.0? And second if it work is the process of adding it the same?
Thanks!

Naga Harish commented on

Hi,
@FroggEye We have to use same size images for best output. re-size images (I found this as issue for diff size images).

We will come this solution in next version with more better output with more options.
If you can fix this please paste a comment here.

Thanks for review.

FroggEye commented on

I used the 1.0 version and it worked good. I installed v2.0 and the images don't streach like they do in version 1 when I set the height and width properties. I set the height and width in the properties but it just repeats the image vertically and horizontally. Any suggestions for a fix?

FroggEye commented on

Very nice webpart. Works well in v6.0 as well. With the new version you can attach the CSS right to the webpart vs. in the site's stylesheet. Also need a modification to your .ascx file, after the </div> you need to clear the left float so it doesn't mess up the rest of the elements on the page. Otherwise very nice.

Harish commented on

Hi,
@milan.kacurak-gmail Yes, we can do that.

small suggestion for my side is use thickbox http://jquery.com/demo/thickbox/

follow the steps to ready the lightbox. Then we just need to add class="thickbox" in imageSlider Transformation.

Here the code for you
<li class="s3sliderImage">
<a href="<%# GetFileUrl("FileAttachment") %>" title="<%# Eval("FileName", true) %>" class="thickbox">
<img src="<%# GetFileUrl("FileAttachment") %>" alt="<%# Eval("FileName", true) %>" width="100%" height="100%" />
</a>
<span><b><%# Eval("FileName", true) %></b><br/>
<%# Eval("FileDescription", true) %>
</span>
</li>
Sorry!, I am too late to reply here.. But, it may be useful for someone. Today only I got my Subscribe mail.

Enjoy while coding..!

Harish commented on

Hi All,

@minhbios-yahoo Sure, I will come up with it.. Planning to release new version with more features. like move next, previous.

@uiterwijkjorik-gmail Yes, you can use in VS also. it is just like user control we need to add that to page. we can see that in [root]\CMSWebParts\MediaLibrary\ImageSlider.ascx

Harish commented on

Hi All,
@Snarrak Yes, surely it is possible with Kentico CMS (API).. Just I can say every thing possible in Kentico CMS with Kentico APIs But we need to spend some time to for development.

Snarrak commented on

Is it possible to connect the image slider to the media library?

milan.kacurak-gmail commented on

Very useful webpart. The only - but big - problem for me is that the webpart doesnt work with lightbox. If somebody knows how to connect Image slider and lightbox succesfully, please let me know :)

Harish commented on

Hi All,
we can find doc file inside downloaded zip file. In the doc file you can get CSS and doctype Transformation(name must "ImageSlider") or else you can download from here
http://shareourideas.files.wordpress.com/2011/06/image-slider-webpart.docx

Thanks