2013-07-18 4 views
2

с помощью кода из http://touchslider.comtouchslider.com как добавить несколько вариантов

1.) как может (образ «currentClass» начинается с) Задается случайным образом? , так что любое изображение будет отображаться при загрузке?

2.) как вы можете переключить сценарий, нажав на изображение?

Более конкретно, есть ссылки для навигации и изображения, которые вы можете щелкнуть/проведите по экрану , как вы можете настроить его, чтобы при щелчке по изображению он блокировал это изображение, отключая навигационные ссылки и салфетки ??

редактировать: второй вариант решается +

Я был в состоянии работать вокруг редактирования сценария touchslider.com и сделал 2-й вариант запрошенной возможно с помощью прозрачного DIV.

JS (в организме)

<script> 
$(document).ready(function(){ 
var $content = $("#disablediv1").hide(); 
$(".lock").on("click", function(e){ 
$content.toggle(); 
}); 
}); 
</script> 

HTML (оберточной изображение)

<a class="lock" href="#"><img src="IMAGELINK"></img></a> 

HTML (прозрачный DIV расположен над ссылками, чтобы отключить)

<div id="disablediv1"></div> 

CSS (для прозрачной div)

#disablediv1{ 
position:absolute; 
left:200px; 
top:20px; 
width:600px; 
height:544px; 
z-index:999; 
} 

^надеюсь, кто-то найдет это полезным.

* Я все еще ищу способ, чтобы иметь ползунок показать, что это первое изображение в случайном порядке ...

ответ

0

Я прибрала оригинальный HTML и CSS в примере TouchSlider. http://touchslider.com/

Рабочий пример.

http://jsfiddle.net/jvt7U/1/

Это работает как прелоадер изображения, для повышения эффективности. Изображение src исключено из HTML, и для изображений имеется массив, называемый галереей.

Есть две петли. Первый цикл устанавливает случайный порядок в структуре массива. Например:

2,0,1 
1,2,0 
0,1,2 

Второй цикл назначает местоположение изображения на основе пути изображения из массива галереи.

Случайный генератор.

Вы можете искать вокруг генераторы случайных чисел и просто заменить код здесь.

// Randomize the Array 
galleryPosition.sort(function() {return 0.5 - Math.random()}); 
Смежные вопросы