JavaScript - Latest Flickr Images

Hi,

i have a rating script which shows 5 stars and it allows users to vote out of 5 on certaiin things, the votes register ok but the stars dont change colour to show that the user has voted.

this has happened since my host upgraded to php 5.3 and i noticed on IE(which i never use much) it says there is an error on the page and that error says

Code:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
Timestamp: Tue, 2 Feb 2010 20:00:42 UTC


Message: 'document.all[...]' is null or not an object
Line: 96
Char: 9
Code: 0
URI: rating.js

line 96 in the related file is
Code:

    }  else if(IE) {
        document.all[div2show].innerHTML = text;
    }

which only related to IE and not firefox so im unsure why my rating graphics do not show once selected.

here is the entire js file is there anything in there that might be preventing it?
Code:

/*
Page:           rating.js
Created:        Aug 2006
Last Mod:       Mar 11 2007
Handles actions and requests for rating bars.	
--------------------------------------------------------- 
ryan masuga, masugadesign.com
ryan@masugadesign.com 
Licensed under a Creative Commons Attribution 3.0 License.
http://creativecommons.org/licenses/by/3.0/
See readme.txt for full credit details.
--------------------------------------------------------- */

var xmlhttp
	/*@cc_on @*/
	/*@if (@_jscript_version >= 5)
	  try {
	  xmlhttp=new ActiveXObject("Msxml2.XMLHTTP")
	 } catch (e) {
	  try {
	    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
	  } catch (E) {
	   xmlhttp=false
	  }
	 }
	@else
	 xmlhttp=false
	@end @*/
	if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
	 try {
	  xmlhttp = new XMLHttpRequest();
	 } catch (e) {
	  xmlhttp=false
	 }
	}
	function myXMLHttpRequest() {
	  var xmlhttplocal;
	  try {
	    xmlhttplocal= new ActiveXObject("Msxml2.XMLHTTP")
	 } catch (e) {
	  try {
	    xmlhttplocal= new ActiveXObject("Microsoft.XMLHTTP")
	  } catch (E) {
	    xmlhttplocal=false;
	  }
	 }

	if (!xmlhttplocal && typeof XMLHttpRequest!='undefined') {
	 try {
	  var xmlhttplocal = new XMLHttpRequest();
	 } catch (e) {
	  var xmlhttplocal=false;
	  alert('couldn\'t create xmlhttp object');
	 }
	}
	return(xmlhttplocal);
}

function sndReq(vote,id_num,ip_num,units) {
	var theUL = document.getElementById('unit_ul'+id_num); // the UL
	
	// switch UL with a loading div
	theUL.innerHTML = '<div class="loading"></div>';
	
    xmlhttp.open('get', 'rpc.php?j='+vote+'&q='+id_num+'&t='+ip_num+'&c='+units);
    xmlhttp.onreadystatechange = handleResponse;
    xmlhttp.send(null);	
}

function handleResponse() {
  if(xmlhttp.readyState == 4){
		if (xmlhttp.status == 200){
       	
        var response = xmlhttp.responseText;
        var update = new Array();

        if(response.indexOf('|') != -1) {
            update = response.split('|');
            changeText(update[0], update[1]);
        }
		}
    }
}

function changeText( div2show, text ) {
    // Detect Browser
    var IE = (document.all) ? 1 : 0;
    var DOM = 0; 
    if (parseInt(navigator.appVersion) >=5) {DOM=1};

    // Grab the content from the requested "div" and show it in the "container"
    if (DOM) {
        var viewer = document.getElementById(div2show);
        viewer.innerHTML = text;
    }  else if(IE) {
        document.all[div2show].innerHTML = text;
    }
}

/* =============================================================== */
var ratingAction = {
		'a.rater' : function(element){
			element.onclick = function(){

			var parameterString = this.href.replace(/.*\?(.*)/, "$1"); // onclick="sndReq('j=1&q=2&t=127.0.0.1&c=5');
			var parameterTokens = parameterString.split("&"); // onclick="sndReq('j=1,q=2,t=127.0.0.1,c=5');
			var parameterList = new Array();

			for (j = 0; j < parameterTokens.length; j++) {
				var parameterName = parameterTokens[j].replace(/(.*)=.*/, "$1"); // j
				var parameterValue = parameterTokens[j].replace(/.*=(.*)/, "$1"); // 1
				parameterList[parameterName] = parameterValue;
			}
			var theratingID = parameterList['q'];
			var theVote = parameterList['j'];
			var theuserIP = parameterList['t'];
			var theunits = parameterList['c'];
			
			//for testing	alert('sndReq('+theVote+','+theratingID+','+theuserIP+','+theunits+')'); return false;
			sndReq(theVote,theratingID,theuserIP,theunits); return false;		
			}
		}
		
	};
Behaviour.register(ratingAction);

many thanks for any help
Luke

This is puzzling me.

It's an incremental search function. Any help for a Javascript novice much appreciated:

Code:

$(function () {
    $('#quickFilter').incrementalFilter({
        items: 'dl.entryList > dt',
        foundCounter: '#resultCount',
        totalCounter: '#totalCounter',
        minChars: 2
    }).focus();
})

... here's the rest of it:

Code:

(function($) {
    var IncrementalFilter = function(params){
        var setting = this.setting = {
            input: undefined,
            items: undefined,
            searchScope: '*',
            minChars: 2,
            useHighlight: true,
            foundCounter: undefined,
            totalCounter: undefined,
            highlightElem: $('<em class="highlight" />'),
            foundClass: 'found',
            zeroClass: 'zero'
        }
        $.extend(setting,params)

        this.input = $(setting.input);
        this.items = $(setting.items);
        this.minChars = setting.minChars;
        if(setting.foundCounter){
            this.totalCounter = setting.totalCounter;
            this.foundCounter = new IncrementalFilter.Counter(setting);
        }
        this.formerQuery = '';
        this.itemData = [];
        this.init();
    }

    IncrementalFilter.prototype = {

        makeData: function(){
            var that = this;
            this.items.each(function(){
                var obj = [$(this)]
                if($(this).is('dt')){
                    obj.push($(this).next())
                }
                that.itemData.push(new IncrementalFilter.SearchedItem(obj,that.setting));
            })
            if(this.foundCounter){
                this.foundCounter.refresh(this.itemData.length);
                if(this.totalCounter){
                    $(this.totalCounter).html(this.foundCounter.all)
                }
            }
        },

        processQuery: function(query){
            var tempq = this.escapeQuery(query)
            tempq = $.trim(tempq).split(/\s+/);
            var queries = []

            for(var i=0,l=tempq.length;i<l;i++){
                for(var j=0,m=tempq.length;j<m;j++){
                    if(i!=j && tempq[i] && (tempq[i] == tempq[j]
                       || RegExp(tempq[i]).test(tempq[j])
                       || tempq[i].length < this.minChars)){
                        tempq.splice(i,1)
                        l = m = tempq.length;
                    }
                }
                if(tempq[i]){
                    queries.push(tempq[i])
                }
            }

            if(queries.join(' ') != this.formerQuery){
                this.search(queries);
                this.formerQuery = queries.join(' ');
            }
        },

        escapeQuery: function(query){
            var escapeChars = '.+*^$?()[]{}';
            var res = query;
            for(var i=0,l=escapeChars.length;i<l;i++){
                var ec = escapeChars.charAt(i);
                res = res.replace(RegExp('\\'+ec,'g'),'\\'+ec);
            }
            return res;
        },

        search: function(queries){
            var that = this;
            var count = 0;
            $(that.itemData).each(function(){
                var self = this;
                var matchCount = 0;
                $.each(queries,function(){
                    if(RegExp(this,'i').test(self.text))
                        matchCount++;
                })
                if(matchCount == queries.length){
                    this.showItem()
                    this.clearHighlight(function(){
                        $.each(queries,function(){
                            self.highlightWord(this)
                        })
                    });
                    count++;
                }else{
                    this.hideItem();
                }
            })
            if(this.foundCounter){
                this.foundCounter.refresh(count)
            }
        },

        reset: function(){
            var that = this;
            $(this.itemData).each(function(){
                this.showItem();
                this.clearHighlight();
                if(that.foundCounter){
                    that.foundCounter.reset();
                }
            })
        },

        setEvent: function(){
            var that = this;
            this.input.bind('keyup',function(){
                var val = $(this).val();
                if(val.length >= that.minChars){
                    that.processQuery(val)
                }else{
                    that.reset();
                }
            })
        },

        init: function(){
            this.makeData();
            this.setEvent();
            if(this.input.val().length >= this.minChars){
                this.processQuery(this.input.val())
            }
        }
    }

    /**
     *@param obj {array}
     **/
    IncrementalFilter.SearchedItem = function(obj,setting){
        this.useHighlight = (setting.useHighlight && $.fn.highlightText && $.fn.removeOuterTag)
        if(this.useHighlight){
            this.highlightElem = setting.highlightElem || $('<em class="highlight" />');
            this.highlightExpr = /^<(\w+)/.exec($('<div />').append(this.highlightElem).html())[1]
                               + '.'+this.highlightElem.attr('class').split(/\s/).join('.');
        }
        this.text = '';
        this.obj = [];
        for(var i=0,l=obj.length;i<l;i++){
            var temp = obj[i];
            this.obj[i] = {'elem':temp,'orgsrc':temp.html()}
            this.text += obj[i].text();
        }
    }

    IncrementalFilter.SearchedItem.prototype = {
        hideItem: function(){
            $(this.obj).each(function(){
                this.elem.hide();
            })
            return this;
        },

        showItem: function(){
            $(this.obj).each(function(){
                this.elem.show();
            })
            return this;
        },

        clearHighlight: function(callback){
            if(!this.useHighlight) return this;
            var that = this;
            $(this.obj).each(function(){
                $(that.highlightExpr,this.elem).removeOuterTag()
            })
            if(callback) callback();
            return this;
        },

        highlightWord: function(word){
            if(!this.useHighlight) return this;
            var that = this;
            var query = new RegExp(word,'gi')
            $(this.obj).each(function(){
                this.elem.highlightText(query,that.highlightElem)
            })
            return this;
        }
    }

    IncrementalFilter.Counter = function(setting){
        if(!setting || !setting.foundCounter) return undefined;
        this.obj = $(setting.foundCounter);
        this.foundClass = setting.foundClass || 'found';
        this.zeroClass = setting.zeroClass || 'zero';
        this.all = undefined;

        this.refresh = function(count){
            this.obj.html(count);
            if(!this.all){
                this.all = count;
            }

            if(count == 0){
                this.zero()
            }else if(count < this.all){
                this.highlight();
            }
        }

        this.reset = function(){
            this.refresh(this.all);
            this.obj
                .removeClass(this.foundClass)
                .removeClass(this.zeroClass)
        }

        this.highlight = function(){
            this.obj
                .removeClass(this.zeroClass)
                .addClass(this.foundClass)
        }

        this.zero = function(){
            this.obj
                .removeClass(this.foundClass)
                .addClass(this.zeroClass)
        }

        return this;
    }

    $.fn.incrementalFilter = function(params){
        return this.each(function(){
            if(typeof params == 'string' || params.size){
                new IncrementalFilter({input:$(this),items:params})
            }else if(typeof params == 'object'){
                params.input = $(this);
                new IncrementalFilter(params)
            }
        });
    };

Hello to all,

I think that you will frequently read this boring sentence: "Javascript does not work with Firefox".
Below a very very simple html with Javascript. Using MS IE v8 I have found that the code works very well. Filling nothings in the textfield "your name" and subsequently clicking on the button and a window will popup with the text "Sorry, you forget to: blah-blah ..."
However, using Firefox instead...it does not work. A bit remarkable; the Javascript is very easy!
Could you please check what went wrong?
I have activated Javascript in the Firefox browser and the security is ok for Javascript.

I hope that someone can provide me a useful hint.

Best regards,

Cornelis
The Netherlands - Gouda (yes, the town where cheese is inherently linked)


[CODE]

<html>

<head>

<meta http-equiv="Content-Language" content="nl">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">



<title>Inloggen van een nieuw lid</title>

<script language = "Javascript">


function checkDate() {

var message = "Sorry, you forget to: \n";
var voornaam = document.getElementById("voornaam");
var result = true;


if (voornaam.value.length == 0) {

message+="- You have not typed your name\n";
result = false;}

if(!result) {alert(message)};
return result;



}

</script>

</head>

<body>
<FORM METHOD="post" name=CheckDate onsubmit="return checkDate(this);" >
<div style="position: absolute; width: 603px; height: 378px; z-index: 1; left: 30px; top: 13px" id="laag1">
<p align="center"><font face="Trebuchet MS" color="#00750F" size="5"><b>
Test</b></font></p>
<table border="0" width="100%" bgcolor="#C4FFC4" style="border-collapse: collapse" id="table3">
<tr>
<td>

</td>
</tr>
</table>
<p align="left">&nbsp;</p>
<table border="0" width="69%" id="table1" height="210" style="border-collapse: collapse">
<tr>
<td width="37%"><font face="Trebuchet MS">your name</font></td>
<td width="59%">
<p align="center"><input type="text" name="voornaam" size="25"></td>
</tr>

<tr>
<td colspan="2" height="90">
<p align="center">
<input type="submit" value="Register me" name="Registreren">
</td>
</tr>
</table>
<p>&nbsp;</p>

</div>

</body>
</form>

</html>

Hi,

Using the following javascript:
Code:

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js">
</script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=1">
</script>

I am able to display the latest tweet of a user into a div.

However, I have a user-generated database of username's stored in an XML file and would like to list each username's latest tweet on a single page. Any thoughts on how I might be able to achive this? I'm new to javascript so forgive my stupidity.

Hi there,

I've been searching for an answer to this for the last few days but with no luck, so I thought I'd register here to see if anyone can possibly help.

All I've been able to find everywhere for this is examples of changing images when rolling over them or clicking them, and I don't need that.

What I need is a bit of javascript that will recognise some image paths on a page and replace those image paths with other ones.

It's for an ecommerce website on a certain platform, using a customer reviews section which outputs star images based on the customer's rating. So, the images used (which look awful) are, for example, "sourcehere/stars_5.gif", "sourcehere//stars_4.gif", and so on. Just 5 of them.

I want to design my own 5 images, upload those images, and then have the javascript replace the rubbish looking ones on the page with my own images.

I thought I'd be able to find something quite easily, but so far all I can find is examples of mouseover events and so on, and I don't need any of that, just the entire image replaced with my own image.

Can anyone help please? I'm a beginner with javascript so I'll need it spelled out to me! Thankyou for your time.

Hey everyone!

I'm in the process of creating a portfolio site for my artwork and I'm requesting help. The website has a scalable JQuery background which changes depending on which thumbnail you click.

I've uploaded the progress he
http://www.aldousmassie.com/newprogress

I'm using this code at the moment to scroll through the background:

Code:

<!-- SCRIPT FOR CHANGING BG ON CLICK -->

<script type="text/javascript">
					imgs=Array("img/00.jpg","img/01.jpg","img/02.jpg","img/03.jpg");
var x=0;

function change() {
					document.getElementById("bgimg").src=imgs[++x];

if (x==3) {
x=-1;
}
}

if (!imgs[x+1]) {
x=-1;
}
</script>
					
<!-- SCRIPT BELOW OVERWRITES SCRIPT ABOVE -->

<script type="text/javascript">
					imgs=Array("img/08.jpg","img/09.jpg","img/10.jpg","img/11.jpg","img/12.jpg","img/13.jpg");

var x=0;

function change() {
					document.getElementById("bgimg").src=imgs[++x];

if (x==5) {
x=-1;
}

}

if (!imgs[x+1]) {
x=-1;
}
</script>

Unfortunately, the bottom code overwrites the top. Is it possible for each different background image to have their own "set" of images that could be scrolled through onclick?

I'd appreciate any tips that point me in the right direction. Thank you.

Please help have a look at the scripts...
Where's gone wrong that whenever an image fades out into 0, it reappears before another image comes out?
I've wanted to make the image disappear shortly before a new image is loaded.
I've worked on this and played around with the scripts, yet no finding...
Please do tell me if you know the answer to it. Thanks.

Code:

<!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=utf-8" />
<title>Untitled Document</title>
<script>
window.onload = function(){
	var pic = document.getElementById("pic");
	document.getElementById("nextImageFading_btn").onclick = function(){nextImageFading();}
	
	}

var img = new Array();
img[0] = "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png";
img[1] = "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png";
img[2] = "http://www.techlifeweb.com/facebook_logo.jpg";
img[3] = "http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png";

var o = 100;
var t;
var p = 0;
var f = 1;

function nextImageFading(){
	
	t = setInterval(
	function(){
	
				pic.src = img[p];
			
				pic.style.filter = "alpha(opacity="+o+")";
				pic.style.MozOpacity = o/100;
				pic.style.opacity = o/100;
				o -= 1;
				
				if(o<=0){
					
					clearInterval(t);
					
					if(p<img.length-1){
						p = p+1;

						}
					else {p=0;}
					
					pic.src = img[p];
					pic.style.filter = "alpha(opacity=100)";
					pic.style.MozOpacity = 1;
       				pic.style.opacity = 1;

					o = 100;

						}

					},f);

				}
	

</script>
</head>
<body>
<img id="pic" src="" style="width:400px; height:400px;" />
<br style="clear:both;" />
<a id="nextImageFading_btn" href="#">NEXT</a>
</body>
</html>

Good afternoon I am trying to make a form and keep getting stuck on one thing, don't know if JavaScript is the way to go so any advise would be helpful.
basicly i have a form
giftcert.html -that has text input boxes the user fills in and a link to the next page for the user to pick a gift card
giftcards.asp -the user picks a gift card by radio buttons (over 100)grouped by name and then pushes a button to take them to the next page passing the value of the radio and image (here is the issue)
giftcert.asp -this page displays the text boxes from the first page with the value already present (used asp to achieve) and the value of the radio button (a stock number - used asp to achieve) and i want a sample of the image attached to the stock number.
how do i pass the image attached to the radio button from giftcards.asp to giftcert.asp
i don't know where i am going wrong
a) how do i attach the image to the button do i use an onclick="pass src" and how
b) how do i get the image to show up in giftcert.asp

if the elements have name attributes with the same value, according to legacy DOM, it will return an array of those elements if you access the name property of 'document'.

However, this doesn't apply to img elements. If the HTML code is as follows:
Code:

<img src="img/a.jpg" name="pic" /><img src="img/b.jpg" name="pic" />
<form name="pic">a</form>
<form name="pic">b</form>

then
document.forms["pic"] (return an array) <-- as expected
document["pic"] or document.pic (return an array) <-- as expected
document.images["pic"] :
in IE -- it returns the last image
in FF -- it returns the first image
~~OMG~~

any idea?

thx in advance.

Hi all,

I have a client who wants a gallery of images to pop up on her enter page similar to this site, http://bit.ly/mUscmo . It won't be identical, but she likes the way the images all pop up and then just stay there.

I know how to function JavaScript, but I don't know how to write it from scratch. Is there any where I could find a code that does something similar to this? Or, does anyone know the basic coding that I'd need for this?

Thanks!
Q

Hello guyz!

I need to fetch some images whit custom sizes in Google Images, this is the API from Google that let me search end fetch images:


Code:

/*
*  How to search for images and restrict them by size.
*  This demo will also show how to use Raw Searchers, aka a searcher that is
*  not attached to a SearchControl.  Thus, we will handle and draw the results
*  manually.
*/

google.load('search', '1');

function searchComplete(searcher) {
  // Check that we got results
  if (searcher.results && searcher.results.length > 0) {
    // Grab our content div, clear it.
    var contentDiv = document.getElementById('content');
    contentDiv.innerHTML = '';

    // Loop through our results, printing them to the page.
    var results = searcher.results;
    for (var i = 0; i < results.length; i++) {
      // For each result write it's title and image to the screen
      var result = results[i];
      var imgContainer = document.createElement('div');

      var title = document.createElement('h2');
      // We use titleNoFormatting so that no HTML tags are left in the title
      title.innerHTML = result.titleNoFormatting;

      var newImg = document.createElement('img');
      // There is also a result.url property which has the escaped version
      newImg.src = result.tbUrl;

      imgContainer.appendChild(title);
      imgContainer.appendChild(newImg);

      // Put our title + image in the content
      contentDiv.appendChild(imgContainer);
    }
  }
}

function onload() {
  // Our ImageSearch instance.
  var imageSearch = new google.search.ImageSearch();

  // Restrict to extra large images only
  imageSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE,
                             google.search.ImageSearch.IMAGESIZE_MEDIUM);

  // Here we set a callback so that anytime a search is executed, it will call
  // the searchComplete function and pass it our ImageSearch searcher.
  // When a search completes, our ImageSearch object is automatically
  // populated with the results.
  imageSearch.setSearchCompleteCallback(this, searchComplete, [imageSearch]);

  // Find me a beautiful car.
  imageSearch.execute("Subaru STI");
}
google.setonloadCallback(onload);​

But all I could find about restricted images sizes is this:
Code:

imageSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE,
                             google.search.ImageSearch.IMAGESIZE_MEDIUM);

My problem is that I need custom fixes images sizes, not between a range of values like the above script was giving me...

Google API reference says that:
Code:

google.search.ImageSearch.RESTRICT_IMAGESIZE - When this is specified as the value of type, the image search results will be restricted to images with certain pixel dimensions. Valid optional values for this type are as follows:
	* google.search.ImageSearch.IMAGESIZE_SMALL - restrict to small images, icons
	* google.search.ImageSearch.IMAGESIZE_MEDIUM - restrict to medium images
	* google.search.ImageSearch.IMAGESIZE_LARGE - restrict to large images
	* google.search.ImageSearch.IMAGESIZE_EXTRA_LARGE - restrict to extra large images

Those who wants to play whit Google Playground, this is the link:
Code:

http://goo.gl/sPs2

Could some one help me get that images whit fixed sizes?

is there a way to after thye page load add an image. So maby loading it in the background and just showing it when you click a button?

I have created most of the code however I would like to expand my options. Basically the code changes an image when a user makes a selection from a drop down menu.

<head>
Code:

<script language="javascript">

function linkrotate(which){
var mylinks=new Array()
mylinks[0]="http://www.#.com"
mylinks[1]="http://www.#.com"
mylinks[2]="http://www.#.com"

window.location=mylinks[which]
}


function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
//-->
</script>

<body>
Code:

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form name="mygallery"><p><select
name="picture" size="1" onChange="showimage()">
<option selected value="image1.jpg">Option 1</option>
<option value="image2.jpg">Option 2</option>
<option value="image3.jpg">Option 3</option>
</select></p>
</form>

What I would like to do it have two drop down menus that work together instead of one - providing a more accurate image for the user. Right now the user has one option to select from the drop down menu in which the image is changed. I'd like to be able to have the user choose from two drop down menus.

For example:

Drop down menu number 1
Shoe Color: Black or Red

Drop down menu number 2
Shoelace Color: White or Brown

Where a user chooses 'Black' from the first option then the images will only show a black shoe with white laces or brown laces (based on their choice from the next drop-down menu. Furthermore, where a user chooses 'Red' from the first option then image from the next choice will only show a red shoe with white or brown laces.

Hello, all. I have a common problem, but despite my research I have been unable to find a solution that works for my situation.

I have a large image and several thumbnails below it. I am working with a content management system, so I am able to edit the output of the anchor text around the image, the divs around the image, but NOT the actual image string itself.

The images do have some classes built into them, but no IDs.

Anyways, I want the main image source to change based on the href of the thumbnail below. So if you click on any one of the thumbs, the href for that thumbnail populates as the source for the main image.

Here is my code so far:

Code:

<div class="images" id="big-image">
<a href="dianaminiflash_shop0001-11.jpg">
<img width="500" height="500" src="dianaminiflash_shop0001-11-500x500.jpg" class="attachment-shop_single wp-post-image" /></a>
<div class="thumbnails">
<a href="dianamini_en-rose_front1.jpg" title="dianamini_en-rose_front" rel="thumbnails" class="product-thumb first">
<img src="dianamini_en-rose_front1-200x200.jpg" class="attachment-shop_thumbnail" /></a>
<a href="diana-mini_fern-green_front1.jpg" class="product-thumb ">
<imgsrc="diana-mini_fern-green_front1-200x200.jpg" class="attachment-shop_thumbnail" /></a>
<a href="diana-mini_flashkit_white_front1.jpg" class="product-thumb last">
<img src="diana-mini_flashkit_white_front1-200x200.jpg" class="attachment-shop_thumbnail" /></a>
</div>
</div>

One of the things I've tried that has not worked but has been offered up as a solution on this forum and others is:

Code:

$(".thumbnails a").click( function() {
var changeSrc = $(this).attr("href");
$(".attachment-shop_single").attr("src", changeSrc);
return false;
});

Any suggestions on what I'm doing wrong here? I really appreciate the help in advance.

I use a rotating image script on my website currently, but I'm taking a JavaScript class and started playing around my script to see if I can get it to display two random images at once, but never the same. Here's my script:

Code:

<!--
var images = new Array("<a href='index.php'><img src='images/image.gif' alt=''></a>","<a href='home.php'><img src='images/image.gif' alt=''/></a>);

index = Math.floor(Math.random() * images.length);

document.write(images[index]);
// -->

Where does the index come from? And how do I interpret images[index] if I were to read it out loud?

I thought I could add ++ to the end of images.length to get it to display at least two images, but nada. I'm still new at this and would really appreciate if someone could talk me through this? Thanks!