TOP

Using Nivo Slider In Your Template

In order to use the Nivo Slider as part of your template you must first have it integrated with Vin65. All of Vin65's latest templates have the Nivo Slider already integrated for you, but if you are redoing an older site, you may need to add it. You can learn how to integrate the slider at the bottom of the page. 

There are 2 photo gallery types; one for your page, and one for your homepage. Galleries for pages can be created and inserted on pages via components. You can learn more about how to do this here. The homepage feature gallery is unique for every site, so it requires a couple of extra steps. 

1. Setting up your gallery

To create a gallery, go to Content Editor > Components > Photo Gallery and, on the right hand side, click Manage Photo Galleries, then Add a Photo Gallery


 

2. Gathering gallery information

Once your gallery is created in the admin panel, you will need to grab the size and gallery ID and save that information into your scripts file under the home photo gallery section. 

 

3. Adding the gallery location

A call to the photo gallery now needs to be added in your template file (ex. home.htm) Include the div below where you would like the photo gallery to be rendered. 

<div id="slider"></div>

Note: Make sure to parse your file to make sure that the changes take effect. 

 

4. Adding photos to your gallery. 

To add photos to your gallery, go to Content Editor > Components > Photo Gallery > Add a Photo

Give the photo a title and an order and make sure to select the correct gallery. 

After photos have been added to your gallery, it is now ready to go. 

 

Integrating Nivo Slider with Vin65 Photo Gallery

If Nivo Slider isn't already integrated, you can follow the steps below to add it in to your template.  

1. Including files in the html

In order to implement a Nivo Slider with the Vin65 Photo Gallery we need to include a couple custom files in the header of your template:

  1. Nivo Plugin Script: jquery.nivo.slider.pack.js ~ download
  2. Nivo CSS: nivo-slider.css ~ download

Generally we include them with our other css and js files in our templates with the Vin65 tags so they get time stamped something like this:

<v65:js files="/assets/js/scripts.js,/assets/nivo/jquery.nivo.slider.pack.js"></v65:js>
<v65:css files="/assets/nivo/nivo-slider.css,/assets/css/screen.css"></v65:css>
 

2. Calling Nivo Slider in your scripts file

Include a call to the Nivo Slider in a scripts.js file so the gallery loads. Download sample

var v65 = {

     home : {

          initPhotoGallery : function(){

               if($("#slider").length){

                    $("#slider").v65PhotoGallery({

                         galleryHeight : 350, // This changes the height of the homepage photogallery

                         galleryWidth : 950, // This changes the width of the homepage photogallery

                         galleryId : "faeca5fe-2264-112b-b112-de10559a1183"  //  Your own homepage gallery ID

                    });

               }

          }

     },

     page : {

          initPhotoGallery : function(){

               if($("#pagePhotoGallery").length){

                    $("#pagePhotoGallery").v65PhotoGallery({

                         /*Uncomment the code below if you want to change how the photo gallery is displayed.



                              galleryHeight : 420, // This value is translated to 420px and will change the photogallery height

                              galleryWidth : 630, // This value is translated to 630px and will change the photogallery width

                              pauseTime : 5000, // Adjust how long the image is displayed for. Value is in milliseconds

                              animSpeed : 1000, // Adjust the transition speed between images. Value is in milliseconds

                              controlNav : false, // hide the 1,2,3 navigation

                              directionNav : false // hide the arrow navigation

                         */

                    });

               }

          }

     }

}



// Create galleries when page is loaded

$(document).ready(function() {

     v65.home.initPhotoGallery();

     v65.page.initPhotoGallery();

});



//This area is the connector for the plugin to the xml feed from the Vin65 Photo Gallery

//You don't need to change anything, just include it



(function(a,b){a.fn.v65PhotoGallery=function(d){var f={galleryId:a("#pagePhotoGallery").attr("v65jsphotogalleryid"),galleryHeight:a("#pagePhotoGallery").attr("v65jsphotogalleryheight"),galleryWidth:a("#pagePhotoGallery").attr("v65jsphotogallerywidth"),timestamp:"&timestamp="+new Date().getTime(),effect:"fade",slices:15,animSpeed:500,pauseTime:5000,startSlide:0,directionNav:true,directionNavHide:true,controlNav:true},c=a(this),e=a.extend(f,d);c.html("").css({height:e.galleryHeight,width:e.galleryWidth,overflow:"hidden"});a.ajax({type:"GET",url:"/index.cfm?method=pages.showPhotoGalleryXML&photogalleryid="+e.galleryId+f.timestamp,dataType:"xml",success:function(h){var g="";a(h).find("img").each(function(){var i="/assets/images/photogallery/images/large/",l=a(this).attr("src"),j=a(this).attr("caption"),k=a(this).attr("link");if(k===b){g+='<img src="'+i+l+'" title="'+j+'"/>'}else{g+='<a href="'+k+'"><img src="'+i+l+'" title="'+j+'"/></a>'}});c.append(g)},complete:function(){c.nivoSlider({effect:e.effect,slices:e.slices,animSpeed:e.animSpeed,pauseTime:e.pauseTime,startSlide:e.startSlide,directionNav:e.directionNav,directionNavHide:e.directionNavHide,controlNav:e.controlNav})}})}})(jQuery);