Forums

threedash

hi there,

I am currently working on my portfolio site and there are a few things I am trying to implement.
The first one is a coda slider for my gallery..

here's my design:
http://threedash.com/help.jpg

here are the plugin:
http://sixrevisions.com/tutorials/javas ... ng-jquery/
or
http://www.ndoherty.biz/demos/coda-slider/2.0/

i just need a push in the right direction, thanks

if you have any other suggestions, please do so

_threedash

BaylorRae

jQuery for Designers has a great tutorial on creating an infinite carousel.

http://jqueryfordesigners.com/jquery-infinite-carousel/

If you need help with the jQuery, I will help you.

threedash

Hey,

thanks for the reply... so lets go ahead and get into the meat of the problem.

On my site, threedash.com, I am working on the webdesign section.

http://threedash.com/webdesign.html

here is what I am trying to do with jquery coda slider
http://threedash.com/help.jpg

my best option is:
http://www.ndoherty.biz/demos/coda-slider/2.0/
(example four)

Why example four? (well the author of the plugin suggested it) :D
http://www.ndoherty.biz/forums/viewtopic.php?f=9&t=23

the area in which I am trying to place this div is highllighted in purple.

i've tried going through the steps to implement the codes into my html file, but for some reason it goes wrong.

if you look at my other pages, the txt and div are generally placed by an "absolute" position. So i plan on doing the same thing for the the webdesign section as well. I know this isn't the proper way to do it.
And yes, I am also a designer first, programmer second...And also, I am using dreamweaver.

I am okay with javascript, but I can't seem to get it right. I hope everything is clear. I am looking to get help with the codes (how to string it up) on both side, css and the appropriate way to attach the .js files with the .html file..

any help will do...

_threedash

thanks for reading my post.

BaylorRae

I will help you build the slider, but I'm in my last week before Thanksgiving break and I have a few tests that I need to study for so I can't work on it right now. But I'm free this next week so hopefully I can help you make your coda slider.

I took the code on your website and improved the navigation (made it into one sprite) and optimized some of the CSS. I'm planing on making a video explaining what I changed and why I changed it.

// Here's an example of your site (It looks the same other than the links don't work)
http://geek-like-me.com/example/three-dash/

- Baylor

threedash

hey,

thanks a lot for your help. i will try to implement your sprite image for my nav rollovers.
looking forward to the help

_threedash

BaylorRae

I'm sorry for the long wait. I've been away from my computer and didn't get a chance to upload the files.

I've uploaded the final to my website
http://geek-like-me.com/example/three-dash/

and the zip
http://geek-like-me.com/example/three-dash.zip

I built a coda slider from scratch because it was easier for me to customize it, and I've put it into a plugin.

Usage: [jQuery]


$('#slideshow').slideshow({
     speed: 'normal', // supports jQuery ['slow', 'normal', 'fast'] and milliseconds
     easing: 'swing' // all easing functions from the easing file, but most of them are buggy
});

and the html markup


<div id=\"slideshow\">
	<div id=\"slideshow-wrapper\">
		<div id=\"slideshow-slides\">
			<div class=\"slide\">
				<img src=\"site-thumbs/css-tricks.jpg\" width=\"348\" height=\"200\" alt=\"Css Tricks\">
			</div>
			<div class=\"slide\">
				<img src=\"site-thumbs/j4d.jpg\" width=\"348\" height=\"200\" alt=\"J4d\">
			</div>
			<div class=\"slide\">
				<img src=\"site-thumbs/net-tuts.jpg\" width=\"348\" height=\"200\" alt=\"Net Tuts\">
			</div>
			<div class=\"slide text\">
				<h3>End of Portfolio</h3>
				<p>Go To The <a href=\"javascript:gotoSlide(1);\">Beginning</a></p>
			</div>
		</div>
	</div>
	<a id=\"slideshow-prev\" href=\"#\">Previous</a>
	<a id=\"slideshow-next\" href=\"#\">Next</a>
</div>

Let me know what you think,

-Baylor

threedash

hey,

pm me your address. someone needs to send you holiday cookies.

_threedash, (i looked at the example. it's exactly what I am looking for) let me dig into it some more.

cctravis

I have a coda slider installed on a page I am working on but I can not figure out how to get it to work correctly. The thumb nails under it are stacked and I can not figure out why.

Any help?
This is the URL
http://clubsurfnicaragua.com/

treehouse : what would you like to learn today?

Forums

coda slider guru