jQuery Image Rotator - Slideshow Plug-in Part 2

[bngnaranjo]

 James, thank you very much for your great tutorial and providing us free tools to use.

GOD BLESS!!!

[paulhart9]

James, a fantastic video. Just what I was looking for. Took sometime but I learn't so much. Just a small height issue with images in chrome and fire fox (2px maybe) but not in internet explorer. Strange ! Anyway great stuff and thanks very much. Paul

[ImModing]

Thanks for your wonderful efforts.

I'm not sure if you've changed the content of the script hooks or the contents of js, but they look decidedly different from what you paste into the Source Code on my computer... Did you change it?

[ImModing]

@ImModing Excuse me. I was wrong. It is working fine!

[FadingAway90]

thank you it works great

[milan91bg]

thanks alot for the tutorial, i have some problems with positioning but i manage to fix that. Great tutorial mate

[smtamburrino]

Great tutorial! I thank you sooo much. I've only got one issue. When defining my span tags they are written the same as yours but when I view everything in browser it only appears .top or .bottom the right & the left spans go top & bottom as well. I've beaten myself up over this. Do you know or have herd of this issue from anyone else? Thanks again Mate!

[k0naFTW]

I can't make the text show up :S. Please help.

[ryanlowes9494]

I think you single-handedly saved my ICT A level, mass respect to you my friend!

[dkillahster]

I can't get it to work at all. All my images are still showing up. =/

[DreamWeaverTutorial]

@dkillahster Hello, your copy of Dreamweaver isn't 'special' which means that you have made a mistake along the way. watch the video and pause it (alot).

[dkillahster]

@DreamWeaverTutorial Well, I have one of those website templates that can't work with dreamweaver which i just found out, I use templates from volusion

you can check out my website w w w . streetobsessions . com i used photobucket. and it looks horrible. =/

your video IS VERY EDUCATIONAL. thank you!

[DreamWeaverTutorial]

@dkillahster Hey, It's not so bad. If you plan on using dreamweaver to design your websites then it's probably a good idea to find an ecommerce service that will let you use all of your own code.

[alecsuser]

man you are the best, it helped me alot, merry xmas!!!

[mrNobody5638]

You are Genius!! thank you

[TheBlablabla1985]

Very good tutorial. Thanks!

[phayu2002]

I got it to work now....thank you for this great tutorial!!!!!!!...

[phayu2002]

Java plugin did not appear on my firefox browser. Need some help on it. I follow exact step.

[IDLVI]

Hi James, anyone who could help

It all works well for me except the span height property. it seems that it is defined automatically by the text entered and the padding only, and not 290px or 60px as i define for each class. even when i use !important.

when i enter a width there are no problems.

Another question is how too make 2 different styles of text for each for each overlay.so i can make a headline

thanks

Ido

[bibonye76]

I just started the tutorial and for some reason when i set the overflow to hidden for the second image, it doesnt hide the bottom image....what did i do wrong.

[TheDzulia]

Hi

It is awesome. But, I have a problem that I do not see the css file. Can you send me a link or? Thanks.

[hhlp]

This was the tutorial I was looking for! Great work. I made it all running properly, but I have one issue. I want to make a link in the white text in the transparent slider. It's easy to make the picture as a link, but it's nicer to have the text clickable. How and where do I put the href? Thanx!

[cursedfido]

Awesome! you're totally Awesome dude!, but I'm facing a serious problem right here...After creating my slideshow I got my drop-down menus gone behind the slide show, and I really can't bring them back to be displayed on the slide show pics., I'd be really glad if you helped me with this! :)

[DreamWeaverTutorial]

@cursedfido hi, you may be able to fix this by setting a z-index on the drop down of 100. the code is:

z-index:100;

If that does not fix it then you will need to send me a link and ill take a peek. - James



[germanww2photos]

I am only able to get the first image to show up and nothing rotates. I checked the code over and over and haven't seen anything wrong. Could I have placed my code in the wrong place?

[germanww2photos]

I am only able to get the first image to show up and nothing rotates. I checked the code over and over and haven't seen anything wrong. Could I have placed my code in the wrong place?

[KurayamiDayo]

I've just added this on to the website I'm building. Is there any way you can keep the rotating images but disable the overlays? I tried commenting out the span tags but this stopped the rotator working altogether. Thanks

[israelda1]

This video is great!! But I seem to have an issue I can not resolve. When previewing in a browser I have negative space showing on the top and left side of the image. How can I resolve this?

[DreamWeaverTutorial]

@israelda1 This can be resolved by reading the readme file in the download.

[israelda1]

@israelda1 Thank you for the quick response! Keep up the great videos. I have another question for you. Have you ever built a page with an RSS feed that posts links on that index page, with the links refreshing with every update?

[Mamacee8429]

James, thanks for the clarification about the font. I haven't been able integrate the slider into my web page. My demo exercise is fine. But the web page has those dang bullets the overflow is broken. (I am taking the links out because I keep getting an error when I try to post, so I'm testing to see if it's the links that cause the error. 8-( )

[DreamWeaverTutorial]

@Mamacee8429 If you have bullets showing then find the UL tag and the LI tags in the CSS and set a property

list-style:none;

-or-

list-style-type:none;

[Mamacee8429]

You are my hero! Brilliant tutorial, actually teaches!, and the slider is oh-so-cool! Plus, I could listen to your lovely voice all day... ;->

But, in the tutorial, the font appears as Time New Roman, NOT Arial. I can change all the other aspects of the span (size, color, background) but not the font.

Please help!

[DreamWeaverTutorial]

@Mamacee8429 Hi, overtype the font: arial, helvetica, sanserif; declaration with font-family:arial, helvetica, sans serif !important; exactly how it is typed there with the !important; at the end. Thanks for the comments by the way. - James

[Ukeishan]

Awesome tutorial dude, been trying all week to get animated banners to work on my website assignment, you did me a huge favor by breaking it down and making it idiot proof. BTW i did this banner on a new CSS file, do i just copy the code to my current website's CSS file for it to work?...my site looks very similar to yours.

[DreamWeaverTutorial]

@Ukeishan Hi, you are right, just copy the code over to your css document. - James

[Ukeishan]

@DreamWeaverTutorial AWESOME!!!! it works perfectly...however the banner does not show up on my website's "gallery" page. i think its cuz i have a jQuery lightbox there, when I remove the light box code it works fine but when i re-insert the code it stops. Any suggestions? I'm using Lightbox JS v2.05... Thanks again

[nabeelkareem]

Thank you for going step by step. That is the way to teach: step by step and don't miss anything and don't assume anything.

[keeezz]

dont know what I did wrong but not seeing any thing at all when I preview in my browser!

[sanagangster]

cant we creat automatic slide show with out write any codes ???

[arcastrillo]

Just want to say thanks a lot for this great tutorial. Not only was it helpful it was super easy. I knew I did the right thing by subscribing to your YouTube Channel. ;-)

Thanks once again and please keep them coming. Cheers.

[DreamWeaverTutorial]

@arcastrillo you are welcome :)

[123finedesign]

THANK YOU so much dude! you rock! I subbed! you;re the best

[raffii24]

Thank you so much, how do I make this slide show randomly?

[MoonageDaydream51]

Thank you so much! You've saved my life <3

[killerboduk999]

the .top class dont work for me any idea not showing the span tag..

[DreamWeaverTutorial]

@killerboduk999 send me link to the page.

[killerboduk999]

@DreamWeaverTutorial thanks for the cooperate but i already solve it..

i keep repeating the video until i solve my problem... sometimes i forgot some semi colon hahaha

[DreamWeaverTutorial]

@killerboduk999 yeah I do that all the time, even with my own tuts lol

[bradbouton]

never mind padding and margin adjustment in the s3slidercontent fixed that right up. Thanks for the great tutorial!

[bradbouton]

i have an unordered list dot to the lower left of my of every image and cant figure out how to remove it. does't appear in safari but does in fire fox and all seems to be fine in my html and css. any idea what the problem is?

[WEEDKILLAR]

Hi, I have a problem. It looks if my images has 10px on the top and 20px on the left. Margin-left doesnt work. It wont align to the left. Please help. Thx

[DreamWeaverTutorial]

@WEEDKILLAR In the download folder is a text document aptly named "read me."

[WEEDKILLAR]

@DreamWeaverTutorial It works now. Thx for your great tutorials and quick reply.

[ILuvDirtyElectro]

Thank u very much!!

[shakaama]

Ok, I got it to work perfectly just by itself. Checked it in all browsers and it worked excellently. As soon as I plopped it in my site, it completely broke. First: all pics load on the page; as the time expires they move into the banner spot; once all 3 of my pics have cycled they stay in the banner spot as normal; the text load UNDER the pic and pushes the page down without any css. Yes everything is linked properly.

[DreamWeaverTutorial]

@shakaama Hi, I understood most of what you said but couldn't visualise everything once it was on your website. If it was working before you put it on your site then It could be something in your site which is interacting with the rotator maybe another jquery element you have on your site , maybe a css style already present on your site which is manipulating the image rotator. If you cannot find the issue then send me a personal message with a link to your site and ill take a look.

[shakaama]

I feel dumb, I hadn't waited till the end before posting my comment.

[shakaama]

wrestled with this for about 20 minutes. Your width call in the span class destroys all cascading code under it, i.e. all the class calls top right bottom left with a width in them are completely overwritten by the span width. Removing that width makes all the class calls perfect.

[pkdawg2]

Thank you. Worked after makinig sure I had all my li closes. I missed that at first.

[DreamWeaverTutorial]

@pkdawg2 ok glad you fixed it!

[Oliwebpress]

Great stuff.

Thank you

[vinzshinoda]

i follow all of your steps, everything is fine, but when i click preview, no picture showing up, any idea?

[masterofdie]

i like all of your tutorials...but my image slider is at the end 910px x 284 ??

[jhood7891]

lol that was a lot of work man but i guss i gotta do it

[Composerhome]

Superb video, James. My first dabble with jquery, and painless and fun. Brilliant.

[MistrKite]

Superb tutorial, James. Thank you.

Might be an obvious question, but I have to ask: Do all images have to be the same size? Can I follow a 400 px wide photo with a 300 px wide photo? I'd like to do that against a black background, with white type on the side. But after watching your tutorial, I'm not sure whether images must be a consistent size.

Thanks again for your videos. I've learned a lot.

[DreamWeaverTutorial]

@MistrKite In general it helps for the images to be the same size as it will look better. But in the infinitecarousel2.js file theres is an option to select 'inView' and if you set it to 2 it should straddle 2 images in the picture frame. - James

[MistrKite]

@DreamWeaverTutorial Thank you, James.

Is there an *easy* way to adjust the speed of the fade-in and -out of the images and text? I don't mean the time the images/text appear on screen, which your tutorial shows at 3:00. Rather, I'd like to make images appear/disappear more slowly.

Also, I appear to have a 1 px border in along the top and left side of the image. Any idea why? And can I give a border to all four sides of the image?

Thanks again.

[a32Unitu]

A GREEEAT THANKS FOR EXPLANING AS TO JOIN ALL PICTURE INTO ONE LINE !!!! AND FOR EXPL. AS TO ATTACH JQuery scripts !!!!!!!!

[dariusrashaud]

Hey nice tutorial. I will subscribe... Question for you, can you add thumbnails or number/btns at the bottom or side to toggle between the images?

Thanks

[rjtkoh]

Hi James, great tutorial. However i tested it in Internet Explorer 5.2.3 for Mac and it does not work. Is their a way to fix this? thanks

[johnixMT]

thank you so much. this resource really contributed to my learning since I'm doing my assignment.

[herc753]

i followed your tutorial to the letter. However, the right side span doesnt line up properly for some reason, and the spans dont even show up in safari. Also, when i put a colored element behind it, the photos dont line up for some reason even though all of the dimensions are the same.

any thoughts?

[DreamWeaverTutorial]

@herc753 hi if you either show me an online example so i can examine your code or if you can copy your html and css into a text document and ill send you a private message with the email address now. - James

[DreamWeaverTutorial]

@DreamWeaverTutorial ps and online example would be preferable..

[StGermainMedia]

excellent tutorial...can't wait to try it!

[DreamWeaverTutorial]

@StGermainMedia Thank you for your message. - James

[platinumtoast99]

very nice tutorial. It may take me a while rewinding and rewinding to get all of this code right. Thanks..

[DreamWeaverTutorial]

@platinumtoast99 glad you liked it. - James