JavaScript - Mouseover Images With Galleria Photos

The code below allows the user to hover over 1 object and it not only replaces the object but also shows an additional object between the buttons.

It works great in Firefox, but does not in Internet Explorer.

HELP

webpage: http://www.isp.ucar.edu/

------------
standard mouseover commands are used in index.php
<CODE>
<a href="http://www.tiimes.ucar.edu/beachon/" onMouseOver="imgOn('img1')" onMouseOut="imgOff('img1')">
<img src="images/buttons/button-beachon.gif" alt="BEACHON" width="181" height="74" border="0" id="img1" /></a>
</CODE>
------------

<CODE>
if (document.images) {

img1on = new Image();
img1on.src = "images/buttons/button-beachon-on.gif";
img1off = new Image();
img1off.src = "images/buttons/button-beachon.gif";

img2on = new Image();
img2on.src = "images/buttons/button-bgs-on.gif";
img2off = new Image();
img2off.src = "images/buttons/button-bgs.gif";

img3on = new Image();
img3on.src = "images/buttons/button-iam-on.gif";
img3off = new Image();
img3off.src = "images/buttons/button-iam.gif";

img4on = new Image();
img4on.src = "images/buttons/button-nvia-on.gif";
img4off = new Image();
img4off.src = "images/buttons/button-nvia.gif";

img5on = new Image();
img5on.src = "images/buttons/button-utls-on.gif";
img5off = new Image();
img5off.src = "images/buttons/button-utls.gif";

img6on = new Image();
img6on.src = "images/buttons/button-water-on.gif";
img6off = new Image();
img6off.src = "images/buttons/button-water.gif";

img7on = new Image();
img7on.src = "images/buttons/button-exploratory-on.gif";
img7off = new Image();
img7off.src = "images/buttons/button-exploratory.gif";


// second image that does not appear in original button space
img1ad = new Image();
img1ad.src = "images/buttons/beachon-overview-sm.gif";

img2ad = new Image();
img2ad.src = "images/buttons/bgs-overview-sm.gif";

img3ad = new Image();
img3ad.src = "images/buttons/iam-overview-sm.gif";

img4ad = new Image();
img4ad.src = "images/buttons/nvia-overview-sm.gif";

img5ad = new Image();
img5ad.src = "images/buttons/utls-overview-sm.gif";

img6ad = new Image();
img6ad.src = "images/buttons/water-overview-sm.gif";

img7ad = new Image();
img7ad.src = "images/buttons/exploratory-overview-sm.gif";
}




{
function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "on.src");
document["holder"].src = eval(imgName + "ad.src");
}
}



}
function imgOff(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "off.src");
document["holder"].src = "images/buttons/isp-overview-sm.gif";
}
}


</CODE>

Hi there,

I'm hoping someone can help me... I am using Galleria (http://galleria.aino.se/) for a friend's website but I just can't get it to work... I haven't used JavaScript or JQuery much and it's driving me mad!!

I've followed all the instructions on the site, and lots of examples I have found all over the web... This one was most successful - http://monc.se/kitchen/stew/galleria/ the furthest I have been able to get is thumbnails showing, but when you click on them you can't see the gallery - see he

http://lisacritcher.skillsontoast.co.uk/?page_id=28

I know the formatting is all off but I'm not worried about that for now... I just want to get the gallery working!! Can anyone help?

Thanks in advance

Hello,

Im not sure if anyone here will be able to help me but I thought it would be worth a shot.

I am trying to use galleria for a project of mine. The gallery works fine - it brings the images in (from flickr) but only in the order that they have been added. I would like them to bring the images in using the sets I have used within flickr.

I have managed to load one set using getSet but I would like it to load all sets in set order. (hope that makes sense).

If anyone has experience with this or can point me in the right direction it would be much appreciated.

Thanks in advance for any help/advice.
Regards
Mark Booth

Hi. I am trying to set up a photo gallery on a website using the Galleria Javascript. I managed to setup one gallery but I don't know the code to setup another or another two galleries on the same one page. Can anyone help me urgently? When I try to post the code twice, it gives an error message.

The java script code is below:

Code:

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="galleria/galleria-1.2.5.min.js"></script>

</head>

<body>
<div align="center">
<div id="gallery">            <img alt="Admin team." src="http://www.raisingsistersconference.info/galleria/themes/classic/images/photo1.jpg" />            <img alt="Ladies In Session!" src="http://www.raisingsistersconference.info/galleria/themes/classic/images/photo2.jpg" />            <img alt="Ladies in Worship." src="http://www.raisingsistersconference.info/galleria/themes/classic/images/photo3.jpg" />        </div></div>
<script>            Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');            $("#gallery").galleria({                width: 540,                height: 540            }); </script></div>

</body>
</html>

I am still new to programming and so have no idea in how to adapt this script to make two or three galleries on the same page. The website address is:
http://www.raisingsistersconference....togallery.html

Thanks so much.

Hi, I am working on this site galleria and it seems that on some IE browsers on my client's computers, especially on his Vista, the Thumbnails are not showing up or loading fully and/or showing black with "error" in the spaces. On my firefox and safari I see the galleria images and scrolled text extending down the page briefly while the page is loading... Is this a JS issue or just a large image loading-time issue? I do not know JS and had adopted the JS code from another site so I am thinking there must be some errors in my JS settings.

Secondly, can someone recommend a website that I could find the code and tutorial on how to install a simple JS scrolling marquee like the one I have on the site (which is hacked html right now) that will load quickly etc?

Here is the site:
<http://eagleeyeco.com/TEST/homes.html>

Thanks!

Okay, 3 questions I'm afraid, all in reference to the JQuery Galleria on this page: http://digital.tmhcentral.com/pratt/a...

Apologies for my explanations as I am a newby to anything beyond html & css.

1. I have a number of images placed in my html page simply using the img tag. When the page is loading I see these images stacked (full size) for a few seconds before galleria loads and then begins to convert them into thumbnails. Any idea how to hide the images on the page but only to appear in the galleria as the images start to load as thumbnails?

2. I wish to have the same 5px (horizontal) gap between each thumbnail. However my images are of different sizes and have been optimized to a max width or max height. I do not wish for the thumbnails to be cropped so have set: thumb_crop: false, This has now visually created an inconsistent horizontal space between each thumbnail (highlighted in pink to show the gap left and right of each one). I have already attempted to change the thumbnail width to auto in the css, but with no success. How do I remove the 'excess' left & right space from each thumbnail so that the gap appears consistent?

3. Lastly, upon page load, is it possible to hide the main stage image until a thumbnail is selected? I wish to initially display some text (where the main image sits) which is then replaced with the main image when the user clicks on one of the thumbnails.

I would appreciate help on any of the above.

Thanks in advance, Paul

Hello
I Don't have any experience with JavaScript, I found this on internet for photo slideshow. My problem can't add more than 5 photo, I appreciate if someone can help me. here Javascript and HTML code
Code:

var slideShow=function(){
	var bxs,bxe,fxs,fxe,ys,ye,ta,ia,ie,st,ss,ft,fs,xp,yp,ci,t,tar,tarl;
	ta=document.getElementById(thumbid); ia=document.getElementById(imgid);
	t=ta.getElementsByTagName('li'); ie=document.all?true:false;
	st=3; ss=3; ft=10; fs=5; xp,yp=0;
	return{
		init:function(){
			document.onmousemove=this.pos; window.onresize=function(){setTimeout("slideShow.lim()",500)};
			ys=this.toppos(ta); ye=ys+ta.offsetHeight;
			len=t.length;tar=[];
			for(i=0;i<len;i++){
				var id=t[i].value; tar[i]=id;
				t[i].onclick=new Function("slideShow.getimg('"+id+"')");
				if(i==0){this.getimg(id)}
			}
			tarl=tar.length;
		},
		scrl:function(d){
			clearInterval(ta.timer);
			var l=(d==-1)?0:(t[tarl-1].offsetLeft-(ta.parentNode.offsetWidth-t[tarl-1].offsetWidth)+10)
			ta.timer=setInterval(function(){slideShow.mv(d,l)},st);
		},
		mv:function(d,l){
			ta.style.left=ta.style.left||'0px';
			var left=ta.style.left.replace('px','');
			if(d==1){
				if(l-Math.abs(left)<=ss){
					this.cncl(ta.id); ta.style.left='-'+l+'px';
				}else{ta.style.left=left-ss+'px'}
			}else{
				if(Math.abs(left)-l<=ss){
					this.cncl(ta.id); ta.style.left=l+'px';
				}else{ta.style.left=parseInt(left)+ss+'px'}
			}
		},
		cncl:function(){clearTimeout(ta.timer)},
		getimg:function(id){
			if(auto){clearTimeout(ia.timer)}
			if(ci!=null){
				var ts,tsl,x;
				ts=ia.getElementsByTagName('img'); tsl=ts.length;x=0;
				for(x;x<tsl;x++){
					if(ci.id!=id){var o=ts[x]; clearInterval(o.timer); o.timer=setInterval(function(){slideShow.fdout(o)},fs)}
				}
			}
			if(!document.getElementById(id)){
				var i=document.createElement('img');
				ia.appendChild(i);
				i.id=id; i.av=0; i.style.opacity=0;
				i.style.filter='alpha(opacity=0)';
				i.src=imgdir+'/'+id+imgext;
			}else{
				i=document.getElementById(id); clearInterval(i.timer);
			}
			i.timer=setInterval(function(){slideShow.fdin(i)},fs);
		},
		nav:function(d){
			var c=0;
			for(key in tar){if(tar[key]==ci.id){c=key}}
			if(tar[parseInt(c)+d]){
				this.getimg(tar[parseInt(c)+d]);
			}else{
				if(d==1){
					this.getimg(tar[0]);
				}else{this.getimg(tar[tarl-1])}
			}
		},
		auto:function(){ia.timer=setInterval(function(){slideShow.nav(1)},autodelay*1000)},
		fdin:function(i){
			if(i.complete){i.av=i.av+fs; i.style.opacity=i.av/100; i.style.filter='alpha(opacity='+i.av+')'}
			if(i.av>=100){if(auto){this.auto()}; clearInterval(i.timer); ci=i}
		},
		fdout:function(i){
			i.av=i.av-fs; i.style.opacity=i.av/100;
			i.style.filter='alpha(opacity='+i.av+')';
			if(i.av<=0){clearInterval(i.timer); if(i.parentNode){i.parentNode.removeChild(i)}}
		},
		lim:function(){
			var taw,taa,len; taw=ta.parentNode.offsetWidth; taa=taw/4; 
			bxs=slideShow.leftpos(ta); bxe=bxs+taa; fxe=bxs+taw; fxs=fxe-taa;
		},
		pos:function(e){
			xp=ie?event.clientX+document.documentElement.scrollLeft:e.pageX; 
			yp=ie?event.clientY+document.documentElement.scrollTop:e.pageY;
			if(xp>bxs&&xp<bxe&&yp>ys&&yp<ye){
				slideShow.scrl(-1);
			}else if(xp>fxs&&xp<fxe&&yp>ys&&yp<ye){
				slideShow.scrl(1);
			}else{slideShow.cncl()}
		},
		leftpos:function(t){
			var l=1;
			if(t.offsetParent){
				while(1){l+=t.offsetLeft; if(!t.offsetParent){break}; t=t.offsetParent}
			}else if(t.x){l+=t.x}
			return l;
		},
		toppos:function(t){
			var p=0;
			if(t.offsetParent){
				while(1){p+=t.offsetTop; if(!t.offsetParent){break}; t=t.offsetParent}
			}else if(t.y){p+=t.y}
			return p;
		}
	};
}();

window.onload=function(){slideShow.init(); slideShow.lim()};



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>AJAX Photo Gallery</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="gallery">
  <div id="imagearea">
    <div id="image">
      <a href="javascript:slideShow.nav(-1)" class="imgnav " id="previmg"></a>
      <a href="javascript:slideShow.nav(1)" class="imgnav " id="nextimg"></a>
    </div>
  </div>
  <div id="thumbwrapper">
    <div id="thumbarea">
      <ul id="thumbs">
        <li value="1"><img src="thumbs/1.jpg" width="149" height="100" alt="" /></li>
        <li value="2"><img src="thumbs/2.jpg" width="149" height="100" alt="" /></li>
        <li value="3"><img src="thumbs/3.jpg" width="149" height="100" alt="" /></li>
        <li value="4"><img src="thumbs/4.jpg" width="149" height="100" alt="" /></li>
        <li value="5"><img src="thumbs/5.jpg" width="149" height="100" alt="" /></li>
        <li value="5"><img src="thumbs/6.jpg" width="149" height="100" alt="" /></li>
      </ul>
    </div>
  </div>
</div>

<script type="text/javascript">
var imgid = 'image';
var imgdir = 'fullsize';
var imgext = '.jpg';
var thumbid = 'thumbs';
var auto = true;
var autodelay = 5;
</script>
<script type="text/javascript" src="slide.js"></script>

</body>
</html>

I would like to have a code on my page that causes two or more photos to change between each other. For example, photo 1 is shown for a little while, then it switches to photo 2, etc. I would also like to switch text that goes along with the photos. I would like my layout to look like this:

Photo / Text about Photo

and have both switch after a little while, to the next photo and text.

Hope this makes sense. Thanks in advance!

All,
I'm trying to have a user upload a photo and then crop the image if they so desire. I want them to be able to select the selected area and then basically use PHP to create the new image. I found a script like this:

http://www.dhtmlgoodies.com/index.ht...ipt=image-crop

I was just wondering if anyone has any other recommendations or a better way to go about doing this? Thanks in advance for any help.

Hi All!

I'm somewhat new to CSS/Javascript but need assistance finding code that will help me accomplish the tool on the following page:

http://www.constantcontact.com/index.jsp

If you look at the rotating information on the left-side of the Constant Contact website, I would like to be able to have that same functionality on my website. If anyone knows how this is accomplished, any assistance would be greatly appreciated. I am looking for the following functionality:

1) Have the ability to hover over each number to change the main photo

2) Have the script advance the main photo on its own

3) Be able to click the main photo when it is selected

Any questions, let me know!

Thanks,

Eric

Hello everyone,

I was wanting to know how you add links to Adobe Lightroom gallery photos?

Here is the xml gallery code I am trying to add links to:





<?xml version="1.0" encoding="UTF-8"?>

<simpleviewerGallery maxImageWidth="1024" maxImageHeight="1024" textColor="0xFFFFFF" frameColor="0xFFFFFF" frameWidth="1" stagePadding="40" thumbnailColumns="2"

thumbnailRows="3" navPosition="left" title="" enableRightClickOpen="true" backgroundImagePath="" imagePath="images/" thumbPath="thumb/">
<image>
<filename>1.jpg</filename>
<caption></caption>
</image>
<image>
<filename>2.jpg</filename>
<caption></caption>
</image>
<image>
<filename>3.jpg</filename>
<caption></caption>
</image>
<image>
<filename>4.jpg</filename>
<caption></caption>
</image>
<image>
<filename>5.jpg</filename>
<caption></caption>
</image>
<image>
<filename>6.jpg</filename>
<caption></caption>
</image>
<image>
<filename>7.jpg</filename>
<caption></caption>
</image>
<image>
<filename>8.jpg</filename>
<caption></caption>
</image>
<image>
<filename>9.jpg</filename>
<caption></caption>
</image>
</simpleviewerGallery>






I have Adobe Lightroom 3. So far browsing through various tutorials and help notes I have not found a way to do this.

However, I am hoping there is in fact a way to do this.

Here is the actual flash simpleviewer gallery uploaded I have uploaded for a visual example.


http://www.iandmyself.me


I would simply like to add links to the photos once they are clicked.

I have created a page using the code below and it works fine.

Is there any way that I can replicate the gallery further down the page using different images? When I try, the mouseover on the top gallery opens the images in the bottom gallery.

Code:

<script>

function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function sshow(){
window.location=gotolink
}

</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"

function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}

preloadimages("i/1-big.jpg","i/2-big.jpg","i/3-big.jpg","i/4-big.jpg")

</script>
<script>

function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function sshow(){
window.location=gotolink
}

</script>

I set up an image mouseover for the next button but its not working. I have two images set up but the second one wont appear when mousing over image.
You can see it at www.college-ebook.com

I'm working at masking my fantasy football site hosted by my provider onto my own subdomain, since they can't allow me point a dns at their servers.

I did manage to mask the webaddress to my sub doman with a php script. But it also only masks the initial visit, and th link name.

And now i'm trying to learn how mask the various url/links in the menus.

As I little about javascript, can someone show me a way to mask the url address when a user mouses over them? The links themselves wont' change, I'm just trying to mask the link names on the mouseover to look like their on my own domain.

Hope that all made some sense

Hi there.

I'm trying to make a little valentines website 'card' for my ladyfriend. I was going to be clever about it and use javascript, but as it turns out I'm really not that clever with it anymore. I need a single image to change into a different image on each following mouseover event. A planned 'route' of images, for exameple A -> B -> C -> D -> E -> A -> F - > B -> .. and so on.

I thought I could do this, but I'm getting nowhere. I did try to look for similar attempts to make this, but it's kind of hard to find since 'mouseover' is such a generic search term.

Thanks.

Edit: there's little point for me in posting my code so far.. it's just a long list of imagecodes and a little mousover script that would probably make you laugh.