Develop Reference

Jquery image gallery next/prev image buttons

<div class="slider">
<ul id="slider1">
<li>
<img src="images/contimg.jpg" width="500" height="400" border="0">
</li>
<li>
<img src="images/contimgtwo.jpg" width="500" height="334" border="0">
</li>
</ul>
</div>
<div id="buttons">
<button>click</button>
</div>
Javascript
$(document).ready(function () {
$('#slider1').cycle({
fx: 'fade',
speed: 'slow',
timeout: 5000
});
});
$(function () {
$("button").click(function () {
$("#slider1").length + 1;
});
});
I'm using a cycle plugin to make the images from the fade every 5 secs. I wanted to add next/prev image buttons. The first piece of js is the plugin which automates the 'slideshow' and the second bit is the js for the buttons to change images next/prev.

may this help you
<script type="text/javascript">
$(document).ready(function () {
$('#slider1').cycle({
fx: 'fade',
speed: 'slow',
timeout: 5000
prev: '#prev',
next: '#next',
pager: '#nav',
pagerAnchorBuilder: pagerFactory
});
function pagerFactory(idx, slide) {
var s = idx > 2 ? ' style="display:none"' : '';
return '<li'+s+'>'+(idx+1)+'</li>';
};
});
</script>
just add html to your page
<span id="prev">Prev</span>
<span id="next">Next</span>
<div id='nav'></div>

// doc ready
$(function() {
$('#slider').cycle({
fx: 'fade',
speed: 'slow',
timeout: '5000',
next: '#next-arrow', // id name next
prev: '#prev-arrow' // id name prev
});
$(window).load(function(
// your div next name
$('#next-arrow').append('<img src="http://iconify.it/wp-content/icons-large-alt/arrow-right.png" style="width:25px;"/>')
// your div prev name
$('#prev-arrow').append('<img src="http://iconify.it/wp-content/icons-large-alt/arrow-right.png" style="width:25px; -webkit-transform:rotate(180deg);"/>')
});
});
Hope is help you guy.

UPDATE: JavaScript code is displaying as child node

SOLUTION: I figured it out. I used jQuery instead of JavaScript with a little help from zohodiscussions.com.
Ajax Google plugin: http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
**js. file:**
function form_input_classes() {
jQuery('input[type="text"]').addClass('text');
jQuery('input[type="password"]').addClass('text');
jQuery('input[type="checkbox"]').addClass('checkbox');
jQuery('input[type="radio"]').addClass('radiobutton');
jQuery('input[type="submit"]').addClass('submit');
jQuery('input[type="image"]').addClass('buttonImage');
}
function form_labelize() { jQuery(".labelize input:text").clearingInput(); }
var version = jQuery.browser.version;
if (version instanceof Object) { version = version.number(); }
function loadXMLDoc(XMLname) {
return jQuery.ajax({ async: false, url: XMLname }).responseXML;
}
xmlDoc = loadXMLDoc("demo.xml");
var M = xmlDoc.getElementsByTagName("rotatingImages");
jQuery(function () {
jQuery('script').remove()
form_input_classes();
form_labelize();
var pauseClicked = function () {
jQuery('#cycle').cycle('pause');
jQuery('#play').attr("style", "display:block");
jQuery('#pause').attr("style", "display:none");
jQuery('#pause').removeClass("active");
return false;
};
var playClicked = function () {
jQuery('#cycle').cycle('resume');
jQuery('#pause').attr("style", "display:block");
jQuery('#play').attr("style", "display:none");
jQuery('#pause').addClass("active");
return false;
};
jQuery('#play').attr("style", "display:none");
jQuery('#pause').attr("style", "display:block");
jQuery('#pause').click(pauseClicked);
jQuery('#play').click(playClicked);
jQuery("#slideNavigation a").focus(function () {
jQuery(this).blur();
});
jQuery('#cycle').cycle({
fx: 'fade',
speed: 1000,
timeout: 5000,
prev: '#prev',
next: '#next',
pager: '#hero-nav ul ',
pagerAnchorBuilder: function (idx, slide) {
return '#hero-nav li:eq(' + idx + ') a.page';
}
});
})
**HTML references:**
<div id="content" class="clearfix home">
<div id="hero">
<div id='rotator'>
<div id='cycle' class='clearfix'>
<script type="text/javascript">
jQuery(M).find('image').each(function (i, img) {
document.write("<img src='" + jQuery(img).text() + "' />");
})
</script>
</div>
</div>
<!--end-rotating-images-->
<div id="hero-cycle" class="clearfix">
<div id="hero-nav">
<ul>
<script type="text/javascript">
jQuery(M).each(function (i, item){
document.write("<li class='hero-text'>");
document.write("<div class='hero-info clearfix'>");
document.write("<a href='" +
jQuery(item).find('filePath').text() + "' target='_blank'>" +
jQuery(item).find('description').text()
+ "</a>");
document.write("</div>")
document.write("<a class='page' href='#'></a></li>")
})
</script>
</ul>
<div id="annc_controls">
<a href="#" id="play">
<img src="images/blue_play.gif" alt="Play" border="0" style="vertical-align: text-bottom"/></a>
<a href="#" id="pause">
<img src="images/blue_pause.gif" alt="Stop" border="0" style="vertical-align: text-bottom"/>
</a>
</div>
<!--<div id="slideNavigation"></div>-->
</div>
<!-- /#hero-nav -->
</div>
<!-- /#hero-cycle -->
</div>
<!-- /#hero -->
</div>
I updated my code and the rotating images are inline with the description. The only problem I have is the javascript loads first in place of a 1st image. There are only 3 images and the code displays firs then image #1 and so on. Is this a browser issue with ActiveXObject and IE 9? I'm having a similar issue with FireFox latest version. Nothing shows in this browser. Any help? –
.html file:
<head><script type="text/javascript">
<!--
function loadXMLDoc(XMLname)
//
{
var xmlDoc;
if (window.XMLHttpRequest) {
xmlDoc = new window.XMLHttpRequest();
xmlDoc.open("GET", XMLname, false);
xmlDoc.send("");
return xmlDoc.responseXML;
}
// IE 5 and IE 6
else if (ActiveXObject("Microsoft.XMLDOM")) {
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load(XMLname);
return xmlDoc;
}
alert("Error loading document!");
return null;
}
xmlDoc = loadXMLDoc("demo.xml");
var M = xmlDoc.getElementsByTagName("rotatingImages");
//-->
</script>
</head>
<div id="hero">
<div id='rotator'>
<div id='cycle' class='clearfix'>
<script type="text/javascript">
for (i = 0; i < M.length; i++) {
document.write("<img src='" + xmlDoc.getElementsByTagName("image")[i].childNodes[0].nodeValue + "' />");
}
</script>
</div>
</div>
</div>
<!--end-rotating-images-->
<div id="hero-cycle" class="clearfix">
<div id="hero-nav">
<ul>
<script type="text/javascript">
for (i = 0; i < x.length; i++) { // Start 3 Rotating Images
document.write("<li class='hero-text'>");
document.write("<div class='hero-info clearfix'>");
var linkValue = x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue;
var linkValue = x[i].getElementsByTagName("filePath")[0].childNodes[0].nodeValue;
document.write("<a href='" + linkValue + "' target='_blank'>");
linkValue = x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue;
document.write(linkValue);
document.write("</a>");
// End description for Rotating Images
document.write("</div>");
document.write("<a class='page' href='#'></a></li>");
}
</script>
</ul>
<div id="annc_controls">
<a href="#" id="play">
<img src="images/blue_play.gif" alt="Play" border="0" style="vertical-align: text-bottom" /></a>
<a href="#" id="pause">
<img src="images/blue_pause.gif" alt="Stop" border="0" style="vertical-align: text-bottom" />
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
XML file:
`<?xml version="1.0" encoding="utf-8"?>
<homepage>
<rotatingImages>
<item>
<image>manage/newImages/soldier-sunset.jpg</image>
<description>My Test 1</description>
<filePath>http://www.sigar.mil/newsroom/spotlight/12/2012-sep-05-sopko-visits-afghanistan.html </filePath>
</item>
<item>
<image>manage/newImages/2012-04-03-jet.jpg</image>
<description>My Test3</description>
<filePath>http://www.sigar.mil/newsroom/spotlight/12/2012-sep-05-sopko-visits-afghanistan.html </filePath>
</item>
<item>
<image>manage/newImages/sigar-brochre.jpg</image>
<description>My Test2 </description>
<filePath>http://www.sigar.mil/newsroom/spotlight/12/2012-sep-05-sopko-visits-afghanistan.html </filePath>
</item>
</rotatingImages>
</homepage>`

Since rotator and cycle elements are added dynamically, they don't exist when the page loads and the jQuery function runs. You need to delegate with .on() so that the handlers will be added when the elements are. For information on .on, see http://api.jquery.com/on/ and scroll down to the section on Direct and delegated events.
Another problem with your page is that you use the same ID each time through the for-loop. IDs have to be unique. The repeated IDs are coming from this code:
for (i = 0; i < x.length; i++) {
document.write("<div id='rotator'><div id='cycle' class='clearfix'><div class='entry clearfix'>");
Each time through the loop it adds DIVs with IDs 'rotator', 'cycle', 'hero-cycle', and 'hero-nav'.

Put the jQuery('#cycle').cycle({ … }); code into the jQuery(document).ready function.

**SOLUTION:** I figured it out. I used jQuery instead of JavaScript with a little help from zohodiscussions.com.
Ajax Google plugin: http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
**js. file:**
function form_input_classes() {
jQuery('input[type="text"]').addClass('text');
jQuery('input[type="password"]').addClass('text');
jQuery('input[type="checkbox"]').addClass('checkbox');
jQuery('input[type="radio"]').addClass('radiobutton');
jQuery('input[type="submit"]').addClass('submit');
jQuery('input[type="image"]').addClass('buttonImage');
}
function form_labelize() { jQuery(".labelize input:text").clearingInput(); }
var version = jQuery.browser.version;
if (version instanceof Object) { version = version.number(); }
function loadXMLDoc(XMLname) {
return jQuery.ajax({ async: false, url: XMLname }).responseXML;
}
xmlDoc = loadXMLDoc("demo.xml");
var M = xmlDoc.getElementsByTagName("rotatingImages");
jQuery(function () {
jQuery('script').remove()
form_input_classes();
form_labelize();
var pauseClicked = function () {
jQuery('#cycle').cycle('pause');
jQuery('#play').attr("style", "display:block");
jQuery('#pause').attr("style", "display:none");
jQuery('#pause').removeClass("active");
return false;
};
var playClicked = function () {
jQuery('#cycle').cycle('resume');
jQuery('#pause').attr("style", "display:block");
jQuery('#play').attr("style", "display:none");
jQuery('#pause').addClass("active");
return false;
};
jQuery('#play').attr("style", "display:none");
jQuery('#pause').attr("style", "display:block");
jQuery('#pause').click(pauseClicked);
jQuery('#play').click(playClicked);
jQuery("#slideNavigation a").focus(function () {
jQuery(this).blur();
});
jQuery('#cycle').cycle({
fx: 'fade',
speed: 1000,
timeout: 5000,
prev: '#prev',
next: '#next',
pager: '#hero-nav ul ',
pagerAnchorBuilder: function (idx, slide) {
return '#hero-nav li:eq(' + idx + ') a.page';
}
});
})
**HTML references:**
<div id="content" class="clearfix home">
<div id="hero">
<div id='rotator'>
<div id='cycle' class='clearfix'>
<script type="text/javascript">
jQuery(M).find('image').each(function (i, img) {
document.write("<img src='" + jQuery(img).text() + "' />");
})
</script>
</div>
</div>
<!--end-rotating-images-->
<div id="hero-cycle" class="clearfix">
<div id="hero-nav">
<ul>
<script type="text/javascript">
jQuery(M).each(function (i, item){
document.write("<li class='hero-text'>");
document.write("<div class='hero-info clearfix'>");
document.write("<a href='" +
jQuery(item).find('filePath').text() + "' target='_blank'>" +
jQuery(item).find('description').text()
+ "</a>");
document.write("</div>")
document.write("<a class='page' href='#'></a></li>")
})
</script>
</ul>
<div id="annc_controls">
<a href="#" id="play">
<img src="images/blue_play.gif" alt="Play" border="0" style="vertical-align: text-bottom"/></a>
<a href="#" id="pause">
<img src="images/blue_pause.gif" alt="Stop" border="0" style="vertical-align: text-bottom"/>
</a>
</div>
<!--<div id="slideNavigation"></div>-->
</div>
<!-- /#hero-nav -->
</div>
<!-- /#hero-cycle -->
</div>
<!-- /#hero -->
</div>

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.

Jquery Cycle Plugin Question

I have successfully installed the Cycle plugin for Jquery and have my banners cycling the way I want them. My question is around building the anchors. I am trying to build something similar to http://www.bazaarvoice.com.
Seems like the anchors are being generated from the javascript but I could be wrong. Here is my html and javascript.
HTML
<div id="slideshow">
<ul class="pager">
<!-- will be populated with thumbs by JS -->
</ul>
<!-- each div is considered as a slide show -->
<div><img src="/images/banner1.png" />You can place text here too !</div>
<div><img src="/images/banner2.png" />and here</div>
<div><img src="/images/banner3.png" />and even here</div>
</div><!-- close #slideshow -->
<div id="tabs"></div>
Javascript
$("#slideshow").cycle({
fx: 'fade', // name of transition effect (or comma separated names, ex: fade,scrollUp,shuffle)
timeout: 5000, // milliseconds between slide transitions (0 to disable auto advance)
speed: 400, // speed of the transition (any valid fx speed value)
pager: "#tabs",// selector for element to use as pager container
pagerClick: null, // callback fn for pager clicks: function(zeroBasedSlideIndex, slideElement)
pagerEvent: 'hover',// name of event which drives the pager navigation
pagerAnchorBuilder: function(i, slide){// callback fn for building anchor links: function(index, DOMelement)
return '<li class="thumb" id="thumb-1"><img src="' + slide.src + '" height="30" width="40" /></a></li>';
},
before: function(){ // deselect all slides
$(".thumb").removeClass('selected');
},
after: function(foo, bar, opts){ // select current slide
$("#thumb-"+opts.currSlide).addClass('selected');
},
fit: 1, // force slides to fit container
pause: 1, // true to enable "pause on hover"
pauseOnPagerHover: 1, // stop slideshow when pagers are being hovered
autostop: 0, // true to end slideshow after X transitions (where X == slide count)
autostopCount: 0, // number of transitions (optionally used with autostop to define X)
slideExpr: "div", // all content of div#slider is a slide. but not the pager
fastOnEvent: 100, // force fast transitions when triggered manually (via pager or prev/next); value == time in ms
});
Seems like it would be in the pagerAnchorBuilder but not sure.

looks like you are missing the beginning anchor tag
pagerAnchorBuilder: function(i, slide){// callback fn for building anchor links: function(index, DOMelement)
return '<li class="thumb" id="thumb-1"><img src="' + slide.src + '" height="30" width="40" /></a></li>';
},
right between the <li> and the <img> it should be. seems you have the end tage there already though. the correct way should look something like this:
pagerAnchorBuilder: function(i, slide){// callback fn for building anchor links: function(index, DOMelement)
return '<li class="thumb" id="thumb-1"><img src="' + slide.src + '" height="30" width="40" /></li>';
},
if you want to change the link based on the ID of the slide, you may want something like this:
pagerAnchorBuilder: function(i, slide){// callback fn for building anchor links: function(index, DOMelement)
switch(slide.attr("id")){
case "one": return '<li class="thumb" id="thumb-1"><img src="' + slide.src + '" height="30" width="40" /></li>';
case "two": return '<li class="thumb" id="thumb-1"><img src="' + slide.src + '" height="30" width="40" /></li>';
case "three": return '<li class="thumb" id="thumb-1"><img src="' + slide.src + '" height="30" width="40" /></li>';
}
},