Develop Reference

Same image across multiple sections and slides fullpage.js

I am using Fullpage.js in my site and would like to use one image for the background for the whole site, where different parts of the image are displayed as different sections and slides are scrolled. So far I have managed to get different parts of the image showing for sections by adding:
<div class="fullpage">
at the top of the body with corresponding CSS:
.fullpage {
background-image: url(../images/background_image.jpg);
background-size: cover;
}
Is there any way to get the image to move sideways as slides are displayed.
Here's a jsfiddle of what I've got so far.

In the end I decided to go a different route and convert the image into tiles. The image tiles are then assigned to the correct slide or section. This allows the image to continue from each slide or section without having to load the whole image at once.

Yep! You'll need to hook into that slider gallery's events.
What plugin are you using? Or did you write it yourself?
Either way, most plugin slide galleries have events like "onSlideStart" or things like that, which you can then use to update your background.
I'd start by writing a script, and setting onSlideStart to a function that calculates what slide the slider is on. Then you simply set your background position (or rather, animate it) to the proper x-value based on what slide you're on (you can figure out the math yourself, yeah?)
Hope this helps! :)

Slider inside image

I would like to put a Slider inside an image (specifically an iMac), like they have on unbounce homepage. I think I need a div and then jQuery, but I have no idea where to start.
The thing is the image inside the Mac changes, but not the iMac image itself.
If that helps, I am using WordPress, so I could use any plugin too.
Do you have any idea on how to do that?
Thank you,
http://i.stack.imgur.com/HVe98.png

I would suggest you to use HTML canvas for complex image rendering.
You can potentially dynamically draw what you want, where you want I'm them.
You can use canvas to rotate, move, overlay images and add listener to click events to it.
See here to start :
Dynamically add image to canvas.
Or here:
Dynamically add image to canvas

Late, but may be helpful (by increasing level of difficulty):
Use the iMac image as a frame PNG, leaving its inside "empty" using transparency. Behind it, the slider
Make a slider which every image is framde by the iMac
Position an slider hovering the iMac image

create image slider that shows part of previous and next image

I'm trying to create a slideshow using jQuery (similar to jquery scrollhorz) but I want the previous and next image partly shown.
Right now, what I have, is a div (with overflow hidden) containing all the images I have. When previous or next button is pressed, I animate the whole div either to left or right. The problem is, if I have many images loaded into the div, it becomes laggy and slow.
What is the best design to implement this image slider?

Without going into the code required, my suggestion would be to use jquery (or moo if that's your thing) to maintain a div that is three to five images long, and keep a list of urls to all the images you want displayed. When you slide the images left or right, you'll pop off the image on the opposite end and add the appropriate image to the other side.
You could use the same technique to loop through the list seamlessly.

Try this.
Hero carousel
It fits your description....Hope it helps out :)
this might be a solution too.
http://jsfiddle.net/JCQ6Q/15/
Vote up if it helps you :) all the best

how to offset the images in the thumbnail panel with next and prev buttons, using core javascript

I am in the process of building a photo gallery - a simple one which has a div with the large-sized image, and a div below this to have say 5 thumbnail images. This lower div would then have a left and right arrow images appropriately placed, which upon clicking will offset the thumbnail container and bring in the next 5 thumbnails. And ofcourse, on clicking the thumbnail, the large image in the div above would also change to reflect the correct image.
I know this is simple, and better galleries can be built using libraries like jquery etc.. but I am in the process of learning Javascript, and want to learn it the hardway instead of using those excellent libraries right away.
I am facing issues in developing the "offsetting" part. How do i keep a track of the first and last thumbnails contained in the thumbnail container, so that the left and right arrow keys can offset and bring the thumbnails appropriately?
Also, please guide me to any resources that let me develop such thumbnail based galleries without using any libraries like jquery. I do not want any fancy effects/ slideshow stuff, just a simple elegant static gallery would do.
Thanks!

You can use element.firstChild and element.lastChild to find the first and last child (thumbnail) inside your div.

JQuery Apple like slider

I have a question related to a JQuery topic. I am using a JQuery slider, as shown in this link
The navigation is controlled by the thumb images. Now I would like to create a link underneath the slider to control the scrolling images. I would like to change the position of the main picture, and the thumb picture position as well, what is used to navigate. Is it possible with a javascript; or do i need to configure a whole new event in my Jquery?
Thanks !

Find here and setup code