Kentico Marketplace

Community(14)	E-commerce(14)	E-learning(1)	Integration(35)
Mobile Apps(4)	Modules(15)	Search(3)	Controls(7)
Google(8)	Syndication(3)	Utilities(11)	Visual Studio(1)
Web parts(61)	Web Site Templates(37)

Image Slider

by Naga Harish, Anubavam

Rating:	(0 reviews)
License:	Free
Works with:	5.5R2, 6.0
Current version:	2.5
Price:	$0

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.

Web site

http://www.kentico.com/Partners/Anubavam-LLC

Version:

Total views: 9556

You need to sign in if you wish to write a review.

Alex

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.

10/25/2012 3:15:19 AM

hungquang_itsyad-yahoo.com

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?

2/14/2012 10:46:54 PM

steven4733-gmail

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.

1/20/2012 11:07:45 PM

Harish

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)

1/20/2012 8:10:58 PM

Naga Harish

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

1/20/2012 8:09:04 PM

steven4733-gmail

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

1/20/2012 2:52:19 PM

Naga Harish

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...

1/16/2012 10:50:51 PM

FroggEye

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!

1/16/2012 10:29:17 PM

Naga Harish

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!

1/12/2012 11:34:47 PM

steven4733-gmail

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.

1/12/2012 11:02:23 PM

Naga Harish

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

1/12/2012 7:33:39 PM

steven4733-gmail

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.

1/12/2012 5:09:54 PM

minhbios-yahoo

Hi Haris,

Is it possible to convert it to inline controls ?

Thank for nice control !

1/8/2012 3:03:48 AM

steven4733-gmail

@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>

1/3/2012 9:50:01 AM

Naga Harish

@steven4733-gmail,

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

12/27/2011 8:47:34 PM

FroggEye

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

12/27/2011 11:37:38 AM

steven4733-gmail

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.

12/27/2011 10:51:17 AM

steven4733-gmail

@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?

12/22/2011 9:28:52 AM

Harish

@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;
}

12/21/2011 8:56:29 PM

steven4733-gmail

12/21/2011 3:37:22 PM

FroggEye

@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.

12/21/2011 1:17:59 PM

steven4733-gmail

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?

12/21/2011 12:45:06 PM

Naga harish

Hi ahmad,

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

12/14/2011 9:04:45 AM

ahmad.mai-edata-tc

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

12/14/2011 3:14:53 AM

Naga Harish

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.

12/12/2011 9:15:58 AM

ahmad.mai-edata-tc

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>

12/12/2011 12:27:01 AM

Harish

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>

12/11/2011 8:03:30 AM

ahmad.mai-edata-tc

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

12/11/2011 5:57:06 AM

Naga Harish

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

11/23/2011 8:31:48 AM

Tom

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.

11/23/2011 5:39:28 AM

FroggEye

@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) %>

11/15/2011 8:08:53 PM

Harish

@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.

11/15/2011 8:56:24 AM

FroggEye

@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.

11/15/2011 7:46:09 AM

neven.stojanovic-roma

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

11/15/2011 7:38:01 AM

Naga Harish

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.

11/9/2011 11:57:57 AM

FroggEye

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?

11/8/2011 10:04:30 PM

FroggEye

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.

10/13/2011 10:34:31 PM

Harish

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..!

9/16/2011 1:16:15 PM

Harish

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

9/16/2011 1:02:38 PM

Harish

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.

9/16/2011 12:48:20 PM

Snarrak

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

9/16/2011 4:24:52 AM

milan.kacurak-gmail

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 :)

6/29/2011 2:45:07 PM

Harish

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

6/7/2011 10:05:02 AM

Best Rated Items

(5.0/5 points)Weather Web Part

(5.0/5 points)Tweet Me

(5.0/5 points)My Twitter!

(5.0/5 points)Tweeto

(5.0/5 points)HTML Tag Code