After lots of brain storming i have created my own solution by the grace of Almighty ALLAH. My NivoSlider will show new image everytime when page is refreshed ... I have also shown how to insert image in database using fileupload here so that user can insert new image to his slider .. Here it is for other developers.
HTML :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="NivoSliderImageShowingRandomly.aspx.cs" Inherits="NivoSliderImageShowingRandomly" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.auto-style1 {
width: 143px;
}
</style>
<link href="themes/default/default.css" rel="stylesheet" media="screen" />
<link href="nivo-slider.css" rel="stylesheet" media="screen" />
<%-- <link rel="stylesheet" href="style.css" type="text/css" media="screen" />--%>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset>
<legend>Area for inserting new image to database</legend>
<asp:FileUpload ID="FileUpload1" runat="server" />
<br />
<table style="width: 100%;">
<tr>
<td class="auto-style1">Target</td>
<td>
<asp:DropDownList ID="targetDrp" runat="server" Height="32px" Width="156px">
<asp:ListItem Selected="True">_blank</asp:ListItem>
<asp:ListItem>_parent</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="auto-style1">URL </td>
<td>
<asp:TextBox ID="UrlBox" runat="server" Width="511px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style1">Image ID</td>
<td>
<asp:TextBox ID="ImgID" runat="server" Width="150px" placeholder="Integers only"></asp:TextBox>
</td>
</tr>
</table>
<br />
<asp:Button ID="UploadImage" runat="server" OnClick="UploadImage_Click" Text="UPLOAD NEW IMAGE" />
<asp:Button ID="P_Refresh" runat="server" OnClick="P_Refresh_OnClick" Text="REFRESH THE PAGE" />
</fieldset>
<br />
<asp:GridView ID="GridView1" runat="server" Style="float: left" AutoGenerateColumns="False" CellPadding="4" DataKeyNames="Seq" DataSourceID="SqlDataSource1" Width="429px" ForeColor="#333333" GridLines="None">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:BoundField DataField="Seq" HeaderText="Seq" InsertVisible="False" Visible="False" ReadOnly="True" SortExpression="Seq" />
<asp:BoundField DataField="ID" HeaderText="Image Order" SortExpression="ID" />
<asp:BoundField DataField="URL" HeaderText="URL" SortExpression="URL" />
<asp:BoundField DataField="targetURL" HeaderText="Target" SortExpression="targetURL" />
<asp:TemplateField HeaderText="Image" SortExpression="Name">
<ItemTemplate>
<asp:Image ID="BSLogoImage" runat="server" Height="70" Width="70" AlternateText=" " ImageAlign="Middle" ImageUrl='<%# Bind("Name") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" ForeColor="White" Font-Bold="True" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle ForeColor="White" HorizontalAlign="Center" BackColor="#284775" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NivoSliderDBConnectionString %>" SelectCommand="SELECT * FROM [myImages]"></asp:SqlDataSource>
<div id="wrapper" style="width: 800px; float: right">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<asp:Repeater ID="rptImages" runat="server">
<ItemTemplate>
<a href='<%# Eval("URL") %>' target="<%# Eval("targetURL") %>">
<asp:Image ID="Img2" alt="" ImageUrl='<%# Eval("Name") %>' runat="server" />
</a>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
</div>
<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<script src="scripts/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function () {
$('#slider').nivoSlider({
pauseTime: 3000,
effect: 'fade'
});
});
</script>
</div>
</form>
</body>
</html>
C# :
using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Text;
using System.Web.UI;
public partial class NivoSliderImageShowingRandomly : Page
{
private readonly SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["NivoSliderDBConnectionString"].ConnectionString);
protected void Page_Load(object sender, EventArgs e)
{
int check = IsFirstTimeImageInserting();
if (check > 0)
{
GenerateNewImageEachTime();
}
}
public int IsFirstTimeImageInserting()
{
string query = "SELECT COUNT(*) FROM myImages";
var comm = new SqlCommand(query, conn);
conn.Open();
int value = Convert.ToInt32(comm.ExecuteScalar());
conn.Close();
return value;
}
public void GenerateNewImageEachTime()
{
#region STEP 1 :: Save IDs from database to datatable
var conn =
new SqlConnection(
ConfigurationManager.ConnectionStrings["NivoSliderDBConnectionString"].ConnectionString);
var comm = new SqlCommand("ShowNewImage", conn);
comm.CommandType = CommandType.StoredProcedure;
conn.Open();
var adapter = new SqlDataAdapter(comm);
var saveID_DataTable = new DataTable();
adapter.Fill(saveID_DataTable);
conn.Close();
#endregion
#region STEP 2 :: Making and Saving StringBuilder having values from database
var makeQuery = new StringBuilder();
int count = saveID_DataTable.Rows.Count;
int currentID = 0;
foreach (DataRow row in saveID_DataTable.Rows)
{
if (currentID < count - 1)
{
makeQuery.Append(" SELECT * FROM [dbo].myImages WHERE ID = " + row["id"]);
makeQuery.Append(" UNION ALL ");
currentID++;
}
else
{
makeQuery.Append(" SELECT * FROM [dbo].myImages WHERE ID = " + row["id"]);
}
}
var comm_2 = new SqlCommand(makeQuery.ToString(), conn);
conn.Open();
var dt = new DataTable();
dt.Load(comm_2.ExecuteReader());
rptImages.DataSource = dt;
rptImages.DataBind();
conn.Close();
#endregion
}
protected void UploadImage_Click(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
{
FileUpload1.SaveAs(Server.MapPath("images/" + FileUpload1.FileName));
string InsertInDB =
"INSERT INTO [dbo].[myImages] ([ID],[URL],[targetURL],[Name]) VALUES (@ID,@URL,@TARGET,@NAME);" +
"INSERT INTO [dbo].[temp_img] ([ImgID],[isUsed]) VALUES (@ID,0);";
var conn =
new SqlConnection(
ConfigurationManager.ConnectionStrings["NivoSliderDBConnectionString"].ConnectionString);
var comm = new SqlCommand(InsertInDB, conn);
conn.Open();
comm.Parameters.AddWithValue("@ID", int.Parse(ImgID.Text));
comm.Parameters.AddWithValue("@URL", UrlBox.Text);
comm.Parameters.AddWithValue("@TARGET", targetDrp.SelectedItem.Text);
comm.Parameters.AddWithValue("@NAME", "images/" + FileUpload1.FileName);
comm.ExecuteNonQuery();
conn.Close();
conn.Dispose();
Response.Write("Inserted");
GridView1.DataBind();
ImgID.Text = UrlBox.Text = string.Empty;
GenerateNewImageEachTime();
}
}
protected void P_Refresh_OnClick(object sender, EventArgs e)
{
Response.Redirect(Request.Url.AbsoluteUri);
}
}
Web.Config:
<?xml version="1.0"?>
<!--
For more information on how to configure your ASP.NET application, please visit
http://go.microsoft.com/fwlink/?LinkId=169433
-->
<configuration>
<connectionStrings>
<add name="NivoSliderDBConnectionString" connectionString="Data Source=.;Initial Catalog=NivoSliderDB;Integrated Security=True"
providerName="System.Data.SqlClient" />
</connectionStrings>
<system.web>
<compilation debug="true" targetFramework="4.0" />
</system.web>
</configuration>
Files to run NivoSlider :
nivo-slider.css :
/*
* jQuery Nivo Slider v3.0.1
* http://nivo.dev7studios.com
*
* Copyright 2012, Dev7studios
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
.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; }
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
width:100%;
z-index:8;
padding: 5px 10px;
opacity: 0.8;
overflow: hidden;
display: none;
-moz-opacity: 0.8;
filter:alpha(opacity=8);
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
text-align:center;
padding: 15px 0;
}
.nivo-controlNav a {
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
style.css
/*=================================*/
/* Nivo Slider Demo
/* November 2010
/* By: Gilbert Pellegrom
/* http://dev7studios.com
/*=================================*/
/*====================*/
/*=== Reset Styles ===*/
/*====================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin:0;
padding:0;
border:0;
outline:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}
body {
line-height:1;
color:black;
background:white;
}
table {
border-collapse:separate;
border-spacing:0;
}
caption, th, td {
text-align:left;
font-weight:normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
display: block;
}
/*===================*/
/*=== Main Styles ===*/
/*===================*/
body {
font:14px/1.6 Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
color:#333;
background:#eee;
}
a, a:visited {
color:blue;
text-decoration:none;
}
a:hover, a:active {
color:#000;
text-decoration:none;
}
#dev7link {
position:absolute;
top:0;
left:50px;
background:url(images/dev7logo.png) no-repeat;
width:60px;
height:67px;
border:0;
display:block;
text-indent:-9999px;
}
.slider-wrapper {
width: 80%;
margin: 20px auto;
}
.theme-default #slider {
margin:100px auto 0 auto;
}
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
margin-top:150px;
}
/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {
clear:both;
}
jquery.nivo.slider.js :
/*
* jQuery Nivo Slider v3.0.1
* http://nivo.dev7studios.com
*
* Copyright 2012, Dev7studios
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(function($) {
var NivoSlider = function(element, options){
// Defaults are below
var settings = $.extend({}, $.fn.nivoSlider.defaults, options);
// Useful variables. Play carefully.
var vars = {
currentSlide: 0,
currentImage: '',
totalSlides: 0,
running: false,
paused: false,
stop: false,
controlNavEl: false
};
// Get this slider
var slider = $(element);
slider.data('nivo:vars', vars).addClass('nivoSlider');
// Find our slider children
var kids = slider.children();
kids.each(function() {
var child = $(this);
var link = '';
if(!child.is('img')){
if(child.is('a')){
child.addClass('nivo-imageLink');
link = child;
}
child = child.find('img:first');
}
// Get img width & height
var childWidth = (childWidth === 0) ? child.attr('width') : child.width(),
childHeight = (childHeight === 0) ? child.attr('height') : child.height();
if(link !== ''){
link.css('display','none');
}
child.css('display','none');
vars.totalSlides++;
});
// If randomStart
if(settings.randomStart){
settings.startSlide = Math.floor(Math.random() * vars.totalSlides);
}
// Set startSlide
if(settings.startSlide > 0){
if(settings.startSlide >= vars.totalSlides) { settings.startSlide = vars.totalSlides - 1; }
vars.currentSlide = settings.startSlide;
}
// Get initial image
if($(kids[vars.currentSlide]).is('img')){
vars.currentImage = $(kids[vars.currentSlide]);
} else {
vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
}
// Show initial link
if($(kids[vars.currentSlide]).is('a')){
$(kids[vars.currentSlide]).css('display','block');
}
// Set first background
var sliderImg = $('<img class="nivo-main-image" src="#" />');
sliderImg.attr('src', vars.currentImage.attr('src')).show();
slider.append(sliderImg);
// Detect Window Resize
$(window).resize(function() {
slider.children('img').width(slider.width());
sliderImg.attr('src', vars.currentImage.attr('src'));
sliderImg.stop().height('auto');
$('.nivo-slice').remove();
$('.nivo-box').remove();
});
//Create caption
slider.append($('<div class="nivo-caption"></div>'));
// Process caption function
var processCaption = function(settings){
var nivoCaption = $('.nivo-caption', 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();
if(nivoCaption.css('display') == 'block'){
setTimeout(function(){
nivoCaption.html(title);
}, settings.animSpeed);
} else {
nivoCaption.html(title);
nivoCaption.stop().fadeIn(settings.animSpeed);
}
} else {
nivoCaption.stop().fadeOut(settings.animSpeed);
}
}
//Process initial caption
processCaption(settings);
// In the words of Super Mario "let's a go!"
var timer = 0;
if(!settings.manualAdvance && kids.length > 1){
timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
}
// Add Direction nav
if(settings.directionNav){
slider.append('<div class="nivo-directionNav"><a class="nivo-prevNav">'+ settings.prevText +'</a><a class="nivo-nextNav">'+ settings.nextText +'</a></div>');
// Hide Direction nav
if(settings.directionNavHide){
$('.nivo-directionNav', slider).hide();
slider.hover(function(){
$('.nivo-directionNav', slider).show();
}, function(){
$('.nivo-directionNav', slider).hide();
});
}
$('a.nivo-prevNav', slider).live('click', function(){
if(vars.running) { return false; }
clearInterval(timer);
timer = '';
vars.currentSlide -= 2;
nivoRun(slider, kids, settings, 'prev');
});
$('a.nivo-nextNav', slider).live('click', function(){
if(vars.running) { return false; }
clearInterval(timer);
timer = '';
nivoRun(slider, kids, settings, 'next');
});
}
// Add Control nav
if(settings.controlNav){
vars.controlNavEl = $('<div class="nivo-controlNav"></div>');
slider.after(vars.controlNavEl);
for(var i = 0; i < kids.length; i++){
if(settings.controlNavThumbs){
vars.controlNavEl.addClass('nivo-thumbs-enabled');
var child = kids.eq(i);
if(!child.is('img')){
child = child.find('img:first');
}
if(child.attr('data-thumb')) vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('data-thumb') +'" alt="" /></a>');
} else {
vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');
}
}
//Set initial active link
$('a:eq('+ vars.currentSlide +')', vars.controlNavEl).addClass('active');
$('a', vars.controlNavEl).bind('click', function(){
if(vars.running) return false;
if($(this).hasClass('active')) return false;
clearInterval(timer);
timer = '';
sliderImg.attr('src', vars.currentImage.attr('src'));
vars.currentSlide = $(this).attr('rel') - 1;
nivoRun(slider, kids, settings, 'control');
});
}
//For pauseOnHover setting
if(settings.pauseOnHover){
slider.hover(function(){
vars.paused = true;
clearInterval(timer);
timer = '';
}, function(){
vars.paused = false;
// Restart the timer
if(timer === '' && !settings.manualAdvance){
timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
}
});
}
// Event when Animation finishes
slider.bind('nivo:animFinished', function(){
sliderImg.attr('src', vars.currentImage.attr('src'));
vars.running = false;
// Hide child links
$(kids).each(function(){
if($(this).is('a')){
$(this).css('display','none');
}
});
// Show current link
if($(kids[vars.currentSlide]).is('a')){
$(kids[vars.currentSlide]).css('display','block');
}
// Restart the timer
if(timer === '' && !vars.paused && !settings.manualAdvance){
timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
}
// Trigger the afterChange callback
settings.afterChange.call(this);
});
// Add slices for slice animations
var createSlices = function(slider, settings, vars) {
if($(vars.currentImage).parent().is('a')) $(vars.currentImage).parent().css('display','block');
$('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').width(slider.width()).css('visibility', 'hidden').show();
var sliceHeight = ($('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').parent().is('a')) ? $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').parent().height() : $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').height();
for(var i = 0; i < settings.slices; i++){
var sliceWidth = Math.round(slider.width()/settings.slices);
if(i === settings.slices-1){
slider.append(
$('<div class="nivo-slice" name="'+i+'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block !important; top:0; left:-'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px;" /></div>').css({
left:(sliceWidth*i)+'px',
width:(slider.width()-(sliceWidth*i))+'px',
height:sliceHeight+'px',
opacity:'0',
overflow:'hidden'
})
);
} else {
slider.append(
$('<div class="nivo-slice" name="'+i+'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block !important; top:0; left:-'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px;" /></div>').css({
left:(sliceWidth*i)+'px',
width:sliceWidth+'px',
height:sliceHeight+'px',
opacity:'0',
overflow:'hidden'
})
);
}
}
$('.nivo-slice', slider).height(sliceHeight);
sliderImg.stop().animate({
height: $(vars.currentImage).height()
}, settings.animSpeed);
};
// Add boxes for box animations
var createBoxes = function(slider, settings, vars){
if($(vars.currentImage).parent().is('a')) $(vars.currentImage).parent().css('display','block');
$('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').width(slider.width()).css('visibility', 'hidden').show();
var boxWidth = Math.round(slider.width()/settings.boxCols),
boxHeight = Math.round($('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').height() / settings.boxRows);
for(var rows = 0; rows < settings.boxRows; rows++){
for(var cols = 0; cols < settings.boxCols; cols++){
if(cols === settings.boxCols-1){
slider.append(
$('<div class="nivo-box" name="'+ cols +'" rel="'+ rows +'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block; top:-'+ (boxHeight*rows) +'px; left:-'+ (boxWidth*cols) +'px;" /></div>').css({
opacity:0,
left:(boxWidth*cols)+'px',
top:(boxHeight*rows)+'px',
width:(slider.width()-(boxWidth*cols))+'px'
})
);
$('.nivo-box[name="'+ cols +'"]', slider).height($('.nivo-box[name="'+ cols +'"] img', slider).height()+'px');
} else {
slider.append(
$('<div class="nivo-box" name="'+ cols +'" rel="'+ rows +'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block; top:-'+ (boxHeight*rows) +'px; left:-'+ (boxWidth*cols) +'px;" /></div>').css({
opacity:0,
left:(boxWidth*cols)+'px',
top:(boxHeight*rows)+'px',
width:boxWidth+'px'
})
);
$('.nivo-box[name="'+ cols +'"]', slider).height($('.nivo-box[name="'+ cols +'"] img', slider).height()+'px');
}
}
}
sliderImg.stop().animate({
height: $(vars.currentImage).height()
}, settings.animSpeed);
};
// Private run method
var nivoRun = function(slider, kids, settings, nudge){
// Get our vars
var vars = slider.data('nivo:vars');
// Trigger the lastSlide callback
if(vars && (vars.currentSlide === vars.totalSlides - 1)){
settings.lastSlide.call(this);
}
// Stop
if((!vars || vars.stop) && !nudge) { return false; }
// Trigger the beforeChange callback
settings.beforeChange.call(this);
// Set current background before change
if(!nudge){
sliderImg.attr('src', vars.currentImage.attr('src'));
} else {
if(nudge === 'prev'){
sliderImg.attr('src', vars.currentImage.attr('src'));
}
if(nudge === 'next'){
sliderImg.attr('src', vars.currentImage.attr('src'));
}
}
vars.currentSlide++;
// Trigger the slideshowEnd callback
if(vars.currentSlide === vars.totalSlides){
vars.currentSlide = 0;
settings.slideshowEnd.call(this);
}
if(vars.currentSlide < 0) { vars.currentSlide = (vars.totalSlides - 1); }
// Set vars.currentImage
if($(kids[vars.currentSlide]).is('img')){
vars.currentImage = $(kids[vars.currentSlide]);
} else {
vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
}
// Set active links
if(settings.controlNav){
$('a', vars.controlNavEl).removeClass('active');
$('a:eq('+ vars.currentSlide +')', vars.controlNavEl).addClass('active');
}
// Process caption
processCaption(settings);
// Remove any slices from last transition
$('.nivo-slice', slider).remove();
// Remove any boxes from last transition
$('.nivo-box', slider).remove();
var currentEffect = settings.effect,
anims = '';
// Generate random effect
if(settings.effect === 'random'){
anims = new Array('sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft','sliceUpDown','sliceUpDownLeft','fold','fade',
'boxRandom','boxRain','boxRainReverse','boxRainGrow','boxRainGrowReverse');
currentEffect = anims[Math.floor(Math.random()*(anims.length + 1))];
if(currentEffect === undefined) { currentEffect = 'fade'; }
}
// Run random effect from specified set (eg: effect:'fold,fade')
if(settings.effect.indexOf(',') !== -1){
anims = settings.effect.split(',');
currentEffect = anims[Math.floor(Math.random()*(anims.length))];
if(currentEffect === undefined) { currentEffect = 'fade'; }
}
// Custom transition as defined by "data-transition" attribute
if(vars.currentImage.attr('data-transition')){
currentEffect = vars.currentImage.attr('data-transition');
}
// Run effects
vars.running = true;
var timeBuff = 0,
i = 0,
slices = '',
firstSlice = '',
totalBoxes = '',
boxes = '';
if(currentEffect === 'sliceDown' || currentEffect === 'sliceDownRight' || currentEffect === 'sliceDownLeft'){
createSlices(slider, settings, vars);
timeBuff = 0;
i = 0;
slices = $('.nivo-slice', slider);
if(currentEffect === 'sliceDownLeft') { slices = $('.nivo-slice', slider)._reverse(); }
slices.each(function(){
var slice = $(this);
slice.css({ 'top': '0px' });
if(i === settings.slices-1){
setTimeout(function(){
slice.animate({opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
slice.animate({opacity:'1.0' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
i++;
});
} else if(currentEffect === 'sliceUp' || currentEffect === 'sliceUpRight' || currentEffect === 'sliceUpLeft'){
createSlices(slider, settings, vars);
timeBuff = 0;
i = 0;
slices = $('.nivo-slice', slider);
if(currentEffect === 'sliceUpLeft') { slices = $('.nivo-slice', slider)._reverse(); }
slices.each(function(){
var slice = $(this);
slice.css({ 'bottom': '0px' });
if(i === settings.slices-1){
setTimeout(function(){
slice.animate({opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
slice.animate({opacity:'1.0' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
i++;
});
} else if(currentEffect === 'sliceUpDown' || currentEffect === 'sliceUpDownRight' || currentEffect === 'sliceUpDownLeft'){
createSlices(slider, settings, vars);
timeBuff = 0;
i = 0;
var v = 0;
slices = $('.nivo-slice', slider);
if(currentEffect === 'sliceUpDownLeft') { slices = $('.nivo-slice', slider)._reverse(); }
slices.each(function(){
var slice = $(this);
if(i === 0){
slice.css('top','0px');
i++;
} else {
slice.css('bottom','0px');
i = 0;
}
if(v === settings.slices-1){
setTimeout(function(){
slice.animate({opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
slice.animate({opacity:'1.0' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
v++;
});
} else if(currentEffect === 'fold'){
createSlices(slider, settings, vars);
timeBuff = 0;
i = 0;
$('.nivo-slice', slider).each(function(){
var slice = $(this);
var origWidth = slice.width();
slice.css({ top:'0px', width:'0px' });
if(i === settings.slices-1){
setTimeout(function(){
slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
i++;
});
} else if(currentEffect === 'fade'){
createSlices(slider, settings, vars);
firstSlice = $('.nivo-slice:first', slider);
firstSlice.css({
'width': slider.width() + 'px'
});
firstSlice.animate({ opacity:'1.0' }, (settings.animSpeed*2), '', function(){ slider.trigger('nivo:animFinished'); });
} else if(currentEffect === 'slideInRight'){
createSlices(slider, settings, vars);
firstSlice = $('.nivo-slice:first', slider);
firstSlice.css({
'width': '0px',
'opacity': '1'
});
firstSlice.animate({ width: slider.width() + 'px' }, (settings.animSpeed*2), '', function(){ slider.trigger('nivo:animFinished'); });
} else if(currentEffect === 'slideInLeft'){
createSlices(slider, settings, vars);
firstSlice = $('.nivo-slice:first', slider);
firstSlice.css({
'width': '0px',
'opacity': '1',
'left': '',
'right': '0px'
});
firstSlice.animate({ width: slider.width() + 'px' }, (settings.animSpeed*2), '', function(){
// Reset positioning
firstSlice.css({
'left': '0px',
'right': ''
});
slider.trigger('nivo:animFinished');
});
} else if(currentEffect === 'boxRandom'){
createBoxes(slider, settings, vars);
totalBoxes = settings.boxCols * settings.boxRows;
i = 0;
timeBuff = 0;
boxes = shuffle($('.nivo-box', slider));
boxes.each(function(){
var box = $(this);
if(i === totalBoxes-1){
setTimeout(function(){
box.animate({ opacity:'1' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
box.animate({ opacity:'1' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 20;
i++;
});
} else if(currentEffect === 'boxRain' || currentEffect === 'boxRainReverse' || currentEffect === 'boxRainGrow' || currentEffect === 'boxRainGrowReverse'){
createBoxes(slider, settings, vars);
totalBoxes = settings.boxCols * settings.boxRows;
i = 0;
timeBuff = 0;
// Split boxes into 2D array
var rowIndex = 0;
var colIndex = 0;
var box2Darr = [];
box2Darr[rowIndex] = [];
boxes = $('.nivo-box', slider);
if(currentEffect === 'boxRainReverse' || currentEffect === 'boxRainGrowReverse'){
boxes = $('.nivo-box', slider)._reverse();
}
boxes.each(function(){
box2Darr[rowIndex][colIndex] = $(this);
colIndex++;
if(colIndex === settings.boxCols){
rowIndex++;
colIndex = 0;
box2Darr[rowIndex] = [];
}
});
// Run animation
for(var cols = 0; cols < (settings.boxCols * 2); cols++){
var prevCol = cols;
for(var rows = 0; rows < settings.boxRows; rows++){
if(prevCol >= 0 && prevCol < settings.boxCols){
/* Due to some weird JS bug with loop vars
being used in setTimeout, this is wrapped
with an anonymous function call */
(function(row, col, time, i, totalBoxes) {
var box = $(box2Darr[row][col]);
var w = box.width();
var h = box.height();
if(currentEffect === 'boxRainGrow' || currentEffect === 'boxRainGrowReverse'){
box.width(0).height(0);
}
if(i === totalBoxes-1){
setTimeout(function(){
box.animate({ opacity:'1', width:w, height:h }, settings.animSpeed/1.3, '', function(){ slider.trigger('nivo:animFinished'); });
}, (100 + time));
} else {
setTimeout(function(){
box.animate({ opacity:'1', width:w, height:h }, settings.animSpeed/1.3);
}, (100 + time));
}
})(rows, prevCol, timeBuff, i, totalBoxes);
i++;
}
prevCol--;
}
timeBuff += 100;
}
}
};
// Shuffle an array
var shuffle = function(arr){
for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i, 10), x = arr[--i], arr[i] = arr[j], arr[j] = x);
return arr;
};
// For debugging
var trace = function(msg){
if(this.console && typeof console.log !== 'undefined') { console.log(msg); }
};
// Start / Stop
this.stop = function(){
if(!$(element).data('nivo:vars').stop){
$(element).data('nivo:vars').stop = true;
trace('Stop Slider');
}
};
this.start = function(){
if($(element).data('nivo:vars').stop){
$(element).data('nivo:vars').stop = false;
trace('Start Slider');
}
};
// Trigger the afterLoad callback
settings.afterLoad.call(this);
return this;
};
$.fn.nivoSlider = function(options) {
return this.each(function(key, value){
var element = $(this);
// Return early if this element already has a plugin instance
if (element.data('nivoslider')) { return element.data('nivoslider'); }
// Pass options to plugin constructor
var nivoslider = new NivoSlider(this, options);
// Store plugin object in this element's data
element.data('nivoslider', nivoslider);
});
};
//Default settings
$.fn.nivoSlider.defaults = {
effect: 'random',
slices: 15,
boxCols: 8,
boxRows: 4,
animSpeed: 500,
pauseTime: 3000,
startSlide: 0,
directionNav: true,
directionNavHide: true,
controlNav: true,
controlNavThumbs: false,
pauseOnHover: true,
manualAdvance: false,
prevText: 'Prev',
nextText: 'Next',
randomStart: false,
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){},
lastSlide: function(){},
afterLoad: function(){}
};
$.fn._reverse = [].reverse;
})(jQuery);
SQL DATABASE SCRIPT :
USE [master]
GO
/****** Object: Database [NivoSliderDB] Script Date: 12/26/2014 1:34:28 AM ******/
CREATE DATABASE [NivoSliderDB] ON PRIMARY
( NAME = N'NivoSliderDB', FILENAME = N'C:\Program Files (x86)\Microsoft SQL Server\MSSQL10_50.MSSQLSERVER\MSSQL\DATA\NivoSliderDB.mdf' , SIZE = 3072KB , MAXSIZE = UNLIMITED, FILEGROWTH = 1024KB )
LOG ON
( NAME = N'NivoSliderDB_log', FILENAME = N'C:\Program Files (x86)\Microsoft SQL Server\MSSQL10_50.MSSQLSERVER\MSSQL\DATA\NivoSliderDB_log.ldf' , SIZE = 1024KB , MAXSIZE = 2048GB , FILEGROWTH = 10%)
GO
ALTER DATABASE [NivoSliderDB] SET COMPATIBILITY_LEVEL = 100
GO
IF (1 = FULLTEXTSERVICEPROPERTY('IsFullTextInstalled'))
begin
EXEC [NivoSliderDB].[dbo].[sp_fulltext_database] @action = 'enable'
end
GO
ALTER DATABASE [NivoSliderDB] SET ANSI_NULL_DEFAULT OFF
GO
ALTER DATABASE [NivoSliderDB] SET ANSI_NULLS OFF
GO
ALTER DATABASE [NivoSliderDB] SET ANSI_PADDING OFF
GO
ALTER DATABASE [NivoSliderDB] SET ANSI_WARNINGS OFF
GO
ALTER DATABASE [NivoSliderDB] SET ARITHABORT OFF
GO
ALTER DATABASE [NivoSliderDB] SET AUTO_CLOSE OFF
GO
ALTER DATABASE [NivoSliderDB] SET AUTO_CREATE_STATISTICS ON
GO
ALTER DATABASE [NivoSliderDB] SET AUTO_SHRINK OFF
GO
ALTER DATABASE [NivoSliderDB] SET AUTO_UPDATE_STATISTICS ON
GO
ALTER DATABASE [NivoSliderDB] SET CURSOR_CLOSE_ON_COMMIT OFF
GO
ALTER DATABASE [NivoSliderDB] SET CURSOR_DEFAULT GLOBAL
GO
ALTER DATABASE [NivoSliderDB] SET CONCAT_NULL_YIELDS_NULL OFF
GO
ALTER DATABASE [NivoSliderDB] SET NUMERIC_ROUNDABORT OFF
GO
ALTER DATABASE [NivoSliderDB] SET QUOTED_IDENTIFIER OFF
GO
ALTER DATABASE [NivoSliderDB] SET RECURSIVE_TRIGGERS OFF
GO
ALTER DATABASE [NivoSliderDB] SET DISABLE_BROKER
GO
ALTER DATABASE [NivoSliderDB] SET AUTO_UPDATE_STATISTICS_ASYNC OFF
GO
ALTER DATABASE [NivoSliderDB] SET DATE_CORRELATION_OPTIMIZATION OFF
GO
ALTER DATABASE [NivoSliderDB] SET TRUSTWORTHY OFF
GO
ALTER DATABASE [NivoSliderDB] SET ALLOW_SNAPSHOT_ISOLATION OFF
GO
ALTER DATABASE [NivoSliderDB] SET PARAMETERIZATION SIMPLE
GO
ALTER DATABASE [NivoSliderDB] SET READ_COMMITTED_SNAPSHOT OFF
GO
ALTER DATABASE [NivoSliderDB] SET HONOR_BROKER_PRIORITY OFF
GO
ALTER DATABASE [NivoSliderDB] SET RECOVERY SIMPLE
GO
ALTER DATABASE [NivoSliderDB] SET MULTI_USER
GO
ALTER DATABASE [NivoSliderDB] SET PAGE_VERIFY CHECKSUM
GO
ALTER DATABASE [NivoSliderDB] SET DB_CHAINING OFF
GO
USE [NivoSliderDB]
GO
/****** Object: StoredProcedure [dbo].[ShowNewImage] Script Date: 12/26/2014 1:34:28 AM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE PROCEDURE [dbo].[ShowNewImage]
AS
-- Page Load Query STARTS HERE
SELECT ID FROM [dbo].[myImages] WHERE ID IN (SELECT dbo.temp_img.ImgID
FROM dbo.myImages INNER JOIN dbo.temp_img ON dbo.myImages.ID = dbo.temp_img.ImgID WHERE isUsed = 0)
UNION ALL
SELECT ID FROM [dbo].[myImages] WHERE ID IN (SELECT dbo.temp_img.ImgID
FROM dbo.myImages INNER JOIN dbo.temp_img ON dbo.myImages.ID = dbo.temp_img.ImgID WHERE isUsed = 1)
DECLARE @NotUsed int, @Used int
SET @NotUsed = (SELECT Count(*) AS NOTUSED FROM dbo.temp_img WHERE isUsed = 0) -- First Refresh = 3 , -- First Refresh = 2 , -- First Refresh = 1
SET @Used = (SELECT Count(*) AS USED FROM dbo.temp_img WHERE isUsed = 1) -- First Refresh pe = 1 , -- First Refresh = 2 , -- First Refresh = 3
IF @NotUsed >= @Used -- 3 >= 1 ; 2 >= 2 ; 1 >= 3
BEGIN
UPDATE dbo.temp_img SET isUsed = 1 WHERE ImgID =
(SELECT TOP 1 ImgID FROM [dbo].[temp_img] WHERE isUsed = 0 )
END
IF @NotUsed < @Used
BEGIN
UPDATE dbo.temp_img SET isUsed = 1 WHERE ImgID =
(SELECT TOP 1 ImgID FROM [dbo].[temp_img] WHERE isUsed = 0 )
END
IF @NotUsed = 0
BEGIN
UPDATE dbo.temp_img SET isUsed = 0 ;
END
-- Page Load Query ENDS HERE
GO
/****** Object: Table [dbo].[myImages] Script Date: 12/26/2014 1:34:28 AM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[myImages](
[Seq] [int] IDENTITY(1,1) NOT NULL,
[ID] [int] NULL,
[URL] [nvarchar](max) NULL,
[targetURL] [nvarchar](50) NULL,
[Name] [nvarchar](500) NULL,
CONSTRAINT [PK_myImages] PRIMARY KEY CLUSTERED
(
[Seq] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO
/****** Object: Table [dbo].[temp_img] Script Date: 12/26/2014 1:34:28 AM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[temp_img](
[Seq] [int] IDENTITY(1,1) NOT NULL,
[ImgID] [int] NULL,
[isUsed] [bit] NULL,
CONSTRAINT [PK_temp_img] PRIMARY KEY CLUSTERED
(
[Seq] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
USE [master]
GO
ALTER DATABASE [NivoSliderDB] SET READ_WRITE
GO
And Working Proof :
