193 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Has sold $100+ on Envato Market
  • Has collected 1+ items on Envato Market
+2 more
Roeven says

Hey all,
I’m playing with the so called “Coda Slider”, following a guide on the themeforest blog: http://blog.themeforest.net/tutorials/coda-slider-and-more-with-jquery-tools
I’ve successfully installed it, but now I want to do some customization.
Since I don’t know Javascript (very well), I’ll ask my question here!

I’d like to link to a specific slide. There already are tabs linking to the according slides. How do I do this?

Code for the tabs:
$(function() {
/* Initialize Scrollable “Coda Slider” */
$(“div.scrollable”).scrollable({size:1});
$(“div.navi a”).each(function(i) {
$(this).html(‘Tab ’ + (i+1));
});
});

Live Demo:
http://www.daniel.roeven.com/somesite/portfolio.html

193 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Has sold $100+ on Envato Market
  • Has collected 1+ items on Envato Market
+2 more
Roeven says

Anyone?

353 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Has sold $100+ on Envato Market
  • Has collected 1+ items on Envato Market
+2 more
chack says

So you want that the Coda slider slides to the Div?

I.E. you cklick @ portfolio and the div slides to portfolio?

Try

$("#nav-BLA").click(function () {
     $("#div").show("slow"); //show div

Jquery based…

193 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Has sold $100+ on Envato Market
  • Has collected 1+ items on Envato Market
+2 more
Roeven says
So you want that the Coda slider slides to the Div?

I.E. you cklick @ portfolio and the div slides to portfolio?

Try

$("#nav-BLA").click(function () {
     $("#div").show("slow"); //show div
Jquery based…

Erm… No.
I’m sorry if I was unclear, but what I wanted was to make any of the images under “Click Any Of These…” a link to the corresponding slide. Just like the tabs do right now.
353 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Has sold $100+ on Envato Market
  • Has collected 1+ items on Envato Market
+2 more
chack says

AAAAH

So to be sure, you want that you can click at these pictures at the bottom, and when you click it the big slider should slide to that?

193 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Has sold $100+ on Envato Market
  • Has collected 1+ items on Envato Market
+2 more
Roeven says
AAAAH So to be sure, you want that you can click at these pictures at the bottom, and when you click it the big slider should slide to that?

Yes.



:)
353 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Has sold $100+ on Envato Market
  • Has collected 1+ items on Envato Market
+2 more
chack says

Wow that was fast ;D

Then use

$(”#img”).click(function () { $(”#img-big”).show(“slow”); //show div

That would work in Jquery.

But that should work in your Coda slider too…

Just link with the small image to the big one.

193 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Has sold $100+ on Envato Market
  • Has collected 1+ items on Envato Market
+2 more
Roeven says
Lol, I’m still way to silly to understand any of that.
I’m guessing I should put the
$(”#img”).click(function () { $(”#img-big”).show(“slow”);
wrapped in script tags in the header?

Then I link the images to the #big img – how?

I’m sorry for being such a nuisance. :P
353 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Has sold $100+ on Envato Market
  • Has collected 1+ items on Envato Market
+2 more
chack says

Well,

as example this purple picture i called blubb.

You write in the body

This top box

This whole blabla stuff

purple big

Now this second box

Then in the Head or seperat .js

$(”#blubb”).click(function () { $(”#img-big”).show(“slow”);

193 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Has sold $100+ on Envato Market
  • Has collected 1+ items on Envato Market
+2 more
Roeven says

I feel so dumb right now. It still doesn’t work.

Included in the header is this:
<script type="text/javascript"> $(”#blubb”).click(function () { $(”#img-big”).show(“slow”); </script>

The div/slide that I want to link to looks like this:
<div id="blubb> <img src="img/sliderimg1.jpg" /> <h3>Lorem Ipsum</h3> <p> Lorem ipsum dolor sit amet...<p> </p></p>

And finally, the picture at the bottom which should link to a div/slide in the slider:
<a href="#blubb" title="Lorem Ipsum"><img src="img/thumblarge1.jpg" /></a>

What am I doing wrong?

by
by
by
by
by
by