I installed the supersized plugin for wordpress, which is working great. I have set it up as a slideshow to autoplay without control buttons. Still working great.
Now, my client wants to have certain divs (with content) rotate alongside the background image. So, when supersized shows the first image in the slideshow div1 shows on the page. When the slideshow moves to the second slide, div1 needs to go away and show div2, and so on.
Currently, I can do this by hacking into the supersized.js and add a custom function that passes the current slide number inside the nextSlide() function.
Instead of hacking it, though, I would like to hook into it somehow.
Something like: $.supersized.api.currentslide or something similar.
Would this be possible at all?
Thanks!
This example fits with your Answer:
http://www.cirmiz.eu/supersized/
You need to configure a Theme with the init event and api.options.
In this example in the file supersized.shutter.min.js
Requires supersized 3.2.5 ¡important!
I think you are looking for this variable
$.supersized.vars.current_slide
good luck
Related
I'm working on a website with the FullPage.JS script.
What I want is that the next section slides over the previous one.
See this example
I tried to make the position fixed in css and changed animation values in the jquery.fullpage.js
It should be something simple but i can't find it.
You can create a similar effect with the backgrounds using the background-position:fixed; property as you can see in the backgroundsFixed.html example in fullPage.js examples folder.
But I think you should better change to pagePiling.js, its brother plugin which allows you to do exactly what you want.
I'm begginer in programing. I'm trying to use jquery plugins elevatezoom and bxslider. And I have a little problem.
What I have
When I choose one picture from the box, which was created by bxslider plugin, as I understand, the other became invisible, but still exist at the page (in my example at the left top of the page). And when I mouseover this block, the elevate zoomer plugin understand it as a picture for zooming, and start to zoom it. As a result,the page works incorrectly.
Does anyone know how to solve this problem?
I also can give the link to the live project
Maybe you could try to add a class to the active slide object like here and then create an if statement for active slide objects only.
I need a jQuery scroller to scroll my divs with auto scrolling facility. I am looking for something like jCarousel.
But there are limitations for this. What I want is one which;
1. Scrolls <div>s (or some html elements) and not just images. I may have something like the picture below, to scroll.
It is a text and image combination.
2. It should auto scroll contents
3. The slider should MARQUE continuously and should not rewind to beginning. The slider should not rewind (in the opposite direction) to go for first image/content after the last image/content.
What jcarousel is doing is in autoscroll mode, it shows a set of of images/contents at a time, stop for a while, and then immediately displays the next set. I don't want this and want to autoscroll contents smoothly in a loop. That is, first content should come after last content, in circular loop.
I can provide additional details. just post comments.
Anybody got what I am trying to say and what I want and suggest me a solution?
You can do this without a plugin with some fairly simple jQuery.
See an example here that I put together for another answer:
http://jsfiddle.net/6Dxg6/
Basically, the idea is you clone the contents of a wrapper, and then continually move the contents to the right/left the width of the original content and then reset. Works with any content.
That code even includes hover-stop functionality. Without that, the code is simpler still:
http://jsfiddle.net/qJZtp/1/
Im busy with an mobile website design, but im not that good with javascript. So i would like to have an startup script which i can modify. So i dont know where to start.
What i want to achieve is the following:
When you click on an button/div (onclick function) an div slides up (change margin top/make an invisble div that slides in height). And on the same click an other div slides open. (So the second div isnt shown at first but on click it is shown.
I dont know if this is possible but im sure you guys know if it is.
Kind regards,
Augus
yeah it can be done easily with Jquery. you can even set sliding speed.
you can check this thread and you can do something similar. I have answered in that thread as well.
or you can do it using below function:
jQuery('#div_id_1').slideDown("slow");
jQuery('#div_id_2').slideUp("slow");
I just need to display the images in the very center of the page. The images will be different widths but should still be centered. I have custom arrow pointers and I want the other images to be hidden while the other fades out and a new one in.
I've found jquery cycle and stuff but I couldn't center the slideshow to the center of the page for some strange reason.
Any advice?
What plugins can I alter (just replace images) to get what I want?
http://www.proglogic.com/learn/javascript/lesson10.php
not sure if you are still looking for this, as its been awhile since your post - but this is a very simple slideshow using javascript and a table. the image is displayed with "previous" and "next" links below, which can of course be changed to whatever you want. the only possible issue is that it uses html tables which are frowned upon (unless completely necessary). it is however, very easily center-able using css. good luck!
Checkout Anything Slider. That seems to be what you are looking for.