Develop Reference

Basic "manga reader"-like carousel of images

I have several pages of a manga in .png format, around 300, and I would like to set up a section on my website so that users can read the manga, browsing through the pages using two arrows ("next page" and "previous page"). I don't care about animations between pages. The perfect example of what I want to achieve is MangaFox (not the whole website, just the window where you can read the manga).
The basic setting is: a 300px wide menu with the chapters list on the left, and manga pages appearing to the right. Either in the menu or below where the manga page img, two arrows let you go to the previous or next page.
I thought about using iframes: links to HTML pages containing each manga page would target the iframe and appear in it. However, this requires me to ceate an HTML page for each page, and set the links to the previous and next page manually. I would have 300 html pages, so this would be too heavy and time consuming.
I also tried linking the chapters list directly to the .png files, but the images are not styled as I would like (at least in Chrome, they don't appear in the center of the page, but rather in the upper left corner) and I would still have to set the previous and next arrows link manually.
Whai I dream of is:
- there's a list of the .png files, that sets a fixed order for the pages;
- a dropdown list in the left menu can point directly to a certain page in the list;
- the previous and next arrows recognize which image is being shown, and a click on the arrows skips to the next or previous item on the list. If there's no page before the current one, the "previous" arrow disappears; same for the "next" arrow in case the item is the last on the list.
Maybe there's a way simpler way to do it I didn't think of, but I can't find it.
Thank you in advance for your help!
(P.S.: I'm not using WordPress, just plain HTML, CSS and PHP)

Here's the simplest way I can think of doing this:
Left arrow
<a id="leftArrow" href="#{n-1}"></a>
Right arrow
<a id="rightArrow" href="#{n+1}"></a>
Set up onhashchange function that reads location.hash and sets the src attribute of the img element utilizing an array of pages you've defined somewhere:
window.onhashchange = function(){
var img = document.query('img');
var left = document.query('#leftArrow');
var right = document.query('#rightArrow');
var pageNumber = parseInt(location.hash);
//put some error handling here for edge cases, then...
img.src = imagesArray[pageNumber];
left.href = '#' + (pageNumber - 1);
right.href = '#' + (pageNumber + 1);
};
The page links in your side menu would have href="#{page number}" and would trigger the onhashchange function when clicked, updating the image and the arrows.
Hope this helps.

Clear main image in gallery on mouseout of thumbnail?

I'm using script found here:
Automatically load an image using javascript
I'm using them to build image gallery where the main image loads thumbnail image on mouseenter, but my main image begins blank not with the first thumbnail as in the answer. I need to know how to clear the main image back to blank on mouseout of each thumbnail?

Try JQuery .mouseout() like this:
$('.thumbnails img').mouseout(function () {
this.src = '';
});
Click http://jsfiddle.net/cnx65ev0/ to see it running. Hover over the images and when you leave them, they become blank. I hope this is what you wanted.

Javascript expandme image click

I am using https://github.com/nigma/jquery-expandme plugin in for my page, here is the example
Everytime when you click the bottom grey area, the background image expands to full, and click the grey area again, it collapses to the top part of the image.
This is what I'd like to achieve:
I'd like to keep the up and down arrow function as it is, and to make the click happen on the image itself as well so it is easy for people to use.
1) The down arrow should still show on the bottom when it is the top part of image, so you can either click on the image itself or the down arrow to expand.
2) After it expands to full image, the up arrow should show down the bottom. So you can either click on the image or the up arrow to collapse it to the top image.
I have been trying for a while, but no success. Can some please point me to the right direction?
Thank you,
S:)

EDIT : i think i got it wrong the first time ..
Edit : please follow the link below .
https://github.com/codeiz/jquery-expandme
i have updated the plugin and now it allows more than one controller
but now you have to pass an array as an argument please look at the documentation

I think you can change this expandToggleClass to "exmandme" :
// Class added to expanded element
expandToggleClass: 'expand-toggle', // Class for anchor element that triggers

Supersized Full Screen Slider API

http://buildinternet.com/project/supersized/
I'm having trouble figuring out the javascript that goes along with this jquery plugin. What I'm trying to do is merge this with more js plugins, namely, an accordion plugin I have. The end goal is to essentially have two instances of Supersized running on one screen with the same controls, different images. I know, hard to envision but here's an example.
The body is full screen background with Supersized, the image is image1.jpg and it's black and white. Then, I have a smaller div, 960px wide in the center of the body, with an accordion of all the images I want, but in color. So as you change the accordion, you change the background. So when you have image1.jpg in color in the accordion box, the background of body is image1.jpg black and white.
So I'm having trouble because the js for supersized seems to only define a prev and next thumbnail, not ALL the thumbnails. So in theory I would have to figure out how to disoplay all thumbnails and then figure out how to alter these thumbnails' images so that it is still controlling the slide transitions, but not actually the thumbnails for the background. In that way, I can then set the accordion slides to those thumbnails instead but have them control both the accordion and the background.
I'm sure I'm being very confusing right now, so if you have any questions, ask away. Thanks.

Lets see if i got your question right,
if you're looking for a way to change the background image (used by supersized) on clicking on a div or something, then there are many ways to do it.
The following code may help you out, it will replace the active slide image name with a '-bw' in the end of it.
for example : clicking on a div with a class name 'click-me' will change the background image from 'image.jpg' to 'image-bw.jpg'
function changeBg() {
var $supersizedImg = $("#supersized .activeslide img"),
imgSrc = $supersizedImg.attr('src');
imgSrcArray = imgSrc.split('/'); //split the image source by '/'
fullFileName = imgSrcArray[imgSrcArray.length - 1]; //get the file name
fileName = fullFileName.split('.'); //split that file name by '.'
fileName[0] = fileName[0] + '-bw'; //grab the first array element(which is filename without extension and add a '-bw' in the end)
fileName = fileName.join('.'); //join the new file name with its extension with a '.'
imgSrcArray[imgSrcArray.length - 1] = fileName; //add the new file name the the last element of imgSrcArray.
imgSrcArray = imgSrcArray.join('/'); //join the whole url by '/'
$supersizedImg.attr('src', imgSrcArray); //add the new url to the img src of supersized
}
$('.click-me').on('click', changeBg); //call changeBg function when a div is clicked
hope it helps.

How to keep div focus when the mouse enters a child node

So I have this page here:
http://www.eminentmedia.com/development/powercity/
As you can see when you mouse over the images the div slides up and down to show more information. Unfortunately I have 2 problems that i can't figure out and I've searched but haven't found quite the right answer through google and was hoping someone could point me in the direction of a tutorial.
The first problem is that when you mouse over an image it changes to color (loads a new image), but there's a short delay when the image is loading for the first time so the user sees white. Do I have to preload the images or something in order to fix that?
My second problem is that when you move your mouse over the 'additional content area' it goes crazy and starts going up and down a bunch of times. I just don't have any idea what would cause this but i hope one of you will!
All my code is directly in the source of that page if you would like to view the source.
Thanks in advance for your help!

Yes, you have to preload the images. Thankfully, this is simple:
var images_to_preload = ['myimage.jpg', 'myimage2.jpg', ...];
$.each(images_to_preload, function(i) {
$('<img/>').attr({src: images_to_preload[i]});
});
The other thing you have to understand is that when you use jQuery you have to truly embrace it or you will end up doing things the wrong way. For example, as soon as you find yourself repeating the same piece of code in different places, you are probably doing something wrong. Right now you have this all over the place:
<div id="service" onmouseover="javascript:mouseEnter(this.id);" onmouseout="javascript:mouseLeave(this.id);">
Get that out of your head. Now. Forever. Always. Inline javascript events are not proper, especially when you have a library like jQuery at your disposal. The proper way to do what you want is this:
$(function() {
$('div.box').hover(function() {
$(this).addClass('active');
$(this).find('div.slideup').slideDown('slow');
}, function() {
$(this).removeClass('active');
$(this).find('div.slideup').slideUp('slow');
});
});
(You have to give all the #industrial, #sustainable, etc elements a class of 'box' for the above to work)
These changes will also fix your sliding problem.

I can see your images (the ones that are changing) are set in the background of a div. Here is a jquery script that preloads every image found in a css file. I have had the same problem in the past and this script solves it. It is also very easy to use:
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
I will take a look at your other problem...

1) You should be using the jquery events to drive your mouseovers. Give each div a class to indicate that its a category container and use the hover function to produce the mouseover/mouseout action you're after.
html
<div id="industrial" class="category"></div>
Javascript
$(".category").hover(
function () {
$(this).find('.container').show();
},
function () {
$(this).find('.container').hide();
}
);
I simplified the code to just do show and hide, you'll need to use your additional code to slide up and slide down.
2) Yes, you need to preload your images. Another option would be "sprite" the images. This would involve combining both the black and white and colour versions of each image into a single image. You then set it as the div's background image and simply use CSS to adjust the background-position offset. Essentially, sliding instantly from the black and white to colour images as you rollover. This technique guarentees that both images are fully loaded.