Friday, May 17, 2013

Messin with nivo

I know, it's been a few days since I last posted.  This is because I was busy getting frustrated trying to create a jquery image slideshow/gallery from scratch.  All this frustration caused me to give up and just make a few modifications to nivo slider: http://dev7studios.com/nivo-slider/

How did I mod it?  Before I start, here are some links I found useful during modding it (or for other things as well):

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