Ajax – Coda Slider Effect

The tutorial Coda Slider Effect by jQuery for Designers has been followed. A few changes have been done to the file coda-slider.js to meet the demands of the theme.

Changes done

In this part of the code, the following has been added “width: 946px” to meet the demands of the theme.

// collect the scroll object, at the same time apply the hidden overflow
// to remove the default scrollbars that will appear
var $scroll = $('#slider .scroll').css(
'overflow': 'hidden'
,'width': '946px');

In the demo the images of the buttons can be found at http://demo.wpesp.com/portfolio/wp-content/uploads/scroll_left.png, This part should be published using the url address chosen for your buttons, as for example http://yoururl.com/wp-content/uploads/scroll_left.png.

// apply our left + right buttons
$scroll
.before('<img class="scrollButtons left" src="http://demo.wpesp.com/portfolio/wp-content/uploads/scroll_left.png" alt="Left button" />')
.after('<img class="scrollButtons right" src="http://demo.wpesp.com/portfolio/wp-content/uploads/scroll_right.png" alt="Right button" />');

Part of the original code has been deleted, because our theme does not use this navigation. The example of jQuery for Designers corresponds to the top navigation.

// handle nav selection
function selectNav() {
  $(this)
    .parents('ul:first')
      .find('a')
        .removeClass('selected')
      .end()
    .end()
    .addClass('selected');
}

$('#slider .navigation').find('a').click(selectNav);

// go find the navigation link that has this target and select the nav
function trigger(data) {
  var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
  selectNav.call(el);
}

if (window.location.hash) {
  trigger({ id : window.location.hash.substr(1) });
} else {
  $('ul.navigation a:first').click();
}

The following lines corresponding to the previous navigator have also been deleted.

navigation: '.thumb a',
onAfter: trigger, // our final callback

Theme License Portfolio Wordpress Codex

Top

12 Responses to “Ajax – Coda Slider Effect”

Juan said: 1
27-12-2008 at %I:%M %p

Hola, nuevamente yo, quería ahcerte una consulta, cuando hago click en uno de los featured o de los normales work, cuando me carga la página, no aparece el contenido del post, solamente el header con el footer pegado a el mismo.

A que se debe esto? Que hice mal?

muchas gracias!
Víctor said: 2
27-12-2008 at %I:%M %p

Según he entendido, creo que se solucionará cambiando el ID en work.php. Hay una pequeña explicación en la sección Wordpress Codex => Work.php.
Alguien de Perico said: 3
11-03-2009 at %I:%M %p

Hola Victor, muy buen theme.
Lo usaré en mi portfolio si es que logro solucionar algo:
Me muestra los posts del featured en la home uno bajo el otro y no de modo horizontal con los botones para pasar hacia la izquierda o derecha.

¿Tenés idea de como puedo solucionarlo?

Desde ya muchas gracias che.
Entrada 2 said: 4
14-03-2009 at %I:%M %p

[...] estilos del script coda-slider.js los localizamos en este [...]
FloiT said: 5
28-03-2009 at %I:%M %p

yo tengo el mismo problema que Juan. He seguido con detenimiento las instrucciones. Pero no veo qué es lo que se tiene que cambiar en Work.php… ¿las letras “ID” por el número de nuestra categoría Work?:

ID, "client_value", true); $company = get_post_meta($post->ID, "company_value", true); $deliverables = get_post_meta($post->ID, "deliverables_value", true); $src_featured_image = get_post_meta($post->ID, "src_featured_image_value", true); $view_web_site = get_post_meta($post->ID, "view_web_site_value", true); ?>
g2 said: 6
03-04-2009 at %I:%M %p

Hi everbody

I am very happy to get stared with this fantastic theme; appreciate to share this file, Victor.

I have some questions regarding Coda Slider
follwing tutorials and comments, I

added ” width: 946px”
changed link directory for right and left buttons
then deleted 2 parts( sentence) out of original file.

but still looks same;remains original feature with vertical scroll bar.

Does anybody instruct me how to add the Code Slider fieature?
I really appreciate it in advance if somebody help me
Edwin said: 7
20-05-2009 at %I:%M %p

Dear WPESP,

i’m having a problem with the coda-slider thing.
It all worked fine on my website until i installed the lightbox plugin or any other plugin with the same sort of functionallity.

The problem is, the images show as supposed to (with overlay) but the slider doesn’t slide anymore. i need them both to work. Anyone knows an answer?
David Castillo said: 8
28-05-2009 at %I:%M %p

Hola victor, que tema tan bonito te has craneado, me gusta mucho.

Tengo una duda, como hago para enlazar las páginas internas About o Contac-Us, he intentado de todas las formas porislbes pero siempre me arroja el problema que la página no se encuentra. He revisado la explicación y no se como solucionarlo.

De todos modos muchas gracias pro el tema, es muy bonito.
ÅB said: 9
03-06-2009 at %I:%M %p

I unchecked the “homepage” among others on the lightbox settings page. I now have checked Individual blog posts and Individual Pages. Worked perfectly after that. Hope that helps.
Patrik said: 10
17-06-2009 at %I:%M %p

I can’t get this to work either… Do I have to do the tutorial on http://jqueryfordesigners.com/video.php?f=coda-slider.flv before I do your tweaks or is that already done??
Pilo said: 11
08-07-2009 at %I:%M %p

Hola. Gracias por este theme!. Una consulta, lo instalé pero me deforma las imágenes, necesito saber cómo modificar el formato de presentación de las imágenes sin que las deforme. Gracias!!
Benny said: 12
28-12-2009 at %I:%M %p

Hello, great theme, i want to use it. but i’ve got a question. i want that:
If i click on the small picture that the slide show this picture and no link to the article. do you know what i mean? what have i to do.

i hope you understand my bad english. Thx a lot !

Top

WPESP – WordPress Themes