Develop Reference

Nivo-Slider plugin not working

The plugin doesnt seem to be working for me on this project im working on, whenever i load the page to view the slider the transitions aren't working, i've looked at the file paths for the references to the javascript files and css files and they are correct.
I'll post the code below if anyone could help that'd be great!
Jquery:
$(window).load(function () {
$('#slider').nivoSlider({
effect: 'boxRain', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: false, // Next & Prev navigation
controlNav: false, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function () { }, // Triggers before a slide transition
afterChange: function () { }, // Triggers after a slide transition
slideshowEnd: function () { }, // Triggers after all slides have been shown
lastSlide: function () { }, // Triggers when last slide is shown
afterLoad: function () { } // Triggers when slider has loaded
});
});
File Refs:
<script src="assets/Nivo-Slider-master/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script src="assets/Nivo-Slider-master/nivoslider.jquery.json"></script>
<link rel="stylesheet" href="/assets/Nivo-Slider-master/nivo-slider.css" type="text/css" media="screen" />
Example Slider code of mine:
<div id="slider" class="nivoSlider" >
<uc1:ImageCarouselll runat="server" ID="ctrl_Images" />
</div>
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" style="display: none;">
<div class="slides" style="width: 138240px;"></div>
<h3 class="title">Image from Unsplash</h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
</asp:Content>
The control code is as follows:
<asp:Repeater ID="rptPhotos" runat="server">
<ItemTemplate>
<a href="/images/<%# Eval("ImageURL").ToString() %>" data-gallery="">
<img class="TheImage" src="/images/<%# Eval("ImageURL").ToString() %>" alt="test" /></a>
</ItemTemplate>
<AlternatingItemTemplate>
<a href="/images/<%# Eval("ImageURL").ToString() %>" data-gallery="">
<img class="TheImage" src="/images/<%# Eval("ImageURL").ToString() %>" alt="test" /></a>
</AlternatingItemTemplate>
</asp:Repeater>
Any help is greatly appreciated! Thanks!

Slideshow with next/back arrows, caption... but unable to add a counter

I'm making a slideshow using JQuery Cycle with arrows (done), caption (done), but I can't make the counter. I'm basing my slideshow on this example:
http://www.morganstudio.co.uk/ (in this one the counter works but there is no slideshow, which I have)
HTML:
<div id=“slideshow”>
<img class="slide" src="images/one.jpg" alt=“one” name="http://pageone.com"/>
<img class="slide" src="images/two.jpg" alt=“two” name="http://pagetwo.com"/>
<img class="slide" src="images/three.jpg" alt=“three” name="http://pagethree.com"/>
</div>
<div id=“navigator”>
<a id="prev" href=""><div id="navPhotos"></div></a>
<a id="next" href=""><div id="navPhotos2"></div></a>
</div>
<div id="description"></div>
<div id=“counter”></div>
JAVASCRIPT:
$(document).ready(function() {
$(‘#slideshow’).cycle({
fx:'fade',
speed: 300,
timeout:4000,
next: '#next',
prev: '#prev',
before: onBefore,
});
function onBefore() {
$('#description p').fadeIn('1000');
$('#description').html('<p>' + '' + this.alt + '' + '</p>');
}
});

Try to change your JavaScript to the following, where i added another callback.
(disclaimer, not tested).
$(document).ready(function() {
$(‘#slideshow’).cycle({
fx:'fade',
speed: 300,
timeout:4000,
next: '#next',
prev: '#prev',
before: onBefore,
after: onAfter
});
function onBefore() {
$('#description p').fadeIn('1000');
$('#description').html('<p>' + '' + this.alt + '' + '</p>');
}
};
function onAfter(curr,next,opts) {
var caption = 'Image ' + (opts.currSlide + 1) + ' of ' + opts.slideCount;
$('#caption').html(caption);
}

how to make the div autohide when click other button

hai im working with show/hide slider with div..evrything is working fine with my coding..
but i want my div or my content will auto hide when i click another button(image in my coding)..
i hope that anybody can help me with this..thanks in advance..
this is my html
<div id="slidingDiv">
<a href="#" class="show_hide" rel="#slidingDiv11">
<img src="../img/choose/mens.png">
</a>
<a href="#" class="show_hide" rel="#slidingDiv12">
<img src="../img/choose/womens.png">
</a>
<div id="slidingDiv11">
<img src="../img/choose/clothings.png"><br><br>
<img src="../img/choose/shoes.png"><br><br>
<img src="../img/choose/bags.png"><br><br>
<img src="../img/choose/accessories.png">
</div>
<div id="slidingDiv12">
<img src="../img/choose/clothings.png"><br><br>
<img src="../img/choose/shoes.png"><br><br>
<img src="../img/choose/bags.png"><br><br>
<img src="../img/choose/accessories.png">
</div>
</div>
<div id="slidingDiv1">
<a href="#" class="show_hide" rel="#slidingDiv16">
<img src="../img/choose/book.png">
<a>
<a href="#" class="show_hide" rel="#slidingDiv17">
<img src="../img/choose/textbooks.png">
</a>
<div id="slidingDiv16">
<img src="../img/choose/books1.png">
<img src="../img/choose/books1.png">
<img src="../img/choose/books1.png">
</div>
<div id="slidingDiv17">
<img src="../img/choose/textbooks1.png">
<img src="../img/choose/textbooks1.png">
<img src="../img/choose/textbooks1.png">
</div>
</div>
this is my css
#slidingDiv, #slidingDiv1, #slidingDiv2, #slidingDiv3, #slidingDiv4, #slidingDiv5, #slidingDiv6, #slidingDiv7, #slidingDiv8, #slidingDiv9, #slidingDiv10, #slidingDiv11, #slidingDiv12, #slidingDiv13, #slidingDiv14, #slidingDiv15, #slidingDiv16, #slidingDiv17 {
height:300px;
padding:20px;
margin-top:10px;
border-bottom:5px;
display:none;
}
this is my js
$(document).ready(function () {
$('.show_hide').showHide({
speed: 1000, // speed you want the toggle to happen
easing: '', // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
changeText: 0, // if you dont want the button text to change, set this to 0
showText: 'View', // the button text to show when a div is closed
hideText: 'Close' // the button text to show when a div is open
});
});
(function ($) {
$.fn.showHide = function (options) {
//default vars for the plugin
var defaults = {
speed: 1000,
easing: '',
changeText: 0,
showText: 'Show',
hideText: 'Hide'
};
var options = $.extend(defaults, options);
$(this).click(function () {
$('.toggleDiv').slideUp(options.speed, options.easing);
// this var stores which button you've clicked
var toggleClick = $(this);
// this reads the rel attribute of the button to determine which div id to toggle
var toggleDiv = $(this).attr('rel');
// here we toggle show/hide the correct div at the right speed and using which easing effect
$(toggleDiv).slideToggle(options.speed, options.easing, function () {
// this only fires once the animation is completed
if (options.changeText == 1) {
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
}
});
return false;
});
};
})(jQuery);

With jQuery,
$("your_other_button").on('click', function() {
$("your_div_to_hide").hide();
});

Using Jquery
$("other_button").on('click', function() {
$("div_to_hide").toggle();
});

Since you want to hide the div when you click on a button, you should make it the document when clicked to hide. Try something like this.
$(".hide_show").click(function(event) { event.stopPropagation(); $(this).fadeToggle(1000);}); $(document).click(function() { $(".hide_show).fadeOut(1000); });
use event.stopPropagation(); to stop the document event to trigger .hide_show class. May be that will help you.

why plugin is not initializing dynamically

$("#" + IdToInitialize).cycle("destroy").cycle({
fx: $("#cyclescroll").val(),
easing: $("#cyclebounce").val(),
speed: 1000,
timeout: 2000
});
Whats the problem here , why cycle plugin is not initializing again with new settings?

Try this way:-
$("#" + IdToInitialize).cycle("destroy");
$("#" + IdToInitialize).cycle({
fx: $("#cyclescroll").val(),
easing: $("#cyclebounce").val(),
speed: 1000,
timeout: 2000
});
Make sure
$("#cyclescroll").val() should return the values as fade, scrollUp, shuffle
$("#cyclebounce").val() should return the values as easeInOutBack, easeOutBack
Refer Cycle Options

One of the values you are using to reinitialize your plugin is incorrect. Eitehr IdToInitialize, fx, or easing are not correct.
http://jsfiddle.net/ny2Tj/3/
The following works as expected when clicking on the button:
<div id="sliders">
<div id="slideshow">
<img src="http://scienceblogs.com/startswithabang/upload/2012/04/why_should_there_be_dark_matte/AS17-148-22727_lrg-thumb-500x500-74032.jpeg" />
<img src="http://weblogs.marylandweather.com/4526619322_1912218db8.jpg" />
<img src="http://www.silverstar-academy.com/Blog/wp-content/uploads/2012/03/03-14-12N00184967.jpg" />
<img src="http://cdn.the2012scenario.com/wp-content/uploads/2011/11/sunspot-500x500.jpg" />
</div>
<div id="pager"></div>
</div>
<button id="reinit">Reinit</button>
JS:
$('#slideshow').cycle({fx:'scrollHorz', pager: '#pager'});
$('#reinit').click(function() {
$('#slideshow').cycle('destroy').cycle({fx:'scrollVert'}); // change effect remove pager
});

Jquery Image click not working in IE

HI
In my project I have a Popup image .
When the user clicks on the left part of the image it will redirect the user
to page1.aspx. When the user clicks on the right part of the image
it will redirect the user to page2.aspx. I used JQuery for this and it works
fine in Fire fox. But it doesn't work in IE.
What could be the reason,. Any help will be appreciated.
Thanks
Here is the code
<script type="text/javascript">
swfobject.registerObject("inhalerVideo", "9.0.0", "expressInstall.swf");
/* jQuery Nonsense */
$(document).ready(function()
{
//!\: Slider nav thingy.
$("#link_one").click(function()
{
var aWidth = $(this).width();
if($(this).hasClass("closed"))
{
$(this).removeClass("closed").addClass("open").animate({width: aWidth + 205 + "px"}, {queue: false, duration: "fast"});
if($("#link_two").hasClass("open"))
{
var bWidth = $("#link_two").width();
$("#link_two").removeClass("open").addClass("closed").animate({width: bWidth - 205 + "px"}, {queue: false, duration: "fast"});
$("#link_two a").hide();
}
$("a", this).show();
}
else
{
$("a", this).hide();
$(this).addClass("closed").removeClass("open").animate({width: aWidth - 205 + "px"}, {queue: false, duration: "fast"});
}
});
$("#link_two").click(function()
{
var aWidth = $(this).width();
if($(this).hasClass("closed"))
{
$(this).removeClass("closed").addClass("open").animate({width: aWidth + 205 + "px"}, {queue: false, duration: "fast"});
if($("#link_one").hasClass("open"))
{
var bWidth = $("#link_one").width();
$("#link_one").removeClass("open").addClass("closed").animate({width: bWidth - 205 + "px"}, {queue: false, duration: "fast"});
$("#link_one a").hide();
}
$("a", this).show();
}
else
{
$("a", this).hide();
$(this).addClass("closed").removeClass("open").animate({width: aWidth - 205 + "px"}, {queue: false, duration: "fast"});
}
});
//!\: This could all be achieved with CSS.
$(".subnavonfirst").prev(".navoff").css("background-image", "url('images/nav_on_bg.gif')").children("a").css("color", "#fff");
$(".subnavon").prev(".subnavofffirst").prev(".navoff").css("background-image", "url('images/nav_on_bg.gif')").children("a").css("color", "#fff");
$(".subnavonlast").prev(".subnavoff").prev(".subnavofffirst").prev(".navoff").css("background-image", "url('images/nav_on_bg.gif')").children("a").css("color", "#fff");
$(".subnavonlast").prev(".subnavofffirst").prev(".navoff").css("background-image", "url('images/nav_on_bg.gif')").children("a").css("color", "#fff");
});
</script>
<!-- Main Content Container -->
<div id="mainContentContainer">
<!-- Top Link Slider -->
<div id="headerContainer" class="printHide">
<div id="headerLinkContainer">
<div id="banner_container">
<div id="link_one" class="sub closed">
<img class="major" src="images/patient_info.gif" border="0" />
<img class="minor" src="images/sub_nav.gif" border="0" />
<!-- -->
<!-- -->
</div>
<div id="link_two" class="sub closed">
<img class="major" src="images/prescribe_info.gif" border="0" />
<img class="minor" src="images/sub_nav.gif" border="0" />
<!-- -->
<!-- -->
</div>
<div id="link_three" class="open"><img src="images/isi.gif" border="0" /></div>
</div>
</div>
</div>

Have you tried using an imagemap? That way it's supported by almost all browsers, including IE.
You can also capture the click() event of the <area> tag if you wish.
EDIT: Upon looking at your site, perhaps you could bind the expanding div functionality to the image .major rather than to the .sub div.
It looks like the .sub div is intercepting the click event on IE, but standards-compliant browsers understand that the .minor picture should be rendered 'above' the .sub div.