Znalazłem lepszy ale nie mam pojęcia jak go edytować ? Pobrałem już go na komputer i chciał bym zamiast tego ładowania na dole dodać numerki 1,2,3,4… tak aby po kliknięciu na numer przenosiło do wybranego zdjęcia jak to zrobić ?
To ten slideshow na stronie :
Zawartość pliku presentationCycle.js podmień na
var presentationCycle = {
/*
* Presentation Cycle - a jQuery Cycle extension
* Author: Gaya Kessler
* URL: http://www.gayadesign.com
* Date: 03-11-09
*/
//slide options
slideTimeout: 8000,
containerId: "presentation_container",
//cycle options
cycleFx: 'scrollHorz',
cycleSpeed: 600,
//variables this script need
itemCount: 0,
currentItem: 0,
barContainer: "",
init: function() {
presentationCycle.itemCount = $('#' + presentationCycle.containerId).children().length;
presentationCycle.barContainer = $("
“); $(presentationCycle.barContainer).addClass(“pc_bar_container”); for (var i = 0; i < presentationCycle.itemCount; i++) { var item = $(”"+(i+1)+"").appendTo(presentationCycle.barContainer); $(item).attr(‘itemNr’, (i + 1)); $(item).css(‘cursor’, ‘pointer’); $(item).click(function() { presentationCycle.gotoSlide($(this).attr(‘itemNr’)); return false; }); } $(’#’ + presentationCycle.containerId).cycle({ fx: presentationCycle.cycleFx, speed: presentationCycle.cycleSpeed, timeout: presentationCycle.slideTimeout, before: function(currSlideElement, nextSlideElement) { presentationCycle.beforeSlide(currSlideElement, nextSlideElement); } }); presentationCycle.barContainer.appendTo($(’#’ + presentationCycle.containerId)); }, beforeSlide: function(currSlideElement, nextSlideElement) { if (presentationCycle.currentItem == 0) { presentationCycle.currentItem = 1; } else { presentationCycle.currentItem = (presentationCycle.itemCount - ($(nextSlideElement).nextAll().length)) + 2; } }, gotoSlide: function(itemNr) { $(’#’ + presentationCycle.containerId).cycle((itemNr - 1)); $(’#’ + presentationCycle.containerId).cycle(‘pause’); } } [/code] Natomiast zawartość pliku presentationCycle.css podmień na
[code] .pc_container { width: 600px; height: 200px; padding: 15px 1px 47px 1px; background-image: url(’…/images/pc_bg.png’); margin: 0px auto; } .pc_container .pc_item { margin-top: 15px; margin-left: 1px; width: 600px; height: 200px; } .pc_bar_container { position: absolute; top: 230px; color: white; padding: 0px 10px 0px 10px; width: 100%; overflow:visible; } .pc_bar_container a {font-size:11px;border:1px solid #fff;padding:2px;margin:2px;text-decoration:none;} .pc_bar_container a:hover {} .pc_item .desc { position: absolute; width: 250px; padding: 10px; height: 180px; line-height: 1.8em; right: 0px; background-image: url(…/images/slide_fade.png); } .pc_item .desc h1 { color: #DE8F26; }
Wygląd numerów strony ustawiasz w powyższym pliku (.pc_bar_container a).