Javascript help! Reward $25!!!!

32 Posts

overhaulmedia Reply #1, 17 years, 8 months ago

I suck at javascript and I finally got what I need to do working somewhat..

I have some code here that changes the main image upon thumbnail rollover (remote rollover) I need to modify it so onmouseout the big images goes back to the original image.
I think I need to make a function to call with onmouseout saying: revert to [*prod_img*]

<script type='text/javascript'>
<!--

// ROLLOVER: SWAP IMAGE
function swap_image(n,s) {
    document.images[n].src=s;
    var argv=swap_image.arguments;
    if(argv[2] && argv[3] && document.getElementById) {
        element=document.getElementById(argv[2]);
        element.innerHTML=argv[3];
        }
    }



// ROLLOVER: PRELOAD
function preload(list) {
	var newsource=new Array();
	for(p=0;p<list.lenght;p++) {
		newsource[i]=new Image();
		newsource[i].src=list[i];
		}
	}

// ROLLOVER: AUTOLOAD
function AutoLoad() {
	var hits=0;
	var linkedimages=new Array();
	for(i=0;i<document.links.length;i++) {
		if(document.links[i].href.toLowerCase().search(/\.[gjp][ipn][fge]g?/)>-1) {
			hits++;
			linkedimages[hits]=document.links[i].href;
			}	
		}
	preload(linkedimages);
	}

-->
</script>

							</div>
			<div class="prodimg">
            <IMG src="[*prod_img*]" name="big" alt="[*prod_title*]" style="height:270px; width:342px;" border="0" class="pic" />
								<ul class="color">
									<li class="title">Available<br />Colours</li>		

<li><a href="[*prod_img*]"
    onmouseover="swap_image('big',this.href)"
    onclick="return false">
    <IMG src="[*prod_img*]" style="height:26px;width:26px;" />
</a></li>
<li><a href="[*ColorSwatch1*]"
    onmouseover="swap_image('big',this.href)"
    onclick="return false">
    <IMG src="[*ColorSwatch1*]" style="height:26px;width:26px;" />
</a></li>
<li><a href="[*ColorSwatch2*]"
    onmouseover="swap_image('big',this.href)"
    onclick="return false">
    <IMG src="[*ColorSwatch2*]" style="height:26px;width:26px;" />
</a></li>
                                    
								</ul>
							</div>

24,544 Posts

BobRay Reply #2, 17 years, 8 months ago

I also suck at js, but adding this below the onmouseover lines might do it:

onmouseout="swap_image(this.href,'big')"

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

32 Posts

overhaulmedia Reply #3, 17 years, 8 months ago

No luck

24,544 Posts

BobRay Reply #4, 17 years, 8 months ago

OK, I see why, never mind that.

Try just putting onmouseout=’src="[*ColorSwatch1*]" ’ into the image tag you have in your original code.

I think that will do what you want but down the road, you may want to simplify the code. I think theres a lot of it that you don’t need.

I think you always want to preload and autoload, so don’t make them functions (in fact, I don’t think you need any functions at all).

Set up all the small and large images as image1-small, image1-large, image2-small, image2-large, etc.

image1-small = new Image();
image1-small.src = "image2.jpg";
etc.

Then the image tag does it all and you don’t need any swap function at all:

<img src='image1-small.jpg' onmouseover='src="image1-large.jpg";' onmouseout='src="image1-small.jpg";' />

Hope this makes sense.

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

32 Posts

overhaulmedia Reply #5, 17 years, 8 months ago

Im not sure that will work, check out here: http://www.dressageboutique.com/products/kids-canvas-keyholes.html

I want the colors to switch the big image then switch back to the product shot. Ignore the tiny horse one I had that as a cheap alternative.

24,544 Posts

BobRay Reply #6, 17 years, 8 months ago

Ah ... I wish I had seen that. I thought you wanted to switch the image the mouse was on.

You’re at the edge (or beyond) my js, but I think you will want onouseover and onmouseout for the smaller images. Something like this:

function restore_image() {
   document.images['big'].src ="[*prod_img*]";
}


<li><a href="[*ColorSwatch1*]"
    onmouseover="swap_image('big',this.href)"
    onmousout="restore_image()"
    onclick="return false">
    <IMG src="[*ColorSwatch1*]" style="height:26px;width:26px;" />
</a></li>

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

285 Posts

PatrickSamphire Reply #7, 17 years, 8 months ago

You can do all of that with CSS. No javascript needed. I have a photogallery on a website that works that way (see http://www.polis.leeds.ac.uk). Mind you, it’s not the easiest thing to update if you’re changing it regularly, so maybe you’ll want javascript anyway. And I’m useless at javascript. grin

32 Posts

overhaulmedia Reply #8, 17 years, 8 months ago

would you mid sharing the css you use?

Thanks!

2,877 Posts

mrhaw Reply #9, 17 years, 8 months ago

Check out this page:
http://www.cssplay.co.uk/
Nice ---> http://www.cssplay.co.uk/menu/lightbox.html

@hawproductions | http://mrhaw.com/

Infograph: MODX Advanced Install in 7 steps:
http://forums.modx.com/thread/96954/infograph-modx-advanced-install-in-7-steps

Recap: Portland, OR (PDX) MODX CMS Meetup, Oct 6, 2015. US Bancorp Tower
http://mrhaw.com/modx_portland_oregon_pdx_modx_cms_meetup_oct_2015_us_bancorp_tower

285 Posts

PatrickSamphire Reply #10, 17 years, 8 months ago

Quote from: overhaulmedia at Jan 31, 2009, 08:05 PM

would you mid sharing the css you use?

Thanks!

Well, I can’t "officially" share it, because the site belongs to my employer, not me. However, I’m very much in favour of learning from other people’s code, so, for anyone who is interested in how it works, here is the code.

Here is the generic CSS for the gallery:

/*mozilla outline - doesn't validate, used to prettify mini gallery in mozilla browsers*/
#gallery a:focus, #gallery a:active {
 -moz-outline: none;
 }
 
#gallerybox {
 float: right;
 padding: 10px 0 0 20px;
 background: #fff;
 }
 
/*container with default background image*/
#gallery {
 position: relative;
 width: 368px;
 height: 314px;
 background-color: #404040;
 }
 
#gallery ul {
 position:absolute;
 left: 4px; bottom: 0px;
 list-style: none;
 margin: 0;
 }
 
/*hide name of gallery*/
#gallery h2 {
 display: none;
 position: absolute;
 left: -9000px; top: -9000px;
 }
 
#gallery #start {
 background: url(../graphics/gallery_start.png) 0 0 no-repeat;
 height: 5px;
 width: 5px;
 position: absolute;
 top: 0; left: 0;
 z-index: 200;
 }
 
#gallery #end {
 background: url(../graphics/gallery_end.gif) 0 100% no-repeat;
 height: 5px;
 width: 5px;
 position: absolute;
 bottom: 0; left: 0;
 }
 
#gallery li {
 display: inline;
 margin: 0;
 }
 
/* thumbnail links */
#gallery a {
 display: block;
 width: 52px;
 height: 58px;
 float: left;
 padding: 2px 4px;
 border: 0;
 }
 
/*ff*/
#gallery a span.thumb {
 display: block;
 width: 50px;
 height: 50px;
 overflow: hidden;
 border: 1px solid #222;
 }
 
#gallery img {
 max-width: 380px;
 border: 0;
 }
 
/*turn off fullsize images*/
#gallery a span.full {
 display: none;
 }
 
/*thumbnail behaviour*/
#gallery a:hover .thumb {
 border: 1px solid #fff;
 }
 
#gallery a:active .thumb, #gallery a:focus .thumb {
 border: 1px solid #CF01B1;
 }
 
/*full-size behaviour*/
#gallery a:hover span.full, #gallery a:active span.full, #gallery a:focus span.full {
 display: block;
 position: absolute;
 width: 368px;
 height: 246px;
 top: -252px;
 left: -4px;
 z-index: 2;
 }
 
#gallery a:hover span.full {
 z-index: 2;
 }
 
#gallery a:active span.full, #gallery a:focus span.full {
 z-index: 1;
 }
 
/*gallery navigation*/
 
#gallerynav {
 text-align: right;
 margin: .5em 10px 0 0;
 font-size: 79%;
 line-height: 1.5em;
 }
 
#gallerynav.nav li {
 margin: 0;
 border-left: 1px solid #999;
 }
 
#gallerynav.nav li.first {
 border: 0;
 }
 
#gallerynav.nav a {
 margin: 0 6px 0 6px;
 text-decoration: none;
 border: 0;
 }
 
#gallerynav.nav a:hover {
 text-decoration: underline;
 }

Here are the inevitable fixes for Internet Explorer.

IE7 or lower:

/*
mini gallery fixes
---------------------------------------------------------------------------------*/
#gallery ul {
 bottom: 8px;
 }
 
#gallery a span.thumb {
 display: inline;
 border: 0;
 }
 
#gallery a:hover .thumb, #gallery a:active .thumb, #gallery a:focus .thumb  {
 border: 0;
 }
 
/*turn off block span used in FF and move borders to link*/
 
body #gallery a {
 display: inline-block;
 overflow: hidden;
 width: 50px;
 height: 50px;
 padding: 0;
 margin: 2px 4px 0 4px;
 border: 1px solid #222;
 }
 
#gallery a:hover {
 border: 1px solid #fff;
 }
 
#gallery a:active, #gallery a:focus {
 border: 1px solid #f93;
 }

IE6 or lower:

/*
transparent png background in IE6/IE5.5 for mini gallery
---------------------------------------------------------------------------------*/
#gallery #start {
   /* MS image filter */
 background: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='graphics/gallery_start.png', sizingMethod='crop');
}

IE5:

/*
trigger hasLayout including easy clear
---------------------------------------------------------------------------------*/
#gallerynav a, #gallerynav li {
 height: 1px;
 }
 
/*
mini gallery fixes 
---------------------------------------------------------------------------------*/
 
/*turn off thumbnails*/
#gallery ul, #gallery #end {
 display: none;
 }
 
#gallery {
 height: 246px;
 }

Then you need the following for each individual gallery:

/* positioned and scaled thumbnail images. Adjust these values to 'focus' the thumbnails. */
.gallery-about .img1 img {height: 61px; margin: 0 0 0 -5px;}
.gallery-about .img2 img {height: 90px; margin: -15px 0 0 -10px;}
.gallery-about .img3 img {height: 110px; margin: -30px 0 0 -70px;}
.gallery-about .img4 img {height: 123px; margin: -10px 0 0 0px;}
.gallery-about .img5 img {height: 130px; margin: -12px 0 0 -87px;}
.gallery-about .img6 img {height: 90px; margin: -5px 0 0 -61px;}
 
/*default image*/
.gallery-about {
 background: url(../graphics/gallery/about/img1.jpg) 0 0 no-repeat;
 }
 
/*full-size backgrounds*/
.gallery-about .img1 span.full {background: url(../graphics/gallery/about/img1.jpg)}
.gallery-about .img2 span.full {background: url(../graphics/gallery/about/img2.jpg);}
.gallery-about .img3 span.full {background: url(../graphics/gallery/about/img3.jpg);}
.gallery-about .img4 span.full {background: url(../graphics/gallery/about/img4.jpg);}
.gallery-about .img5 span.full {background: url(../graphics/gallery/about/img5.jpg);}
.gallery-about .img6 span.full {background: url(../graphics/gallery/about/img6.jpg);}

And, finally, the HTML to tie it all together, again needed for each gallery.

<div id="gallerybox">

<div id="gallery" class="gallery-about"><div id="start"></div>
<h2>Image Gallery</h2>
<ul>
<li><a class="img1" href="/"><span class="thumb"><img src="graphics/gallery/about/img1.jpg" alt="" title="" /></span><span class="full" title=""></span></a></li>
<li><a class="img2" href="/"><span class="thumb"><img src="graphics/gallery/about/img2.jpg" alt="" title="" /></span><span class="full" title=""></span></a></li>
<li><a class="img3" href="/"><span class="thumb"><img src="graphics/gallery/about/img3.jpg" alt="" title="" /></span><span class="full" title=""></span></a></li>
<li><a class="img4" href="/"><span class="thumb"><img src="graphics/gallery/about/img4.jpg" alt="" title="" /></span><span class="full" title=""></span></a></li>
<li><a class="img5" href="/"><span class="thumb"><img src="graphics/gallery/about/img5.jpg" alt="" title="" /></span><span class="full" title=""></span></a></li>
<li><a class="img6" href="/"><span class="thumb"><img src="graphics/gallery/about/img6.jpg" alt="" title="" /></span><span class="full" title=""></span></a></li>
</ul>
<div id="end"></div>
</div>

I put the CSS in external files and use chunks for the HTML, but I’m sure there are loads of other ways of doing it.

And, yeah, it is a bit complicated! grin

Furthermore, each thumbnail is a link. In a static site, this is fine, but because of something MODx does, if you click on the thumbnails, the page reloads. (What is supposed to happen is that if you click on a thumbnail, it makes that image ’sticky’.) I’ve put in a couple of javascript files to intercept the click, which I’m also happy to share. There may be a better way to do this within MODx.

By the way, I don’t claim credit for this CSS. I only did the MODx integration. The design and coding were by Mark Hadley: http://markhadley.com/.