Develop Reference

Matching drag'n'drop elements

I am trying to understand the drag and drop mechanics in JS and HTML. I have used some code I have found and am trying to adapt it into something different. I want the cardPile to include pictures, with names such as "motherboard.jpg" etc, and match it to the cardSlots with similar names. How could I do that? I tried changing the numeric values in cardPile into strings, but it does not work with dropping.
Any advice? (Sorry, it is my first time on StackOverflow :') )
JS code:
var correctCards = 0;
$( init );
function init() {
// Hide the success message
$('#successMessage').hide();
$('#successMessage').css( {
left: '580px',
top: '250px',
width: 0,
height: 0
} );
// Reset the game
correctCards = 0;
$('#cardPile').html( '' );
$('#cardSlots').html( '' );
// Create the pile of shuffled cards
var numbers = [ 1, "a", "b", "c", "d", "e", "f", "g", "h", "i" ];
numbers.sort( function() { return Math.random() - .5 } );
for ( var i=0; i<10; i++ ) {
$('<div>' + numbers[i] + '</div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( {
containment: '#content',
stack: '#cardPile div',
cursor: 'move',
revert: true
} );
}
// Create the card slots
var words = [ 'Motherboard', 'RAM', 'GPU', 'CPU', 'I/O', 'Power supply', 'Oprical Drive', 'HDD', 'SSD', 'Expansion slots' ];
for ( var i=1; i<=10; i++ ) {
$('<div>' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( {
accept: '#cardPile div',
hoverClass: 'hovered',
drop: handleCardDrop
} );
}
}
function handleCardDrop( event, ui ) {
var slotNumber = $(this).data( 'number' );
var cardNumber = ui.draggable.data( 'number' );
// If the card was dropped to the correct slot,
// change the card colour, position it directly
// on top of the slot, and prevent it being dragged
// again
if ( slotNumber == cardNumber ) {
ui.draggable.addClass( 'correct' );
ui.draggable.draggable( 'disable' );
$(this).droppable( 'disable' );
ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
ui.draggable.draggable( 'option', 'revert', false );
correctCards++;
}
// If all the cards have been placed correctly then display a message
// and reset the cards for another go
if ( correctCards == 10 ) {
$('#successMessage').show();
$('#successMessage').animate( {
left: '380px',
top: '200px',
width: '400px',
height: '100px',
opacity: 1
} );
}
}

Make a slider responsive (jQuery)

I have a slider, I want to make them responsive the problem is the size of slider is into the jQuery file
sow how I can edit the code ?
code of jQuery
(function( window, $, undefined ) {
var $event = $.event, resizeTimeout;
$event.special.smartresize = {
setup: function() {
$(this).bind( "resize", $event.special.smartresize.handler );
},
teardown: function() {
$(this).unbind( "resize", $event.special.smartresize.handler );
},
handler: function( event, execAsap ) {
// Save the context
var context = this,
args = arguments;
// set correct event type
event.type = "smartresize";
if ( resizeTimeout ) { clearTimeout( resizeTimeout ); }
resizeTimeout = setTimeout(function() {
jQuery.event.handle.apply( context, args );
}, execAsap === "execAsap"? 0 : 100 );
}
};
$.fn.smartresize = function( fn ) {
return fn ? this.bind( "smartresize", fn ) : this.trigger( "smartresize", ["execAsap"] );
};
$.Slideshow = function( options, element ) {
this.$el = $( element );
/***** images ****/
// list of image items
this.$list = this.$el.find('ul.ei-slider-large');
// image items
this.$imgItems = this.$list.children('li');
// total number of items
this.itemsCount = this.$imgItems.length;
// images
this.$images = this.$imgItems.find('img:first');
/***** thumbs ****/
// thumbs wrapper
this.$sliderthumbs = this.$el.find('ul.ei-slider-thumbs').hide();
// slider elements
this.$sliderElems = this.$sliderthumbs.children('li');
// sliding div
this.$sliderElem = this.$sliderthumbs.children('li.ei-slider-element');
// thumbs
this.$thumbs = this.$sliderElems.not('.ei-slider-element');
// initialize slideshow
this._init( options );
};
$.Slideshow.defaults = {
// animation types:
// "sides" : new slides will slide in from left / right
// "center": new slides will appear in the center
animation : 'center', // sides || center
// if true the slider will automatically slide, and it will only stop if the user clicks on a thumb
autoplay : false,
// interval for the slideshow
slideshow_interval : 3000,
// speed for the sliding animation
speed : 800,
// easing for the sliding animation
easing : '',
// percentage of speed for the titles animation. Speed will be speed * titlesFactor
titlesFactor : 0.60,
// titles animation speed
titlespeed : 800,
// titles animation easing
titleeasing : '',
};
$.Slideshow.prototype = {
_init : function( options ) {
this.options = $.extend( true, {}, $.Slideshow.defaults, options );
// set the opacity of the title elements and the image items
this.$imgItems.css( 'opacity', 0 );
this.$imgItems.find('div.ei-title > *').css( 'opacity', 0 );
// index of current visible slider
this.current = 0;
var _self = this;
// preload images
// add loading status
this.$loading = $('<div class="ei-slider-loading">Loading</div>').prependTo( _self.$el );
$.when( this._preloadImages() ).done( function() {
// hide loading status
_self.$loading.hide();
// calculate size and position for each image
_self._setImagesSize();
// configure thumbs container
_self._initThumbs();
// show first
_self.$imgItems.eq( _self.current ).css({
'opacity' : 1,
'z-index' : 10
}).show().find('div.ei-title > *').css( 'opacity', 1 );
// if autoplay is true
if( _self.options.autoplay ) {
_self._startSlideshow();
}
// initialize the events
_self._initEvents();
});
},
_preloadImages : function() {
// preloads all the large images
var _self = this,
loaded = 0;
return $.Deferred(
function(dfd) {
_self.$images.each( function( i ) {
$('<img/>').load( function() {
if( ++loaded === _self.itemsCount ) {
dfd.resolve();
}
}).attr( 'src', $(this).attr('src') );
});
}
).promise();
},
_setImagesSize : function() {
// save ei-slider's width
this.elWidth = this.$el.width();
var _self = this;
this.$images.each( function( i ) {
var $img = $(this);
imgDim = _self._getImageDim( $img.attr('src') );
$img.css({
width : imgDim.width,
height : imgDim.height,
marginLeft : imgDim.left,
marginTop : imgDim.top
});
});
},
_getImageDim : function( src ) {
var $img = new Image();
$img.src = src;
var c_w = this.elWidth,
c_h = this.$el.height(),
r_w = c_h / c_w,
i_w = $img.width,
i_h = $img.height,
r_i = i_h / i_w,
new_w, new_h, new_left, new_top;
if( r_w > r_i ) {
new_h = c_h;
new_w = c_h / r_i;
}
else {
new_h = c_w * r_i;
new_w = c_w;
}
return {
width : new_w,
height : new_h,
left : ( c_w - new_w ) / 2,
top : ( c_h - new_h ) / 2
};
},
_initThumbs : function() {
// set the max-width of the slider elements to the one set in the plugin's options
// also, the width of each slider element will be 100% / total number of elements
this.$sliderElems.css({
'width' : 100 / this.itemsCount + '%'
});
// set the max-width of the slider and show it
this.$sliderthumbs.css( 'width', this.options.thumbMaxWidth * this.itemsCount + 'px' ).show();
},
_startSlideshow : function() {
var _self = this;
this.slideshow = setTimeout( function() {
var pos;
( _self.current === _self.itemsCount - 1 ) ? pos = 0 : pos = _self.current + 1;
_self._slideTo( pos );
if( _self.options.autoplay ) {
_self._startSlideshow();
}
}, this.options.slideshow_interval);
},
// shows the clicked thumb's slide
_slideTo : function( pos ) {
// return if clicking the same element or if currently animating
if( pos === this.current || this.isAnimating )
return false;
this.isAnimating = true;
var $currentSlide = this.$imgItems.eq( this.current ),
$nextSlide = this.$imgItems.eq( pos ),
_self = this,
preCSS = {zIndex : 10},
animCSS = {opacity : 1};
// new slide will slide in from left or right side
if( this.options.animation === 'sides' ) {
preCSS.left = ( pos > this.current ) ? -1 * this.elWidth : this.elWidth;
animCSS.left = 0;
}
// titles animation
$nextSlide.find('div.ei-title > h2')
.css( 'margin-right', 50 + 'px' )
.stop()
.delay( this.options.speed * this.options.titlesFactor )
.animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )
.end()
.find('div.ei-title > h3')
.css( 'margin-right', -50 + 'px' )
.stop()
.delay( this.options.speed * this.options.titlesFactor )
.animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )
$.when(
// fade out current titles
$currentSlide.css( 'z-index' , 1 ).find('div.ei-title > *').stop().fadeOut( this.options.speed / 2, function() {
// reset style
$(this).show().css( 'opacity', 0 );
}),
// animate next slide in
$nextSlide.css( preCSS ).stop().animate( animCSS, this.options.speed, this.options.easing ),
// "sliding div" moves to new position
this.$sliderElem.stop().animate({
left : this.$thumbs.eq( pos ).position().left
}, this.options.speed )
).done( function() {
// reset values
$currentSlide.css( 'opacity' , 0 ).find('div.ei-title > *').css( 'opacity', 0 );
_self.current = pos;
_self.isAnimating = false;
});
},
_initEvents : function() {
var _self = this;
// window resize
$(window).on( 'smartresize.eislideshow', function( event ) {
// resize the images
_self._setImagesSize();
// reset position of thumbs sliding div
_self.$sliderElem.css( 'left', _self.$thumbs.eq( _self.current ).position().left );
});
// click the thumbs
this.$thumbs.on( 'click.eislideshow', function( event ) {
if( _self.options.autoplay ) {
clearTimeout( _self.slideshow );
_self.options.autoplay = false;
}
var $thumb = $(this),
idx = $thumb.index() - 1; // exclude sliding div
_self._slideTo( idx );
return false;
});
}
};
var logError = function( message ) {
if ( this.console ) {
console.error( message );
}
};
$.fn.eislideshow = function( options ) {
if ( typeof options === 'string' ) {
var args = Array.prototype.slice.call( arguments, 1 );
this.each(function() {
var instance = $.data( this, 'eislideshow' );
if ( !instance ) {
logError( "cannot call methods on eislideshow prior to initialization; " +
"attempted to call method '" + options + "'" );
return;
}
if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
logError( "no such method '" + options + "' for eislideshow instance" );
return;
}
instance[ options ].apply( instance, args );
});
}
else {
this.each(function() {
var instance = $.data( this, 'eislideshow' );
if ( !instance ) {
$.data( this, 'eislideshow', new $.Slideshow( options, this ) );
}
});
}
return this;
};
})( window, jQuery );
How I can edit that to make them responsive ? can you give an example ?

I suggest you use something more simple (only 3 steps) instead of review this code.
Code:
Step 1: Link required files
First and most important, the jQuery library needs to be included (no need to download - link directly from Google). Next, download the package from this site and link the bxSlider CSS file (for the theme) and the bxSlider Javascript file.
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />
Step 2: Create HTML markup
Create a <ul class="bxslider"> element, with a <li> for each slide. Slides can contain images, video, or any other HTML content!
<ul class="bxslider">
<li><img src="/images/pic1.jpg" /></li>
<li><img src="/images/pic2.jpg" /></li>
<li><img src="/images/pic3.jpg" /></li>
<li><img src="/images/pic4.jpg" /></li>
</ul>
Step 3: Call the bxSlider
Call .bxslider() on <ul class="bxslider">. Note that the call must be made inside of a $(document).ready() call, or the plugin will not work!
$(document).ready(function(){
$('.bxslider').bxSlider();
});
I really believe, this will be more helpful and simple.
Credits: http://bxslider.com
Different configurations
$('.bxslider').bxSlider({
mode: 'fade',
captions: true,
pagerCustom: '#bx-pager',
adaptiveHeight: true,
slideWidth: 150
});
Don't forget to read this: http://bxslider.com/options

How can I open a form submission in a new window?

I have been trying to make a dropdown menu with HTML form/option. When the user clicks on the option desired, it should open a new tab in the same window. I’m currently using a pre-made plugin (made some alterations to the design of my project and adapted to the rest of the code), and managed to make it almost work. The thing is that it doesn’t open in a new tab: it opens on the same page (like _self).
Below, is the HTML code I’m using, as well the javascript file.
I’m really struggling to find a solution, though I know that it might be an easy one. I tried several things but none of them worked.
<!DOCTYPE HTML>
<html>
<head>
<!-- begin meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Ex. 1</title>
<!-- end meta -->
<!-- begin CSS -->
<link href="css/style_dropdown.css" type="text/css" rel="stylesheet" />
<!-- end CSS -->
<!-- begin JS -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="js/modernizr-2.0.6.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.dropdown.js"></script>
<script>
$( function() {
$( '#cd-dropdown' ).dropdown( {
gutter : 5,
stack : true,
slidingIn : 100,
onOptionSelect : function( opt ) {
window.location = opt.data( 'value' );
}
} );
});
<!-- end JS -->
<head>
<body>
<form>
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Social</option>
<option value="https://www.facebook.com" class="icon-facebook">Facebook</option>
<option value="https://plus.google.com/" class="icon-googleplus">Google Plus</option>
<option value="https://soundcloud.com/" class="icon-soundcloud">Soundcloud</option>
<option value="https://www.tumblr.com/" class="icon-tumblr">Tumblr</option>
<option value="http://www.youtube.com/" class="icon-youtube">You Tube</option>
</select>
</form>
</body>
</html>
And now the .js file
/**
JS DROPDOWN MENU
*/
;( function( $, window, undefined ) {
'use strict';
$.DropDown = function( options, element ) {
this.$el = $( element );
this._init( options );
};
// the options
$.DropDown.defaults = {
speed : 300,
easing : 'ease',
gutter : 0,
// initial stack effect
stack : true,
// delay between each option animation
delay : 0,
// random angle and positions for the options
random : false,
// rotated [right||left||false] : the options will be rotated to thr right side or left side.
// make sure to tune the transform origin in the stylesheet
rotated : false,
// effect to slide in the options. value is the margin to start with
slidingIn : false,
onOptionSelect : function(opt) { return false; }
};
$.DropDown.prototype = {
_init : function( options ) {
// options
this.options = $.extend( true, {}, $.DropDown.defaults, options );
this._layout();
this._initEvents();
},
_layout : function() {
var self = this;
this.minZIndex = 1000;
var value = this._transformSelect();
this.opts = this.listopts.children( 'li' );
this.optsCount = this.opts.length;
this.size = { width : this.dd.width(), height : this.dd.height() };
var elName = this.$el.attr( 'name' ), elId = this.$el.attr( 'id' ),
inputName = elName !== undefined ? elName : elId !== undefined ? elId : 'cd-dropdown-' + ( new Date() ).getTime();
this.inputEl = $( '<input type="hidden" name="' + inputName + '" value="' + value + '"></input>' ).insertAfter( this.selectlabel );
this.selectlabel.css( 'z-index', this.minZIndex + this.optsCount );
this._positionOpts();
if( Modernizr.csstransitions ) {
setTimeout( function() { self.opts.css( 'transition', 'all ' + self.options.speed + 'ms ' + self.options.easing ); }, 25 );
}
},
_transformSelect : function() {
var optshtml = '', selectlabel = '', value = -1;
this.$el.children( 'option' ).each( function() {
var $this = $( this ),
val = isNaN( $this.attr( 'value' ) ) ? $this.attr( 'value' ) : Number( $this.attr( 'value' ) ) ,
classes = $this.attr( 'class' ),
selected = $this.attr( 'selected' ),
label = $this.text();
if( val !== -1 ) {
optshtml +=
classes !== undefined ?
'<li data-value="' + val + '"><span class="' + classes + '">' + label + '</span></li>' :
'<li data-value="' + val + '"><span>' + label + '</span></li>';
}
if( selected ) {
selectlabel = label;
value = val;
}
} );
this.listopts = $( '<ul/>' ).append( optshtml );
this.selectlabel = $( '<span/>' ).append( selectlabel );
this.dd = $( '<div class="cd-dropdown"/>' ).append( this.selectlabel, this.listopts ).insertAfter( this.$el );
this.$el.remove();
return value;
},
_positionOpts : function( anim ) {
var self = this;
this.listopts.css( 'height', 'auto' );
this.opts
.each( function( i ) {
$( this ).css( {
zIndex : self.minZIndex + self.optsCount - 1 - i,
top : self.options.slidingIn ? ( i + 1 ) * ( self.size.height + self.options.gutter ) : 0,
left : 0,
marginLeft : self.options.slidingIn ? i % 2 === 0 ? self.options.slidingIn : - self.options.slidingIn : 0,
opacity : self.options.slidingIn ? 0 : 1,
transform : 'none'
} );
} );
if( !this.options.slidingIn ) {
this.opts
.eq( this.optsCount - 1 )
.css( { top : this.options.stack ? 9 : 0, left : this.options.stack ? 4 : 0, width : this.options.stack ? this.size.width - 8 : this.size.width, transform : 'none' } )
.end()
.eq( this.optsCount - 2 )
.css( { top : this.options.stack ? 6 : 0, left : this.options.stack ? 2 : 0, width : this.options.stack ? this.size.width - 4 : this.size.width, transform : 'none' } )
.end()
.eq( this.optsCount - 3 )
.css( { top : this.options.stack ? 3 : 0, left : 0, transform : 'none' } );
}
},
_initEvents : function() {
var self = this;
this.selectlabel.on( 'mousedown.dropdown', function( event ) {
self.opened ? self.close() : self.open();
return false;
} );
this.opts.on( 'click.dropdown', function() {
if( self.opened ) {
var opt = $( this );
self.options.onOptionSelect( opt );
self.inputEl.val( opt.data( 'value' ) );
self.selectlabel.html( opt.html() );
self.close();
}
} );
},
open : function() {
var self = this;
this.dd.toggleClass( 'cd-active' );
this.listopts.css( 'height', ( this.optsCount + 1 ) * ( this.size.height + this.options.gutter ) );
this.opts.each( function( i ) {
$( this ).css( {
opacity : 1,
top : self.options.rotated ? self.size.height + self.options.gutter : ( i + 1 ) * ( self.size.height + self.options.gutter ),
left : self.options.random ? Math.floor( Math.random() * 11 - 5 ) : 0,
width : self.size.width,
marginLeft : 0,
transform : self.options.random ?
'rotate(' + Math.floor( Math.random() * 11 - 5 ) + 'deg)' :
self.options.rotated ?
self.options.rotated === 'right' ?
'rotate(-' + ( i * 5 ) + 'deg)' :
'rotate(' + ( i * 5 ) + 'deg)'
: 'none',
transitionDelay : self.options.delay && Modernizr.csstransitions ? self.options.slidingIn ? ( i * self.options.delay ) + 'ms' : ( ( self.optsCount - 1 - i ) * self.options.delay ) + 'ms' : 0
} );
} );
this.opened = true;
},
close : function() {
var self = this;
this.dd.toggleClass( 'cd-active' );
if( this.options.delay && Modernizr.csstransitions ) {
this.opts.each( function( i ) {
$( this ).css( { 'transition-delay' : self.options.slidingIn ? ( ( self.optsCount - 1 - i ) * self.options.delay ) + 'ms' : ( i * self.options.delay ) + 'ms' } );
} );
}
this._positionOpts( true );
this.opened = false;
}
}
$.fn.dropdown = function( options ) {
var instance = $.data( this, 'dropdown' );
if ( typeof options === 'string' ) {
var args = Array.prototype.slice.call( arguments, 1 );
this.each(function() {
instance[ options ].apply( instance, args );
});
}
else {
this.each(function() {
instance ? instance._init() : instance = $.data( this, 'dropdown', new $.DropDown( options, this ) );
});
}
return instance;
};
} )( jQuery, window );

Some initial problems
First, you cannot control whether it opens in a new window or in a new tab in the current window: that’s purely a browser setting. If you set the target to _blank, it’ll open in a new whatever (probably tab, as that’s the default behaviour of most modern browsers).
Second, your HTML is seriously broken, because the <head> contains a <script> tag which opens but does not close. (Also, the closing <head> tag is written as a second opening tag instead.)
Third, your example is not self-contained, because it is completely unworkable without the accompanying CSS.
An attempt at an answer
I can’t work out where you’re actually opening anything, in a new window or otherwise. Your form doesn’t have a submit button or anything similarly obviously useful. However, something as simple as adding target="_blank" to the opening <form> tag might well do the trick.
<form target="_blank">
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Social</option>
<option value="https://www.facebook.com" class="icon-facebook">Facebook</option>
<option value="https://plus.google.com/" class="icon-googleplus">Google Plus</option>
<option value="https://soundcloud.com/" class="icon-soundcloud">Soundcloud</option>
<option value="https://www.tumblr.com/" class="icon-tumblr">Tumblr</option>
<option value="http://www.youtube.com/" class="icon-youtube">You Tube</option>
</select>
</form>

Make JavaScript/jQuery tabs return to position on mouse out

This post is about the 3 green tabs at the top of the page (link is below). I have almost got these moving tabs how I want them, but I am not able to get the tabs to return to original position on mouse out or on a click elsewhere. Instead they move back to position after a set amount of time. How difficult is it to have them move back on mouse out?
Site is here http://theveganproject.ca/wp/
Thanks!
var sliding = 0;
var slideTime = '';
// Set is sliding value
function setSliding(a_ISliding){
sliding = a_ISliding;
}
// Get is sliding value
function getSliding(){
return sliding;
}
// Carry out accordian styled effect
function accordion(evt) {
el = Event.element(evt);
var eldown = getNextSibling(el);
// If element is visible do nothing
if ($('visible') == el) {
return;
}
if ($('visible')) {
if( getSliding() == 1 ){
return false;
}
var elup = getNextSibling($('visible'));
setSliding( 1 );
parellelSlide( elup, eldown );
$('visible').id = '';
}
else{
setSliding( 1 );
singleSlide( eldown );
}
el.id = 'visible';
}
// Setup accordian initial state
function init() {
var bodyPanels = document.getElementsByClassName('panel_body');
var panels = document.getElementsByClassName('panel');
var noPanels = panels.length;
var percentageWidth = 100 / noPanels;
var position = 0;
// Loop through body panels and panels applying required styles and adding event listeners
for (i = 0; i < bodyPanels.length; i++) {
bodyPanels[i].hide();
panels[i].style.width = percentageWidth + '%';
panels[i].style.position = 'absolute';
panels[i].style.left = position + '%';
Event.observe(panels[i].getElementsByTagName('h3')[0], 'mouseover', accordion, false);
Event.observe(panels[i].getElementsByTagName('h3')[0], 'mousemove', accordion, false);
Event.observe(document.body, 'mousemove', resetIdle, false);
position += percentageWidth;
}
if( $('visible') ){
// Set panel with id of visible to be initial displayed
var vis = $('visible').parentNode.id+'-body';
$(vis).show();
}
setIdle();
}
// Next sibling method to work around firefox issues
function getNextSibling(startBrother){
var endBrother=startBrother.nextSibling;
while(endBrother.nodeType!=1){
endBrother = endBrother.nextSibling;
}
return endBrother;
}
function parellelSlide( elup, eldown ){
new Effect.Parallel(
[
new Effect.SlideUp(elup),
new Effect.SlideDown(eldown)
], {
duration: 0.3,
afterFinish: function() { setSliding( 0 );}
});
}
function singleSlide( eldown ){
new Effect.Parallel(
[
new Effect.SlideDown(eldown)
], {
duration: 0.3,
afterFinish: function() { setSliding( 0 );}
});
}
function resetTabs(){
var resetEl = getNextSibling( $('visible') );
setSliding( 1 );
new Effect.Parallel(
[
new Effect.SlideUp( resetEl )
], {
duration: 0.3,
afterFinish: function() { setSliding( 0 );}
});
$('visible').id = '';
}
function resetIdle(){
if( $('visible') ){
window.clearTimeout( slideTime );
slideTime = window.setTimeout( "resetTabs()", 1000 );
}
}
function setIdle(){
if( $('visible') ){
slideTime = window.setTimeout( "resetTabs()", 1000 );
}
}
Event.observe(window, 'load', init, false);

Stuck while Implementing complex jQuery Image Slider

I have stuck some where while modifying THIS slider.
Here Thumbnail & main display Image have one to one relationship i.e by clicking on 1 thumbnail, It shows a single Image & then it slides to the next thumbnail & displays its associated image & so on.
Now, I want to modify this slider in such a way that one thumbnail should be assiciated / linked with multiple Images i.e one thumbnail to many main display images relationship (one –to-many)
i.e by clicking on “Bedroom thumbnail” (As shown in attached image .. SCREENSHOT ) , It should only display & slide 5 (or n) number of Images related to this particular thumbnail, then in the same way if I am clicking on “Bathroom thumbnail” , It should display & slide 5 (or n) number of images related to this particular section & so on. So this is how I wanna modify the code from ONE-to-ONE [one thumbnail-to-one main display image] to ONE-to-MANY [one thumbnail-to- 5 or n number of images related to that particular thumbnail]
My Modified Thumbnail Section’s HTML code is same.
I have modified the Main Image section as shown ..
<div id="lofslidecontent45" class="lof-slidecontent" style="width:670px;height:236px;">
<div class="preload"><div></div></div>
<div class="lof-main-outer" style="width:670px; height:236px;">
<ul class="lof-main-wapper">
<li>
<ul class=”lof-main-subwapper”>
<li>
<img src="images/slider1.jpg" title="Newsflash 2" >
<div class="lof-main-item-desc">
<h3>Innovation</h3>
<h2>lorem ipsum is simply dummy text</h2>
</div>
</li>
<li>
..
</li>
</ul>
</li>
<li>
<ul class=”lof-main-subwapper”>
<li>
…
</li>
<li>
…
</li>
</ul>
</li>
</ul>
</div>
</div>
I am modifying the slider’s Script code, so far I have adder another wrappersub class & I am stuck while linking the group of images to one thumbnail i.e linking main image section’s ul with thumbnail’s li...
(function($) {
$.fn.lofJSidernews = function( settings ) {
return this.each(function() {
// get instance of the lofSiderNew.
new $.lofSidernews( this, settings );
});
}
$.lofSidernews = function( obj, settings ){
this.settings = {
direction : '',
mainItemSelector : 'li',
mainInnerItemSelector : 'li',
navInnerSelector : 'ul',
navSelector : 'li' ,
navigatorEvent : 'click',
subWrapperSelector :'.lof-main-subwrapper',
wapperSelector: '.lof-main-wapper',
interval : 4000,
innerinterval :20000,
auto : true, // whether to automatic play the slideshow
maxItemDisplay : 5,
startItem : 0,
navPosition : 'vertical',
navigatorHeight : 100,
navigatorWidth : 310,
duration : 600,
navItemsSelector : '.lof-navigator li',
navOuterSelector : '.lof-navigator-outer' ,
isPreloaded : true,
easing : 'easeInOutQuad'
}
$.extend( this.settings, settings ||{} );
this.nextNo = null;
this.previousNo = null;
this.maxWidth = this.settings.mainWidth || 600;
this.wrapper = $( obj ).find( this.settings.wapperSelector );
this.subSlides = this.wrapper.find( this.settings.mainItemSelector );
this.subwrapper = this.subslides.find(this.settings.subWrapperSelector)
this.slides = this.subwrapper.find(this.settings.mainInnerItemSelector)
if( !this.wrapper.length || !this.subslides.length ) return ;
if( !this.subwrapper.length || !this.slides.length ) return ;
if( this.settings.maxItemDisplay > this.slides.length ){
this.settings.maxItemDisplay = this.slides.length;
}
this.currentNo = isNaN(this.settings.startItem)
)||this.settings.startItem > this.slides.length?0:this.settings.startItem;
this.navigatorOuter = $( obj ).find( this.settings.navOuterSelector );
this.navigatorItems = $( obj ).find( this.settings.navItemsSelector );
this.navigatorInner = this.navigatorOuter.find( this.settings.navInnerSelector );
if( this.settings.navPosition == 'horizontal' ){
this.navigatorInner.width( this.slides.length * this.settings.navigatorWidth );
this.navigatorOuter.width( this.settings.maxItemDisplay * this.settings.navigatorWidth );
this.navigatorOuter.height( this.settings.navigatorHeight );
} else {
this.navigatorInner.height( this.slides.length * this.settings.navigatorHeight );
this.navigatorOuter.height( this.settings.maxItemDisplay * this.settings.navigatorHeight );
this.navigatorOuter.width( this.settings.navigatorWidth );
}
this.navigratorStep = this.__getPositionMode( this.settings.navPosition );
this.directionMode = this.__getDirectionMode();
if( this.settings.direction == 'opacity') {
this.subwrapper.addClass( 'lof-opacity' );
$(this.slides).css('opacity',0).eq(this.currentNo).css('opacity',1);
} else {
this.subwrapper.css
({'left':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) * this.slides.length } );
}
if( this.settings.isPreloaded ) {
this.preLoadImage( this.onComplete );
} else {
this.onComplete();
}
}
$.lofSidernews.fn = $.lofSidernews.prototype;
$.lofSidernews.fn.extend = $.lofSidernews.extend = $.extend;
$.lofSidernews.fn.extend({
startUp:function( obj, subwrapper ) {
seft = this;
this.navigatorItems.each( function(index, item ){
$(item).click( function(){
seft.jumping( index, true );
seft.setNavActive( index, item );
} );
$(item).css( {'height': seft.settings.navigatorHeight, 'width': seft.settings.navigatorWidth} );
})
this.registerWheelHandler( this.navigatorOuter, this );
this.setNavActive(this.currentNo );
if( this.settings.buttons && typeof (this.settings.buttons) == "object" ){
this.registerButtonsControl( 'click', this.settings.buttons, this );
}
if( this.settings.auto )
this.play( this.settings.innerinterval,'next', true );
return this;
},
onComplete:function(){
setTimeout( function(){ $('.preload').fadeOut( 900 ); }, 400 ); this.startUp( );
},
preLoadImage:function( callback ){
var self = this;
var images = this.subwrapper.find( 'img' );
var count = 0;
images.each( function(index,image){
if( !image.complete ){
image.onload =function(){
count++;
if( count >= images.length ){
self.onComplete();
}
}
image.onerror =function(){
count++;
if( count >= images.length ){
self.onComplete();
}
}
}else {
count++;
if( count >= images.length ){
self.onComplete();
}
}
} );
},
navivationAnimate:function( currentIndex ) {
if (currentIndex <= this.settings.startItem
|| currentIndex - this.settings.startItem >= this.settings.maxItemDisplay-1) {
this.settings.startItem = currentIndex - this.settings.maxItemDisplay+2;
if (this.settings.startItem < 0) this.settings.startItem = 0;
if (this.settings.startItem >this.slides.length-this.settings.maxItemDisplay) {
this.settings.startItem = this.slides.length-this.settings.maxItemDisplay;
}
}
Any HELP would be appreciated.
Thank you

Maybe you could try adding a slide show inside of another slider that will support more content like the Anything Slider. I've used it on projects and had some luck with adding my own custom stuff in the slides.

try adding "var" to line 238, it becomes: var seft = this;