Images with hyperlinks and titles

Ini adalah contoh membuat pengalihan ke beberapa halaman dengan mengklik gambar dan menambahkan judul untuk setiap gambar. Semuanya dilakukan oleh peristiwa penanganan: sebelum ada dua array diciptakan untuk link dan judul, setiap elemen array ditempatkan sesuai dengan setiap gambar. Setelah itu, slider dibuat dan pada setiap perubahan citra judul berubah. Ketika klik pada gambar yang terjadi halaman baru dibuka dengan link dari "link" array. Pada akhirnya, jika Anda ingin, hanya mengatur css properti "kursor: pointer" untuk wadah slider.

Jika Anda perlu untuk menangani klik pesan dan judul juga - itu benar-benar sama, mengubah acara saja.

/* prepare the set of links for each picture */
var links = [
"https://www.google.com/search?q=beaverslider%20link%201",
"https://www.google.com/search?q=beaverslider%20link%202",
"https://www.google.com/search?q=beaverslider%20link%203",
"https://www.google.com/search?q=beaverslider%20link%204",
"https://www.google.com/search?q=beaverslider%20link%205",
"https://www.google.com/search?q=beaverslider%20link%206",
"https://www.google.com/search?q=beaverslider%20link%207",
"https://www.google.com/search?q=beaverslider%20link%208",
"https://www.google.com/search?q=beaverslider%20link%209",
"https://www.google.com/search?q=beaverslider%20link%2010"
];

/* prepare the set of titles for each picture */
var titles = [
"Go to google to search for 'beaverslider link 1'",
"Go to google to search for 'beaverslider link 2'",
"Go to google to search for 'beaverslider link 3'",
"Go to google to search for 'beaverslider link 4'",
"Go to google to search for 'beaverslider link 5'",
"Go to google to search for 'beaverslider link 6'",
"Go to google to search for 'beaverslider link 7'",
"Go to google to search for 'beaverslider link 8'",
"Go to google to search for 'beaverslider link 9'",
"Go to google to search for 'beaverslider link 10'"
];

/* set up the proper cursor */
$("#demo-slider").css("cursor","pointer");

/* finally, create the slider */
var slider = new BeaverSlider({
type: "slider",
structure: {
container: {
id: "demo-slider",
width: 720,
height: 420
}
},
content: {
images: [
"/img/slider-demo/1.jpg",
"/img/slider-demo/2.jpg",
"/img/slider-demo/3.jpg",
"/img/slider-demo/4.jpg",
"/img/slider-demo/5.jpg",
"/img/slider-demo/6.jpg",
"/img/slider-demo/7.jpg",
"/img/slider-demo/8.jpg",
"/img/slider-demo/9.jpg",
"/img/slider-demo/10.jpg"
]
},
animation: {
waitAllImages: true,
effects: effectSets["slider: big set 2"],
initialInterval: 1000,
interval: 2000
},
events: {
/* setup event for each click to create links */
imageClick: function(slider) {
var currentLink = links[slider.currentImage];
if (currentLink) window.open(currentLink);
},
/* setup event for each image change to change the title as well */
afterSlideStart: function(slider) {
var currentTitle = titles[slider.currentImage];
if (currentTitle) slider.container.attr("title",currentTitle);
},
/* setup title for the first image */
afterInitialize: function(slider) {
if (titles[0]) slider.container.attr("title",titles[0]);
}
}
});