We Keep Coding

Links works only in submenu

I'm trying to modify the following code becouse the links works only in a submenu , but i want to have some links in mainmenu too.
I found that when I use
$menuItems = $listItems.children(‘a.dropdown’);
instead of
$menuItems = $listItems.children( 'a' ),
...links from the main menu work fine , but logically submenu does not open.
Whole code:
var cbpHorizontalMenu = (function() {
var $listItems = $( '#cbp-hrmenu > ul > li' ),
$menuItems = $listItems.children( 'a' ),
$body = $( 'body' ),
current = -1;
function init() {
$menuItems.on( 'click', open );
$listItems.on( 'click', function( event ) { event.stopPropagation(); } );
}
function open( event ) {
if( current !== -1 ) {
$listItems.eq( current ).removeClass( 'cbp-hropen' );
}
var $item = $( event.currentTarget ).parent( 'li' ),
idx = $item.index();
if( current === idx ) {
$item.removeClass( 'cbp-hropen' );
current = -1;
}
else {
$item.addClass( 'cbp-hropen' );
current = idx;
$body.off( 'click' ).on( 'click', close );
}
return false;
}
function close( event ) {
$listItems.eq( current ).removeClass( 'cbp-hropen' );
current = -1;
}
return { init : init };
HTML:
<div class="main">
<nav id="cbp-hrmenu" class="cbp-hrmenu">
<ul class="nav navbar-nav navbar-right">
<li>O SPOLEČNOSTI</li>
<li>
SLUŽBY
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<p>
<div><ul><li class="">SOCIÁLNÍ SÍTĚ</li></ul></div>
<div><ul><li class="">RESPONZIVITA</li></ul></div>
<div><ul><li class="">TVORBA WEBU</li></ul></div>
<div><ul><li class="">SEO OPTIMALIZACE</li></ul></div>
<div><ul><li class="">PPC</li></ul></div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li></ul></nav>

multiple instances of a jquery Vertical show case slider

I'm just using a vertical show case slider here is my source code :
var Slider = (function() {
var $container = $( '#ps-container' ),
$contentwrapper = $container.children( 'div.ps-contentwrapper' ),
// the items (description elements for the slides/products)
$items = $contentwrapper.children( 'div.ps-content' ),
itemsCount = $items.length,
$slidewrapper = $container.children( 'div.ps-slidewrapper' ),
// the slides (product images)
$slidescontainer = $slidewrapper.find( 'div.ps-slides' ),
$slides = $slidescontainer.children( 'div' ),
// navigation arrows
$navprev = $slidewrapper.find( 'nav > a.ps-prev' ),
$navnext = $slidewrapper.find( 'nav > a.ps-next' ),
// current index for items and slides
current = 0,
// checks if the transition is in progress
isAnimating = false,
// support for CSS transitions
support = Modernizr.csstransitions,
transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd',
'MozTransition' : 'transitionend',
'OTransition' : 'oTransitionEnd',
'msTransition' : 'MSTransitionEnd',
'transition' : 'transitionend'
},
// its name
transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
init = function() {
// show first item
var $currentItem = $items.eq( current ),
$currentSlide = $slides.eq( current ),
initCSS = {
top : 0,
zIndex : 999
};
$currentItem.css( initCSS );
$currentSlide.css( initCSS );
// update nav images
updateNavImages();
// initialize some events
initEvents();
},
updateNavImages = function() {
// updates the background image for the navigation arrows
var configPrev = ( current > 0 ) ? $slides.eq( current - 1 ).css( 'background-image' ) : $slides.eq( itemsCount - 1 ).css( 'background-image' ),
configNext = ( current < itemsCount - 1 ) ? $slides.eq( current + 1 ).css( 'background-image' ) : $slides.eq( 0 ).css( 'background-image' );
$navprev.css( 'background-image', configPrev );
$navnext.css( 'background-image', configNext );
},
initEvents = function() {
$navprev.on( 'click', function( event ) {
if( !isAnimating ) {
slide( 'prev' );
}
return false;
} );
$navnext.on( 'click', function( event ) {
if( !isAnimating ) {
slide( 'next' );
}
return false;
} );
// transition end event
$items.on( transEndEventName, removeTransition );
$slides.on( transEndEventName, removeTransition );
},
removeTransition = function() {
isAnimating = false;
$(this).removeClass('ps-move');
},
slide = function( dir ) {
isAnimating = true;
var $currentItem = $items.eq( current ),
$currentSlide = $slides.eq( current );
// update current value
if( dir === 'next' ) {
( current < itemsCount - 1 ) ? ++current : current = 0;
}
else if( dir === 'prev' ) {
( current > 0 ) ? --current : current = itemsCount - 1;
}
// new item that will be shown
var $newItem = $items.eq( current ),
// new slide that will be shown
$newSlide = $slides.eq( current );
// position the new item up or down the viewport depending on the direction
$newItem.css( {
top : ( dir === 'next' ) ? '-100%' : '100%',
zIndex : 999
} );
$newSlide.css( {
top : ( dir === 'next' ) ? '100%' : '-100%',
zIndex : 999
} );
setTimeout( function() {
// move the current item and slide to the top or bottom depending on the direction
$currentItem.addClass( 'ps-move' ).css( {
top : ( dir === 'next' ) ? '100%' : '-100%',
zIndex : 1
} );
$currentSlide.addClass( 'ps-move' ).css( {
top : ( dir === 'next' ) ? '-100%' : '100%',
zIndex : 1
} );
// move the new ones to the main viewport
$newItem.addClass( 'ps-move' ).css( 'top', 0 );
$newSlide.addClass( 'ps-move' ).css( 'top', 0 );
// if no CSS transitions set the isAnimating flag to false
if( !support ) {
isAnimating = false;
}
}, 0 );
// update nav images
updateNavImages();
};
return { init : init }; })();
and in html here is my code :
{% for i,menu in zipped_data %}
<div class="ps-contentwrapper">
<div class="ps-content">
<p></p>
</div>
<div class="ps-content">
<p></p>
</div>
<div class="ps-content">
<p></p>
</div>
<div class="ps-content">
<p></p>
</div>
</div><!-- /ps-contentwrapper -->
<div class="ps-slidewrapper">
<div class="ps-slides">
{% for photo in photos_list|lookup:i %}
<div style="background-image:url('{{photo.get_display_url }}');"></div>
{% endfor %}
</div>
<nav>
<a href="#" class="ps-prev" ></a>
<a href="#" class="ps-next" ></a>
</nav>
</div><!-- /ps-slidewrapper -->
</section><!-- /ps-container -->
{% endfor %}
How can I make multiple instances of this slider on the same page .
so I want multiple instances of the section but it's not working
If any body can help me in this please

How to reload a page on slider navigation click

I've a problem with this slider: I want to make it slider reload the page after I'm clicking the link "next/prev" in the slider or hte thumbnail.
Can someone help me ?
$(function() {
// ======================= imagesLoaded Plugin ===============================
// https://github.com/desandro/imagesloaded
// $('#my-container').imagesLoaded(myFunction)
// execute a callback when all images have loaded.
// needed because .load() doesn't work on cached images
// callback function gets image collection as argument
// this is the container
// original: mit license. paul irish. 2010.
// contributors: Oren Solomianik, David DeSandro, Yiannis Chatzikonstantinou
$.fn.imagesLoaded = function( callback ) {
var $images = this.find('img'),
len = $images.length,
_this = this,
blank = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
function triggerCallback() {
callback.call( _this, $images );
}
function imgLoaded() {
if ( --len <= 0 && this.src !== blank ){
setTimeout( triggerCallback );
$images.off( 'load error', imgLoaded );
}
}
if ( !len ) {
triggerCallback();
}
$images.on( 'load error', imgLoaded ).each( function() {
// cached images don't fire load sometimes, so we reset src.
if (this.complete || this.complete === undefined){
var src = this.src;
// webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
// data uri bypasses webkit log warning (thx doug jones)
this.src = blank;
this.src = src;
}
});
return this;
};
// gallery container
var $rgGallery = $('#rg-gallery'),
// carousel container
$esCarousel = $rgGallery.find('div.es-carousel-wrapper'),
// the carousel items
$items = $esCarousel.find('ul > li'),
// total number of items
itemsCount = $items.length;
Gallery = (function() {
// index of the current item
var current = 0,
// mode : carousel || fullview
mode = 'carousel',
// control if one image is being loaded
anim = false,
init = function() {
// (not necessary) preloading the images here...
$items.add('<img src="images/ajax-loader.gif"/><img src="images/black.png"/>').imagesLoaded( function() {
// add options
_addViewModes();
// add large image wrapper
_addImageWrapper();
// show first image
_showImage( $items.eq( current ) );
});
// initialize the carousel
if( mode === 'carousel' )
_initCarousel();
},
_initCarousel = function() {
// we are using the elastislide plugin:
// http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/
$esCarousel.show().elastislide({
imageW : 65,
onClick : function( $item ) {
if( anim ) return false;
anim = true;
// on click show image
_showImage($item);
// change current
current = $item.index();
}
});
// set elastislide's current to current
$esCarousel.elastislide( 'setCurrent', current );
},
_addViewModes = function() {
// top right buttons: hide / show carousel
var $viewfull = $(''),
$viewthumbs = $('');
$rgGallery.prepend( $('<div class="rg-view"/>').append( $viewfull ).append( $viewthumbs ) );
$viewfull.on('click.rgGallery', function( event ) {
if( mode === 'carousel' )
$esCarousel.elastislide( 'destroy' );
$esCarousel.hide();
$viewfull.addClass('rg-view-selected');
$viewthumbs.removeClass('rg-view-selected');
mode = 'fullview';
return false;
});
$viewthumbs.on('click.rgGallery', function( event ) {
_initCarousel();
$viewthumbs.addClass('rg-view-selected');
$viewfull.removeClass('rg-view-selected');
mode = 'carousel';
return false;
});
if( mode === 'fullview' )
$viewfull.trigger('click');
},
_addImageWrapper= function() {
// adds the structure for the large image and the navigation buttons (if total items > 1)
// also initializes the navigation events
$('#img-wrapper-tmpl').tmpl( {itemsCount : itemsCount} ).prependTo( $rgGallery );
if( itemsCount > 1 ) {
// addNavigation
var $navPrev = $rgGallery.find('a.rg-image-nav-prev'),
$navNext = $rgGallery.find('a.rg-image-nav-next'),
$imgWrapper = $rgGallery.find('div.rg-image');
$navPrev.on('click.rgGallery', function( event ) {
_navigate( 'left' );
return false;
});
$navNext.on('click.rgGallery', function( event ) {
_navigate( 'right' );
return false;
});
// add touchwipe events on the large image wrapper
$imgWrapper.touchwipe({
wipeLeft : function() {
_navigate( 'right' );
},
wipeRight : function() {
_navigate( 'left' );
},
preventDefaultEvents: false
});
$(document).on('keyup.rgGallery', function( event ) {
if (event.keyCode == 39)
_navigate( 'right' );
else if (event.keyCode == 37)
_navigate( 'left' );
});
}
},
_navigate = function( dir ) {
// navigate through the large images
if( anim ) return false;
anim = true;
if( dir === 'right' ) {
if( current + 1 >= itemsCount )
current = 0;
else
++current;
}
else if( dir === 'left' ) {
if( current - 1 < 0 )
current = itemsCount - 1;
else
--current;
}
_showImage( $items.eq( current ) );
},
_showImage = function( $item ) {
// shows the large image that is associated to the $item
var $loader = $rgGallery.find('div.rg-loading').show();
$items.removeClass('selected');
$item.addClass('selected');
var $thumb = $item.find('img'),
largesrc = $thumb.data('large'),
title = $thumb.data('description');
$('<img/>').load( function() {
$rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>');
if( title )
$rgGallery.find('div.rg-caption').show().children('p').empty().text( title );
$loader.hide();
if( mode === 'carousel' ) {
$esCarousel.elastislide( 'reload' );
$esCarousel.elastislide( 'setCurrent', current );
}
anim = false;
}).attr( 'src', largesrc );
},
addItems = function( $new ) {
$esCarousel.find('ul').append($new);
$items = $items.add( $($new) );
itemsCount = $items.length;
$esCarousel.elastislide( 'add', $new );
};
return {
init : init,
addItems : addItems
};
})();
Gallery.init();
/*
Example to add more items to the gallery:
var $new = $('<li><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded" /></li>');
Gallery.addItems( $new );
*/
});
Here is the code for the view
<noscript>
<style>
.es-carousel ul{
display:block;
}
</style>
</noscript>
<script id="img-wrapper-tmpl" type="text/x-jquery-tmpl">
<div class="rg-image-wrapper">
{{if itemsCount > 1}}
<div class="rg-image-nav">
Previous Image
Next Image
</div>
{{/if}}
<div class="rg-image"></div>
<div class="rg-loading"></div>
<div class="rg-caption-wrapper">
<div class="rg-caption" style="display:none;">
<p></p>
</div>
</div>
</div>
</script>
</head>
<body>
<div class="container">
<div class="header">
<span>« Previous Demo: </span>Elastislide
<span class="right_ab">
Images by Shermeee
CC BY 2.0
<strong>back to the Codrops post</strong>
</span>
<div class="clr"></div>
</div><!-- header -->
<div class="content">
<h1>Responsive Image Gallery <span>A jQuery image gallery with a thumbnail carousel</span></h1>
<div id="rg-gallery" class="rg-gallery">
<div class="rg-thumbs">
<!-- Elastislide Carousel Thumbnail Viewer -->
<div class="es-carousel-wrapper">
<div class="es-nav">
<span class="es-nav-prev">Previous</span>
<span class="es-nav-next">Next</span>
</div>
<div class="es-carousel">
<ul>
<li><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded" /></li>
</ul>
</div>
</div>
<!-- End Elastislide Carousel Thumbnail Viewer -->
</div><!-- rg-thumbs -->
</div><!-- rg-gallery -->
</div><!-- content -->
</div><!-- container -->
Sorry if my English is not so good, but I really need to solve this.

Well I have no idea why would you do that, but if you want to reload the page every time you click on the Next and Prev buttons, including the Thumbnail you could do something like this:
$(document).ready(function() {
$('.es-nav span, .es-carousel img').on('click', function() {
location.reload();
});
});
This will reload the page when you click on the nav or an image in the thumbnail area.

How could I automate a JavaScript function to autoplay a slideshow?

I have a div box gallery with some pictures on background and 2 lateral buttons prev and next. On click of a button the JavaScript show the next or previous picture, that's ok but I wish also to make this transition automatic using an interval time to show the next picture. How can I proceed?
This is my HTML:
<div id="boxgallery" class="boxgallery" data-effect="effect-1">
<div class="panel"><img src="img/1.jpg" alt="Image 1"/></div>
<div class="panel"><img src="img/2.jpg" alt="Image 2"/></div>
<div class="panel"><img src="img/3.jpg" alt="Image 3"/></div>
<div class="panel"><img src="img/4.jpg" alt="Image 4"/></div>
</div>
This is my JavaScript function:
// goto next or previous slide
BoxesFx.prototype._navigate = function( dir ) {
if( this.isAnimating ) return false;
this.isAnimating = true;
var self = this, currentPanel = this.panels[ this.current ];
if( dir === 'next' ) {
this.current = this.current < this.panelsCount - 1 ? this.current + 1 : 0;
}
else {
this.current = this.current > 0 ? this.current - 1 : this.panelsCount - 1;
}
// next panel to be shown
var nextPanel = this.panels[ this.current ];
// add class active to the next panel to trigger its animation
classie.add( nextPanel, 'active' );
// apply the transforms to the current panel
this._applyTransforms( currentPanel, dir );
// let´s track the number of transitions ended per panel
var cntTransTotal = 0,
// transition end event function
onEndTransitionFn = function( ev ) {
if( ev && !classie.has( ev.target, 'bg-img' ) ) return false;
// return if not all panel transitions ended
++cntTransTotal;
if( cntTransTotal < self.panelsCount ) return false;
if( support.transitions ) {
this.removeEventListener( transEndEventName, onEndTransitionFn );
}
// remove current class from current panel and add it to the next one
classie.remove( currentPanel, 'current' );
classie.add( nextPanel, 'current' );
// reset transforms for the currentPanel
self._resetTransforms( currentPanel );
// remove class active
classie.remove( nextPanel, 'active' );
self.isAnimating = false;
};
if( support.transitions ) {
currentPanel.addEventListener( transEndEventName, onEndTransitionFn );
}
else {
onEndTransitionFn();
}
}

Ok I looked up BoxesFx. look for this code:
BoxesFx.prototype._initEvents = function() {
var self = this, navctrls = this.nav.children;
// previous action
navctrls[0].addEventListener( 'click', function() { self._navigate('prev') } );
// next action
navctrls[1].addEventListener( 'click', function() { self._navigate('next') } );
// window resize
window.addEventListener( 'resize', function() { self._resizeHandler(); } );
}
Change it to:
BoxesFx.prototype._initEvents = function() {
var self = this, navctrls = this.nav.children;
// previous action
navctrls[0].addEventListener( 'click', function() { self.automate('prev',3000) } );
// next action
navctrls[1].addEventListener( 'click', function() { self.automate('next',3000) } );
// window resize
window.addEventListener( 'resize', function() { self._resizeHandler(); } );
window.onload = function () {
self.automate('next',3000);
}
}
Where "3000" is the milliseconds to show a slide, including any animation time of the slide.

just add a couple more methods, make new buttons to call them. the property "auto" will not be zero when it's running, which may be handy later.
BoxesFx.prototype.auto = 0;
BoxesFx.prototype.automate = function(dir,time){
var scope = this;
this.auto = setInterval(function(){
scope._navigate(dir);
},time);
}
BoxesFx.prototype.stopAutomate = function(){
clearInterval(this.auto);
}

You can use javascripts setInterval() function:
http://www.w3schools.com/jsref/met_win_setinterval.asp
Edit:
You will have to call the setInterval() function when your page has loaded. For example you could use the onload-Event of your body tag:
HTML
<body onload="startAutoplay()">
// your slider and content
</body>
Javascript
function startAutoplay(){
setInterval(function(){
// call your next() or previous() function here
}, 3000);
}
This will set the timer to 3 seconds

Hash is not Full in the URL

I have a gallery in Jquery Elastislide.
var imageIndex = 0;
if (window.location.hash) {
var imageIndexStr = window.location.hash.replace('#',''); // remove #
imageIndex = parseInt(imageIndexStr, 0); // convert to int
}
Thanks to the code above, The gallery got pictures with corresponding Hash.
www.example.com/gallery.html#1_TITLE_OF_THE_PICTURE
When I put the code to navigate with arrows of the gallery, I get in the following URL :
www.example.com/gallery.html#1
_navigate = function( dir ) {
// navigate through the large images
if( anim ) return false;
anim = true;
if( dir === 'right' ) {
if( current + 1 >= itemsCount )
current = 0;
else
++current;
}
else if( dir === 'left' ) {
if( current - 1 < 0 )
current = itemsCount - 1;
else
--current;
}
_showImage( $items.eq( window.location.hash = current) );
So, I want some help in order to get in the URL the full Hash.
www.example.com/gallery.html#1_TITLE_OF_THE_PICTURE
HTML Code :
<head>
<style>
.es-carousel ul{
display:block;
}
</style>
<script id="img-wrapper-tmpl" type="text/x-jquery-tmpl">
<div class="rg-image-wrapper">
{{if itemsCount > 1}}
<div class="rg-image-nav">
Previous Image
Next Image
</div>
{{/if}}
<div class="rg-image"></div>
<div class="rg-loading"></div>
<div class="rg-caption-wrapper">
<div class="rg-caption" style="display:none;">
<p></p>
</div>
</div>
</div>
</script>
</head>
<body>
<div class="container_gallery">
<div id="rg-gallery" class="rg-gallery">
<div class="rg-thumbs">
<!-- Elastislide Carousel Thumbnail Viewer -->
<div class="es-carousel-wrapper">
<div class="es-nav">
<span class="es-nav-prev">Previous</span>
<span class="es-nav-next">Next</span>
</div>
<div class="es-carousel">
<ul>
<li> <img src="picture_thumb.jpg" data-large="picture.jpg" alt="Title_1" data-description="Title_1" /></li>
href="#0_Title_2"><img src="picture2_thumb.jpg" data-large="picture2.jpg" alt="Title_2" data-description="Title_2" /></a></li>
href="#0_Title_3"><img src="picture3_thumb.jpg" data-large="picture3.jpg" alt="Title_3" data-description="Title_3" /></a></li>
</ul>
</div>
</div>
<!-- End Elastislide Carousel Thumbnail Viewer -->
</div><!-- rg-thumbs -->
</div><!-- rg-gallery -->
</div>
Event Navigation :
$('#img-wrapper-tmpl').tmpl( {itemsCount : itemsCount} ).prependTo( $rgGallery );
if( itemsCount > 1) {
// addNavigation
var $navPrev = $rgGallery.find('a.rg-image-nav-prev'),
$navNext = $rgGallery.find('a.rg-image-nav-next'),
$imgWrapper = $rgGallery.find('div.rg-image');
$navPrev.on('click.rgGallery', function( event ) {
_navigate( 'left' );
return false;
});
$navNext.on('click.rgGallery', function( event ) {
_navigate( 'right' );
return false;
});
// add touchwipe events on the large image wrapper
$imgWrapper.touchwipe({
wipeLeft : function() {
_navigate( 'right' );
},
wipeRight : function() {
_navigate( 'left' );
},
preventDefaultEvents: false
});
$(document).on('keyup.rgGallery', function( event ) {
if (event.keyCode == 39)
_navigate( 'right' );
else if (event.keyCode == 37)
_navigate( 'left' );
});
}
},
Thanks for your answers.

This line of code is setting the hash value to just be a number which would cause it to become something like: www.example.com/gallery.html#1.
_showImage( $items.eq( window.location.hash = current) );
It looks to me like your navigate function is not putting the title onto the new hash value when you change pictures. I think you want something like this:
window.location.hash = current + "_" + newPictureTitle;
_showImage( $items.eq(current) );
Where you obviously need to fill in the value of newPictureTitle
Based on the HTML and other javascript you've shown, your _navigate() function could work like this:
_navigate = function( dir ) {
// navigate through the large images
if( anim ) return false;
anim = true;
if( dir === 'right' ) {
if( ++current >= itemsCount )
current = 0;
} else if( dir === 'left' ) {
if( --current < 0 )
current = itemsCount - 1;
}
// show the right image
_showImage( $items.eq(current) );
// now get the right image title so it can go in the hash value
// we assume here that current is a zero based index
var links = $("#rg-gallery .es-carousel li a");
// use getAttribute here to get the raw href that's in the
// HTML source file (not a fully qualified URL)
window.location.hash = links.get(current).getAttribute("href");
}