JavaScript - Plus Size Image Viewer. Positioning Problem

I'm using the BackBox Script for image viewing on my HTML doc. However, the code is good for the use of one thumbnail with images that can be loaded. What if I want more than one thumbnail image using its own set of images? How can I have multiple thumbnails with their own set of large images to view? Does that make since? Any help would be much appreciated!

Kenneth

I use the tutorial from http://www.javascriptkit.com/script/...geviewer.shtml and create an overlap image viewer.

But whenever I use Firefox or IE to open my webpage, the overlap image viewer is not shown on the website. In other words, only the image link hint is shown when my mouse is over the image. I know when i open the page with java scripts, IE or Firefox will usually has a warning and ask the user if you want to run scripts or ActiveX. But the page with overlap image viewer I created will not invoke any pop-up blocker warnings and at least let a user have an option to see my overlap image.

what should i add to make the overlap image viewer show in a proper way after opening IE or Firefox?

I've used the Backbox Image Viewer from http://www.javascriptkit.com/script/script2/backbox/ on this website for over 3 years and this problem just arose with the update of IE to version 9.

When you click the link to open the gallery, instead of backbox opening normally, a small all white box appears in it's place. No navigation images or gallery images or anything.

You can view the issue here at http://www.joewheelerknifemaker.com and by clicking on "Knives by Joe, Photo Gallery".

I know that this happens on multiple computers using IE9, but works perfectly in Firefox, Safari and Chrome from what I can tell.

Anyone have any ideas or know what IE changed in this version that could be causing this? Thanks in advance.

I need help implementing what appears to be a simple javascript :

http://www.javascriptkit.com/script/...ivviewer.shtml

Quote:
Directions: Add the below script to the HEAD section of your page:

Code:

<script src="DV.js" type="text/javascript">

/***********************************************
* Pagination Combo Box- by Axel Schneider (http://axelschneider.info/)
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
* Please keep this notice intact
***********************************************/

</script>

<script type="text/javascript">
//Define your images using arbitrary variables, to be passed in as arguments later down the page:
var bigbaby = '<img src="bigbaby.jpg" width="1075" height="717" border="0" alt="">'
var pancake = '<img src="food1.jpg" width="300" height="375" border="0" alt="">' 

</script>
<script src="DV.js" type="text/javascript">

/***********************************************
* Pagination Combo Box- by Axel Schneider (http://axelschneider.info/)
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
* Please keep this notice intact
***********************************************/

</script>

<script type="text/javascript">
//Define your images using arbitrary variables, to be passed in as arguments later down the page:
var bigbaby = '<img src="bigbaby.jpg" width="1075" height="717" border="0" alt="">'
var pancake = '<img src="food1.jpg" width="300" height="375" border="0" alt="">' 

</script>
<script src="DV.js" type="text/javascript">

/***********************************************
* Pagination Combo Box- by Axel Schneider (http://axelschneider.info/)
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
* Please keep this notice intact
***********************************************/

</script>

<script type="text/javascript">
//Define your images using arbitrary variables, to be passed in as arguments later down the page:
var bigbaby = '<img src="bigbaby.jpg" width="1075" height="717" border="0" alt="">'
var pancake = '<img src="food1.jpg" width="300" height="375" border="0" alt="">' 

</script>
<script src="DV.js" type="text/javascript">

/***********************************************
* Pagination Combo Box- by Axel Schneider (http://axelschneider.info/)
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
* Please keep this notice intact
***********************************************/

</script>

<script type="text/javascript">
//Define your images using arbitrary variables, to be passed in as arguments later down the page:
var bigbaby = '<img src="bigbaby.jpg" width="1075" height="717" border="0" alt="">'
var pancake = '<img src="food1.jpg" width="300" height="375" border="0" alt="">' 

</script>

You also need to download the below external JavaScript file:

DV.js

Then, to create a link that pops up an image when clicked on, do the following:

Code:

<a href="#" onClick="dv.showDV(pancake); return false">pancakes</a>

Where pancake is the variable containing the image tag to be shown (see code in your HEAD section.

Obviously this works on image links as well.
I do not need a text link, I want the image to be displayed on a mouse click over the thumbail. I have tried to incorporate the HTML as follows :

Code:

<html>
<head>
<TITLE>Test</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META NAME="Description" CONTENT="Test">


/***********************************************
* Pagination Combo Box- by Axel Schneider (h**p://axelschneider.info/)
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
* Please keep this notice intact
***********************************************/

</script>

<script type="text/javascript">
//Define your images using arbitrary variables, to be passed in as arguments later down the page:
var image = src="Images/SNICTI__Stationery_1_by_caprozo.jpg" width="2133" height="1600" border="0" alt="">'
</script>
</head>

<body bgcolor="#000000" text="#000000">

<body bgcolor="#000000" vlink="#000000" alink="#0000FF" link="#000000">
<font size="3" face="Tahoma">
<div align="center">
  <center>

<p>
<img src="Images/SNICTI__Stationery_1_by_caprozo_small.jpg" width="100" height="100" border="0"></p>
</center> 
</div>

</font>
<p>
</body>
</html>

Overlapping Image Viewer Script
http://www.javascriptkit.com/script/...geviewer.shtml

It works perfectly. Just as advertised. It currently changes the images with the mouse over and out effect.

But I would like to change it so that the visitor must click on the thumbnail image to enlarge it and to click on the enlarged image to send it back to thumbnail size.

It would also be helpful to have the enlarged image appear about 25 px below the top of the thumbnail while remaining flush with the left side.

Thank you for your time .... viki barefoot

Just curious if anyone has a crossbrowser version of the Popup Image Viewer script that's in the Post a JavaScript section. Seems that all of the ones in there (original and modifications) are browser specific, whereas I need something that will work for all browsers, or at least IE and firefox.

i have image button i need to display image .if the size of the image button is 100*100 and image size is 50*50 .the remaining space of the image button should be empty.the image should not stretch.

can any one guide me i am new to programming

Thanks in advance!!!

QUESTION 1:

Hello. I would like to know if this is possible with Javascript, and if yes, if someone can please provide me with the code or point me in the right direction.

Let me start of by saying that this is for an eBay listing. I know that they accept basic / limited javascript and if what I am asking is possible, I hope that it can work on eBay listings.

I would like to know if it's possible to determine the dimensions of an image with Javascript from an Image url, and to then resize it or not based on the the size of the image.

So, let's say this is the URL: www.adomainname.com/image.jpg

and let's say that image is 1400 px x 1400 px. I would first like the javascript code to detect that size. I also would like the maximum dimension for any side of the image to be 600 px. If both sides of the image are over 600 px, for both sides to be reduced proportionally to 600 px or lower. If any one side of the image is larger than 600 px, the image is to be resized to 600 px or lower. If both sides are under 600 px, the image is to not be reduced. It would also be nice if it can detect whether the image is portion or landscape based on I guess the larger side, because an image at 600 px in height might be too big, but in width might be o.k.

So, in this example (the 1400 px by 1400 px), the image is to be resized to 600 px x 600 px.

For an image that's 300 px x 500 px, it should remain as such.

For an image that's 400 px x 700 px, it should be resized to 400 / (700 / 600) px by 600 px, which is approximately 343 px x 600 px.

I have looked a bit into this and I see things being mentioned about the image being loaded first completely on the screen, or about using server side language like PHP, and so on, but like I said, keep in mind that this is for eBay, and so I am limited.

Note: The part that I am most interested in is in being able to detect the size / dimensions of the image.

QUESTION 2:

On a side note, does anyone know if it's possible to have a Javascript enlarging function for images, in which when one clicks on an image, it is enlarged, but either in a popup window that's smaller than the one behind it, and possibly centered, or by making the background go dark and then bringing up the enlarged image (is the latter done with Javascript; I have seen this effect for a while now and have always wondered.)

Hello,

How can we calculate size of image by using javascript ?

Thanks in advance

I have a form that allows photos to be uploaded. I am using Perl to do this, and it works fine. Now I want to validate that the size of the image does not exceed a certain limit BEFORE it actually uploads. I can do that in Perl using something like the code below. But, I would rather do this in Javascript. I already have a routine that validates that the image file name does not contain embedded spaces. I would like to add this there.

Can this be done in Javascript?

Code:

if ($ENV{'CONTENT_LENGTH'} > 100000) { print "SIZE EXCEEDS LIMIT!" }

hello friends I'm a newbie..

I need a little help. Im using big images in my website. I want a javascript to toggle the image size from "Original size to fit with resolution of screen" and vice versa.


It should be onclick function like this

<img id="blahblah" src="myimage.jpg" onClick="resize();" />

Hello

I was looking for a javascript code to show an image in full size on moueover, I use this script on the site Code:

function ShowPicture(id,Source) { 
if (Source=="1"){ 
if (document.layers) document.layers[''+id+''].visibility = "show" 
else if (document.all) document.all[''+id+''].style.visibility = "visible" 
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible" 
} 
else 
if (Source=="0"){ 
if (document.layers) document.layers[''+id+''].visibility = "hide" 
else if (document.all) document.all[''+id+''].style.visibility = "hidden" 
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden" 
} 
}

CSS code i use:
Code:

<style type="text/css"> 
#Style { 
position:absolute; 
visibility:hidden; 
border:solid 1px #CCC; 
padding:5px; 

} 
</style>

On the site to to body I put this html code:
Code:

<a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a> 
<div id="Style"><img src="/sites/default/files/peroulades.jpg"></div>

When Im hovering over the link image is shown full size,

Problem: if you take a look: http://www.online-dovolenka.sk/dovolenka_korfu

if hover over both links "Click Here To Show Image" you will see same image, but I put two different images? where is the problem? any ideas?
Code:

<a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a> 
<div id="Style"><img src="/sites/default/files/peroulades.jpg"></div> 
 
<a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a> 
<div id="Style"><img src="/sites/default/files/pantokrator.jpg"></div>

Hi,

I'm new here and trying to get some basics via examples.

On this page http://www.gilariverwoodworks.com/kitchens.htm

I have thumbnails in a table.
Immediately below the table is a full sized image of thumb 1.
I want to mouseover the thumbs and have the respective full size images swap.
The thumbs remain as is.

All the thumbs are the same file as the full size image but resized.

If moused over, the new image should remain until the next thumb is moused over - ie no autoclose or return to original image.
The viewer should be able to move around the page without having the image change til the next mouseover

All the images are the same size

Can someone offer or direct me to a script that will do this?

TIA

mr johnson

Hi. Sort of new to Javascript.

I am implementing a zoom in feature, but actually tricking the user as a full screen image is simply being stretched.

I plan to apply it to several pages, and don't really fancy working out the pixels for each.

I believe that if you simply put width: 150% height 150% it will change the image size relative to the browser. I don't want that, I want it relative to the original image size. Could I do sort of height*1.5 or something? How would I write that if so? Thanks!

Code:

<script>

$('#in').click(function() {
  $('#drag img').animate({
    width: '150%',
	height: '150%',
  }, 5000, function() {
    // Animation complete.
  });
}); 
</script>

Hello all,


Essentially what I am trying to get without much success on the issue is this:

I want an icon in my template that, when you click on that certain icon (image), a drop down menu appears. You know when you click the file option in your browser's toolbar, and a drop down menu appears? It can be just like that, but instead of save as and open, links will be there to places within our intranet opened in a new window.

This has to work for IEX 7+ because that's all our company decides to use. I tried to submit a chang erequest for them to move to a better CSS/Javascript supportive browser such as Opera, Firefox, Google Chrome... but they're way too fixed on IEX for some odd reason.

I am obliged for any help on this.

*edit* colors dont matter. It can be the default colors used in a basic drop down menu. I figure javascript would have more options though.