Basic jQuery Slider - Current Slide Number - javascript

I'm currently having issues displaying the current slide number, basically I need to have the current slides number inserted into a span class called current slide. I'm using follow jquery slider: http://basic-slider.com
I'm using this snippet to call the script.
jQuery(document).ready(function($) {
var total = jQuery('.bjqs li').length;
$('#banner-slide').bjqs({
animtype : 'slide',
height : 490,
width : 695,
showmarkers : false,
responsive : false
});
jQuery('#slider-status > .total-slides').html(total);
});
According to the design it needs to be shown as 1(current slide) / 3(being total amount)
Any help would be very much appreciated!

If you are not using bjqs min file you can modify set_next function to get current slide number and apped it to span.

Try this:
$('#banner-slide').bjqs({
animtype : 'slide',
height : 490,
width : 695,
showmarkers : true, // set it to true
responsive : false
});
From http://basic-slider.com/
showmarkers : true, // Show individual slide markers

Related

Scroll to anchor after opening fancybox

i have realized a "help"-view in a fancybox.
In this fancybox i've got a navigation menue. This menue works with anchor links. So far so good.
Now i want to open this fancybox and directly scroll to a spezific anchor.
Here my code, how i open the fancybox:
$.fancybox({
width : 1000,
height : 800,
minHeight : 800,
maxHeight : 800,
minWidth : 1000,
maxWidth : 1000,
fitToView : false,
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
scrolling : 'yes',
href : "#idofview",
})
I tried a few things, but nothing works.
I tried:
location.href = "#anchor";
//or
location.hash = "#anchor";
//or
afterShow: function() {
$(this).closest('.fancybox-inner').animate({
scrollTop: $('.fancybox-overlay').scrollTop() + $("#anchorid").offset().top
});
//or
$(document.body).scrollTop($('#anchorid').offset().top);
I also tried to trigger the click of my anchor link:
$("#btn_link").trigger('click');
Is there any reason to direktly scroll to the anchor in a fancybox?
You may need to find the offset().top of your targeted anchor first, then just animate the .fancybox-inner selector to that position (you don't need this $(this).closest() method at all) so :
jQuery(document).ready(function ($) {
$(".fancybox").fancybox({
// API options
afterShow: function () {
var toScroll = $(".fancybox-inner").find("#anchor2").offset().top - 35;
$(".fancybox-inner").animate({
scrollTop: toScroll
}, 1000);
}
}); // fancybox
}); // ready
Notice that I am subtracting 35px from the offset (in var toScroll) because the fancybox's padding, but this is a variable you may need to play with.
See JSFIDDLE

Show first slide longer than other slides in a content slider

This is a last ditch attempt to try to achieve what I need from this slider. I have implemented a jquery content slider called 'Super Simple Slider' on my website. I have never used this before and so far it has been super simple. However I need the first slide of the slider to display for slightly longer than all of the other slides. 10 seconds. However after much research I can not find a way to do this. Can anybody see a workaround so I can make this happen? Can I perhaps use pure JavaScript along with the jQuery to make this happen?
Below is the jQuery for the slider
<script>
$(function(){
$('.slider').sss({
slideShow : true, // Set to false to prevent SSS from automatically animating.
startOn : 0, // Slide to display first. Uses array notation (0 = first slide).
transition : 400, // Length (in milliseconds) of the fade transition.
speed : 7000, // Slideshow speed in milliseconds.
showNav : true // Set to false to hide navigation arrows.
});
});
</script>
I think the best way to do it is to make some (easy) changes in the plugin:
1. Add an option (to keep it configurable) : speedOnFirst (for example)
In the plugin settings:
var settings = $.extend({
slideShow : true,
startOn : 0,
speed : 3500,
speedOnFirst : 3500, // <--- HERE
transition : 400,
arrows : true
}, options);
2. Change the timeout in reset_timer function
Check if target == 0 (it means it's the first slide), and then, base your timeout on settings.speedOnFirst instead of settings.speed
reset_timer = settings.slideShow ? function() {
clearTimeout(timer);
speed = (0 !== target) ? settings.speed : settings.speedOnFirst; // <--- HERE
timer = setTimeout(next_slide, speed); // <--- Change second param here
} : $.noop;
3. Call your plugin
$('.slider').sss({
slideShow : true,
startOn : 0,
transition : 400,
speed : 7000,
speedOnFirst : 10000, // <--- Delay for your first slide
showNav : true
});
>> See working demo here
NB: In the demo, the slides changes quickly so as you can see the difference with the first one, juste change the values with whatever you need.
You will need to customize the plugin to accomplish what you need.
Look at the non minified version (sss.js) and add the following logic:
Add an extra option:
var settings = $.extend({
slideShow: true,
startOn: 0,
speed: 3500,
transition: 400,
arrows: true,
firstSlideSpeed:10000 // new setting for first slide speed
}, options);
Change the slide logic:
reset_timer = settings.slideShow ? function () {
clearTimeout(timer);
var slideSpeed = ((target === 0) && settings.firstSlideSpeed) ? settings.firstSlideSpeed : settings.speed; // changed here
timer = setTimeout(next_slide, slideSpeed); // changed here
} : $.noop;
This should do the trick for you.
Hope it helps!

Display original image using fancybox

I want to display the original image in the popup using fancybox but it doesn't seems to be working. Instead it is resizing the width and height of image and container.
This is what I'm doing :
$("a.fancybox").fancybox({
padding : 0,
height : $(this).attr('data-height'),
width : $(this).attr('data-height'),
autoDimensions: false
});
My link :
<a href="/system/creatives/images/000/000/008/original/new_creative_form.png?1402035793" data-width="1366" data-height="768" class="fancybox">
<img src="/system/creatives/images/000/000/008/thumb/new_creative_form.png?1402035793" class="img-responsive" alt="New creative form">
</a>
Any idea what I should do?
To see the original size of an image you only need to set fitToView to false like :
$(".fancybox").fancybox({
fitToView: false
});
See JSFIDDLE
On the other hand, if you want to manipulate specific dimensions passed through data attributes, then use the beforeShow callback like :
$(".fancybox").fancybox({
fitToView: false,
beforeShow: function () {
this.width = this.element.data("width");
this.height = this.element.data("height");
}
});
See JSFIDDLE
Notice we still nedd fitToView: false.
IMPORTANT :
This is for fancyBox v2.1.5, make sure you download the latest master to be updated.

how to add jquery cycle plugin effect in an application

I am working on jquery cycle.My slider is now working properly .
It should hide all images (only display one image ) .And there will be dots below the image user click dots and it will goes to that selected dot image.
Here is fiddle
http://jsfiddle.net/KJHUp/
$('#s3').cycle({
fx: 'fade',
speed: 2500
});
Add this to
HTML :
<ul id="nav"></ul>
JS:
$('.pics').cycle({
fx: 'fade',
speed: 200 ,
slides: '> img',
pager: '#nav',
pagerAnchorBuilder: pagerFactory
});
function pagerFactory(idx, slide) {
var s = idx > 2 ? ' style="display:none"' : '';
console.log(idx);
return '<li'+s+'>'+(idx+1)+'</li>';
};
Check jsFiddle
NOTE : I have put 1,2,3 number instead of dots, you can change that to dot and also styling of ul

How to make Basic jQuery Slider to stop after 1 loop

I'm using this basic jQuery slider, but like it to stop after 1 cycle and not loop. I don't see that as one of the options for customization. Any idea how to customize on top of it?
http://www.basic-slider.com/
Thanks in advance!
This is what I have so far:
jQuery(document).ready(function($) {
$('#banner-slide').bjqs({
// w + h to enforce consistency
width : 660,
height : 235,
// transition valuess
animtype : 'slide',
animduration : 350, // length of transition
animspeed : 10000, // delay between transitions
automatic : true, // enable/disable automatic slide rotation
// control and marker configuration
showcontrols : false, // enable/disable next + previous UI elements
centercontrols : false, // vertically center controls
nexttext : 'Next', // text/html inside next UI element
prevtext : 'Prev', // text/html inside previous UI element
showmarkers : false, // enable/disable individual slide UI markers
centermarkers : false, // horizontally center markers
// interaction values
keyboardnav : false, // enable/disable keyboard navigation
hoverpause : false, // enable/disable pause slides on hover
// presentational options
usecaptions : false, // enable/disable captions using img title attribute
randomstart : false, // start from a random slide
responsive : false, // enable responsive behaviour
});
});
I have customized and added an option to stop this automatic slider after a loop. Slide change will stop at the last slide. option called 'rotate'. By default, its true. You need to set it as false to avoid next rotation.
Code will be like
$('#banner-fade').bjqs({
height : 320,
width : 620,
responsive : true,
automatic : true,
rotate : false,
});
You can find the updated plugin jquery file on the following links
Basic slider Normal
Minified

Categories

Resources