How did I mod it? Before I start, here are some links I found useful during modding it (or for other things as well):
- http://api.jquery.com/ready/
- http://jquery.com/download/
- http://stacigh.com/2012/06/nivo-slider-adding-a-slide-title-and-caption/
- http://stackoverflow.com/questions/1322198/using-variables-in-rel-attribute-in-jquery-selector
- http://stackoverflow.com/questions/813493/jquery-animate-border-color-on-hover
The first thing I figured out how to do was create custom next/previous buttons. To do this you just create you're custom ones then do the following in js after setting the nivo slider button's display to none in css:
$("a.previous").click(function(){$(".nivo-directionNav .nivo-prevNav").click()})
$("a.next").click(function(){$(".nivo-directionNav .nivo-nextNav").click()})
Then I used the following to generate thumbs and put them in the thumbnails div:
$('#thumbnails').html(function(){
var html = "";
var i = 0;
$('.slider-wrapper img').each(function(){
html = html + "<div class='" + i + "'>\n";
html = html + "<img src='" + $(this).attr('src') + "' alt='" + $(this).attr('alt') + "' />\n";
html = html + "</div>";
i++;
});
return html;
});
The class for each div will only be a number which increments by one.
After they are generated, they will function just like the custom next/previous buttons I've made and click the rel according to their class:
$('#thumbnails').delegate('div', 'click', function(){
var divName = $(this).attr('class');
$("a.nivo-control[rel=" + divName + "]").click();
});
Next in the jquery.nivo.slider.js I made a couple of mods. I changed the "// Process Title function" to the following:
var processTitle = function(settings){
var nivoTitle = $('.nivo-title', slider);
if(vars.currentImage.attr('title') != '' && vars.currentImage.attr('title') != undefined){
var title = vars.currentImage.attr('title');
if(title.substr(0,1) == '#') title = $(title).html();
$('main section h6').html(title);
} else{
$('main section h6').text('nothing');
}
}
I use .html(title); instead of .text(title); so it can process span tags and not escape them. The span tags are used to decide whether the text is bold or not.
Then I changed the "// Process caption function" to the following:
var processCaption = function(settings){
var nivoCaption = $('.nivo-caption', slider);
if(vars.currentImage.attr('alt') != '' && vars.currentImage.attr('alt') != undefined){
var alt = vars.currentImage.attr('alt');
if(alt.substr(0,1) == '#') alt = $(alt).html();
$('p.image_description').text(alt);
} else{
$('p.image_description').text('nothing');
}
}
To have these both go into affect I had to make sure these were added:
//Process title
processTitle(settings);
// Process caption
processCaption(settings);
Oh and I can't forget that this css helped make the images in the slider display properly:
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
z-index:0;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }
That's all that is too it. I think the thing that was the most frustrating to me was finding that I could have just done this all along instead of spending so much time trying to make everything from scratch. I still think trying to make things from scratch is the best for learning but when you're trying to finish a project by a certain deadline it's not the best idea to reinvent the wheel.
No comments:
Post a Comment