Develop Reference

Why do pictures need to be shown first for jquery image magnifier to work?

I'm working on a website that hosts music, pictures, and videos. I currently have 4 pages, a title page, a music page, a video page and an image page. This works well, but I would like to be able to incorporate the ability to play music and look at pictures at the same time. To do this, I created one HTML document with each former page inside a div with a descriptive class name. Then, I wrote a javascript function that shows and hides each div when it is called, so the page acts like it's 4 pages but it isn't. So i embedded the music player in a footer div that stays open as music plays, meaning you can switch back and forth between each media type while keeping the music footer open and playing. This is where the problem lies. When this is done, the image magnifier jquery function I used on my image page no longer works correctly, UNLESS the image div is shown at the beginning when the page opens. It's only then that you can switch between media types and still magnify the pictures. If the title div is shown first (like it's supposed to be), and you go to try and magnify an image, it doesn't work.
At first I thought maybe some of the external javascript libraries were negatively interacting with each other, but then I happened upon what I explained above and now I'm just at a loss as to why the images need to be the first things displayed for the magnifier to work correctly.
The jquery code I'm using is called jQuery Image Magnify and it's made by Dynamic Drive.
Edit: The way that I'm hiding and show div's is with style="display:none" to hide and style="display:block" to show.

Interesting question. Probably because the element needs to be actually visible for the jQuery Image Magnify function to run. I'm willing to bet that plugin uses imageElement.onload for the image magnification handler or something like that, which I think doesn't work if the image element is hidden.
As far as a solution goes, try setting your image to visible at when the page first loads, maybe with left set to -9999 px or something silly like that so it's technically still "visible" but the user can't see it. Then, after the image has loaded and (hopefully) been magnified or whatever the plugin does, move it to be a child of the div its page is supposed to be on and get rid of the negative left value.

Javascript / css photo pop-up feature placement issues

I've used this site many times to find answers to my questions, but I can't seem to find an answer to my current issue. Any help would be great!
I'm using a custom photo pop-up feature add-on in Magento called TopUp. I contacted the original writer of the code and have not received a response. I Googled the issue and other users with Magento 1.6 and 1.7 are having the same issue.
When you click on a product image when viewing a product details page, the image should popup in the middle of the screen. Well, right now, the image pops up toward the bottom of the screen and when you click next or back, it re-positions itself further down.
Here's an exact link to a product where this applies (development site):
http://www.childress-media.com/shapingheartsforgod.org/index.php/shaping-hearts-series/pre-k-through-5th-grade/all-things-made-new/all-things-made-new-student-workbook-level-1.html
Here's the link to the Javascript pop-up program:
http://www.childress-media.com/shapingheartsforgod.org/skin/frontend/base/default/js/top_up/top_up-min.js
I've tried messing around with the CSS here and there within the file - but I can't make it do what I want.
Ideally, the pop-up would appear 100px from the top of the page and be centered and stay centered when you press next or previous.
Any help you guys can provide would be much appreciated. Thanks!

An easy, but raw way to do this is setting a css style, like:
document.getElementById('top_up').style.top = '100px';

How do I create a content area (image gallery) that scrolls on mouseOver

I was looking to create an image gallery in my blog. However, I was wondering how possible it would be for the gallery to scroll through my images on mouseOver. Basically, when the user moves his/her mouse up or down the image gallery, the images scroll up or down accordingly.
I have seen a few examples where it has been done in flash, but i was wondering if it was possible for it to be done in Javascript. An example of what I am talking about can be seen on deep.co.uk. This example is constructed in flash and allows the user to skim through the agency's portfolio by moving the mouse up and down the div. I am aware that loads of free javascript alternatives are online, but i haven't managed to find anyone that does it on mouseOver. I would appreciate it if someone has come across something like this or has used something like this in one of their projects.
Thanks in advance.
Yours sincerely,
Seedorf

Maaki has i nice version here:
http://www.maaki.com/thomas/SmoothDivScroll/
supports mouse hot spot scrolling, and auto start/stop

Here is a script which scrolls content vertically onMouseOver.
http://www.dyn-web.com/code/scroll/demos.php

Image previewer for webpages

I am creating a webpage in html with php.
I want the user to be able to click on a small icon image. When the icon is clicked a preview of a larger image appears.
Guessing the solution probably involves javascript or flash. Can you point me to the right direction. Thanks in advance.

It sounds like you want a Lightbox?
A Lightbox allows you to have thumbnails of images on your page and when a user clicks on them, the larger image will popup in the middle of the screen. It's very common.
If what you are really looking for is a show/hide effect, you could use JavaScript to show the larger image if the user clicks on the smaller image. A JavaScript library like jQuery or YUI will make it very easy.

If you're doing it in php, then may as well use GD to do it for you.
Here's an excellent article to get you started: http://icant.co.uk/articles/phpthumbnails/

Need Images to maximize on mouseover in HTML pages

I m have thumbnail images in a table and on mouseover the image i should get as blow up and on mouseout it should be normal thumbnail. and i even need to navigate on clicking the Blowup image.
plz guide me with the code of how to do it using javascript or using CSS
I need some thing as in this website : link text

Have a look at the jQuery Plugins, you could probably configure the ThickBox plugin?

Or a pure CSS implementation, doesn't work on IE6 though.
CSS Light Box

question: do you have two pics? One for thumbnail one for enlarged pic? or only one image that changing size?
do u want it gradually maximize or instantly become large?
For 1st case, just do:
function mouseOverFun() {
document.getElementById('imageName').src = "largeImage.jpg";
} // just do the reverse for mouseOut event.
for 2nd case, if it enlarge gradually, look at jQuery.
if not, just change the element size.

jQuery, or any other Javascript library has a host of things you could use to make a fancy gallery.
Try this site:
http://flowplayer.org/tools/index.html
Take a look at the demos pages; excellent ideas for what you're looking for.