Website help again! - Corsa Sport - for Vauxhall and Opel Corsa B, Corsa C and Corsa D

Not logged in [Login - Register]

You Are Not Registered Or Not Logged In

Corsa Sport » Message Board » Off Day » Geek Day » Website help again!

New Topic

New Poll

Subscribe | Add to Favourites

You are not logged in and may not post or reply to messages. Please log in or create a new account or mail us about fixing an existing one - register@corsasport.co.uk

There are also many more features available when you are logged in such as private messages, buddy list, location services, post search and more.

Simon

Member

Registered: 24th Apr 03
Location: Oxfordshire
User status: Offline

6th Jul 11 at 09:52

Hi guys, another website problem!

This is works current site: http://www.mebdesign.co.uk/

I'm trying to do something so that the 4 images bottom right change each time the site is visited/refreshed. Don't really know what I'm doing but assumed this will be easier to do than having them change whilst the page is read?

Anyway, I've found various bits of code which will do what I want and the refresh changes the images. However I can't get the code to work in the same layout of the 4 squares together like on the site currently, it seems to not let them sit next to each other so the box gets stretched.

Code below:

quote:

<td align="center">
<table border="0" width="300" cellspacing="0" cellpadding="5" height="300" bgcolor="#666699">
<tr>
<td valign="top">
<table border="0" width="290" cellspacing="0" cellpadding="0" height="290">

<tr>

<td align="left" valign="top">

<noscript><img src="front_images/4.jpg"></noscript>
<script type="text/javascript">
function robin(){
//Set Your Images in the below Array:
var robin_im=['front_images/1.jpg', 'front_images/2.jpg', 'front_images/4.jpg', 'front_images/5.jpg', 'front_images/6.jpg', 'front_images/7.jpg', 'front_images/8.jpg',

'front_images/9.jpg', 'front_images/10.jpg', 'front_images/11.jpg']

//////////////// Stop Editing //////////////////
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca;
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}
var num=readCookie('robim')? readCookie('robim')*1 : 0;
document.write('<img src="'+robin_im[num]+'">')
num=num<robin_im.length-1? num+1 : 0;
createCookie('robim', num);
}
robin();
</script></td>

<tr>

<td align="right" valign="top">

<noscript><img src="front_images/2.jpg"></noscript>
<script type="text/javascript">
function robin(){
//Set Your Images in the below Array:
var robin_im=['front_images/1.jpg', 'front_images/2.jpg', 'front_images/4.jpg', 'front_images/5.jpg', 'front_images/6.jpg', 'front_images/7.jpg', 'front_images/8.jpg',

'front_images/9.jpg', 'front_images/10.jpg', 'front_images/11.jpg']

//////////////// Stop Editing //////////////////
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca;
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}
var num=readCookie('robim')? readCookie('robim')*1 : 0;
document.write('<img src="'+robin_im[num]+'">')
num=num<robin_im.length-1? num+1 : 0;
createCookie('robim', num);
}
robin();
</script></td>

<tr>

<td align="left" valign="bottom">

<noscript><img src="front_images/3.jpg"></noscript>
<script type="text/javascript">
function robin(){
//Set Your Images in the below Array:
var robin_im=['front_images/1.jpg', 'front_images/2.jpg', 'front_images/4.jpg', 'front_images/5.jpg', 'front_images/6.jpg', 'front_images/7.jpg', 'front_images/8.jpg',

'front_images/9.jpg', 'front_images/10.jpg', 'front_images/11.jpg']

//////////////// Stop Editing //////////////////
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca;
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}
var num=readCookie('robim')? readCookie('robim')*1 : 0;
document.write('<img src="'+robin_im[num]+'">')
num=num<robin_im.length-1? num+1 : 0;
createCookie('robim', num);
}
robin();
</script></td>

<tr>

<td align="right" valign="bottom">
<noscript><img src="front_images/4.jpg"></noscript>
<script type="text/javascript">
function robin(){
//Set Your Images in the below Array:
var robin_im=['front_images/1.jpg', 'front_images/2.jpg', 'front_images/4.jpg', 'front_images/5.jpg', 'front_images/6.jpg', 'front_images/7.jpg', 'front_images/8.jpg',

'front_images/9.jpg', 'front_images/10.jpg', 'front_images/11.jpg']

//////////////// Stop Editing //////////////////
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca;
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}
var num=readCookie('robim')? readCookie('robim')*1 : 0;
document.write('<img src="'+robin_im[num]+'">')
num=num<robin_im.length-1? num+1 : 0;
createCookie('robim', num);
}
robin();
</script></td>

</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

Does anyone have any ideas? My knowledge is very basic and so I just cut and paste everything with limited success

[Edited on 06-07-2011 by Simon]

Whittie

Member

Registered: 11th Aug 06
Location: North Wales Drives: BMW, Corsa & Fiat
User status: Offline

6th Jul 11 at 10:27

Have a google for a S3slider script.

Whittie

Member

Registered: 11th Aug 06
Location: North Wales Drives: BMW, Corsa & Fiat
User status: Offline

6th Jul 11 at 10:27

http://www.serie3.info/s3slider/

Dom

Member

Registered: 13th Sep 03
User status: Offline

6th Jul 11 at 10:28

It's pretty straight forward - the basics are create an array with the image filenames, then generate a random between 0 (first position in an array) and array max size, pull out a image filename based on that random index number and remove that index in the array; loop 4 four times.

[Edited on 06-07-2011 by Dom]

Simon

Member

Registered: 24th Apr 03
Location: Oxfordshire
User status: Offline

6th Jul 11 at 10:39

Whittie - cheers will have a look at that script

Dom - I think I have working scripts, the images just no longer seem to sit in the 2x2 square as previously

Member

Registered: 10th Sep 03
User status: Offline

6th Jul 11 at 10:50

I've just set something similar up using this: http://jquery.malsup.com/cycle/

Can see it in action in the masthead of this page: http://www.varicose-veins.ie/n/

If you're having problems with unpredictable content placement then a possible cause for that is the use of tables for layout. Also, are the images you want to swap the correct size for the cells they're being placed in? If they 'overflow' then it will mess the layout up altogether.

Simon

Member

Registered: 24th Apr 03
Location: Oxfordshire
User status: Offline

6th Jul 11 at 10:54

Thanks Ed, will take a look at that too. The images are all the correct size. With the layout, that images are justified to the correct side, left or right but won't sit next to each other so that table actually looks 2x4 rather than 4x4.

'the alternative to using tables for the layout?

Thanks

Member

Registered: 10th Sep 03
User status: Offline

6th Jul 11 at 10:59

The alternative would probably take a full re-design as it involves removing all the layout from the HTML and using CSS instead. You use HTML semantically (i.e. putting paragraphs in <p> tags, table data in <tables>, headings in <h1> tags e.t.c.) and use other elements like <span> and <div> with CSS to get the desired layout. Quite a bit of work if you're happy with the current site and all you want is a slide show.

Are there any errors appearing when you run the script? It could be altering the table in a way you don't want.

Simon

Member

Registered: 24th Apr 03
Location: Oxfordshire
User status: Offline

6th Jul 11 at 11:11

Ok, that is probably more than I can do. A guy did the website a while ago and has now left. I'm in charge of updating it and seem to be managing to change little bits and add new pages with my very limited knowledge and copying and pasting things. I know the site isn't particularly impressive or modern but seems to do OK for now.

I've uploaded what is happening so far here:

http://www.mebdesign.co.uk/index_test.html

so the images are changing if the page is refreshed but the layout is screwed!

Member

Registered: 10th Sep 03
User status: Offline

6th Jul 11 at 11:29

Found your problem, when the table is created each image is placed in a new row. You need to have two <td>'s per <tr> as at the moment each <td> is in it's own <tr>.

You also only need this part of your Javascript once, in the <head> for instance:

code:
<script type="text/javascript">



function robin(){



//Set Your Images in the below Array:



var robin_im=['front_images/1.jpg', 'front_images/2.jpg',  'front_images/4.jpg', 'front_images/5.jpg', 'front_images/6.jpg', 'front_images/7.jpg', 'front_images/8.jpg', 'front_images/9.jpg', 'front_images/10.jpg', 'front_images/11.jpg']







//////////////// Stop Editing //////////////////



function createCookie(name,value,days) {



	if (days) {



		var date = new Date();



		date.setTime(date.getTime()+(days*24*60*60*1000));



		var expires = "; expires="+date.toGMTString();



	}



	else var expires = "";



	document.cookie = name+"="+value+expires+"; path=/";



}







function readCookie(name) {



	var nameEQ = name + "=";



	var ca = document.cookie.split(';');



	for(var i=0;i < ca.length;i++) {



		var c = ca;



		while (c.charAt(0)==' ') c = c.substring(1,c.length);



		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);



	}



	return null;



}







function eraseCookie(name) {



	createCookie(name,"",-1);



}



var num=readCookie('robim')? readCookie('robim')*1 : 0;



document.write('<img src="'+robin_im[num]+'">')



num=num<robin_im.length-1? num+1 : 0;



createCookie('robim', num);



}

</script>

Dom

Member

Registered: 13th Sep 03
User status: Offline

6th Jul 11 at 11:32

Script wise, something basic like this would work (took about 30secs to knock up) -

code:


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript">

$(document).ready(function() {     

// Image Array

var ImgArr = new Array(

"http://www.corsasport.co.uk/carimages/avatar8468.jpg",                   

"http://www.corsasport.co.uk/carimages/avatar5874.jpg",                   

"http://www.corsasport.co.uk/carimages/avatar9465.jpg",                   

"http://www.corsasport.co.uk/carimages/avatar6518.jpg",                   

"http://www.corsasport.co.uk/carimages/avatar1580.jpg",                   

"http://www.corsasport.co.uk/carimages/avatar9307.jpg",                   

"http://www.corsasport.co.uk/carimages/avatar9874.jpg"

);

// Loop for Img containers - loops 1-4 (id: image1 - image4)     

for(i = 1; i < 5; i++) {           

var RndNum = Math.floor(Math.random()*(ImgArr.length-1)); //Generate Rnd Number between 0 (first index in array) and ImgArr array length minus 1 (last index)           

$("#image" + i).attr("src", ImgArr[RndNum]); // Set image correct container, uses JQuery           ImgArr.splice(RndNum,1); // Remove that index from ImgArr, stops duplicates

}

});

</script>

<img src="" id="image1" />

<img src="" id="image2" />

<img src="" id="image3" />

<img src="" id="image4" />

As for the layout issue, have you got a working example of the problem? If the images are all the same size then there shouldn't be an issue as all you're doing is replacing the image location - example: http://listen-to.me.uk/meb/

Simon

Member

Registered: 24th Apr 03
Location: Oxfordshire
User status: Offline

6th Jul 11 at 11:40

Dom, that example is exactly what I was after, thanks! Is it OK If I just copy your code from that or do I need to change anything or just the possible image locations depending on where I put them in the end?

Ed - Thanks for your help as well!

Dom

Member

Registered: 13th Sep 03
User status: Offline

6th Jul 11 at 12:03

quote:
Originally posted by Simon
Dom, that example is exactly what I was after, thanks! Is it OK If I just copy your code from that or do I need to change anything or just the possible image locations depending on where I put them in the end?

Ed - Thanks for your help as well!

Another Example with the cookies (gets 4 different images each time) - http://listen-to.me.uk/meb/index2.htm

But yeah, go for it. All you need to do is add the javascript below the comment "" and then add id attributes to your image tags, so -
<img border="0" src="images/project%20images/143s/education/lva-school.gif" width="143" height="143"> becomes <img id="image1" src="" border="0" height="143" width="143">
<img border="0" src="images/project%20images/143s/general%20pics/brewers.gif" width="143" height="143"> becomes <img id="image2" src="" border="0" height="143" width="143">,
next is id="image2" then id="image4". I'm sure you get the idea....

Both these example are pretty rough 'n' ready and could be written more efficiently; certainly using JQuery just for the src attribute is probably overkill and no doubt decreases performance (can use document.getelementbyid which would be quicker).
It might be worth looking at some of the JQuery slide show plugins if you want something a bit more 'flashy'.

Simon

Member

Registered: 24th Apr 03
Location: Oxfordshire
User status: Offline

14th Jul 11 at 09:48

Just to bump this, I've noticed that the other images only come into rotation once the page is refreshed. Its always the same 4 which show upon the first visit. So potentially if you visit the site a few times you will always see the same images. Is there a way to change it so that the images are always random?

Thanks

Gary

Premium Member

Registered: 22nd Nov 06
Location: West Yorkshire
User status: Offline

14th Jul 11 at 10:10

Would be nice to chance those 4 images to a flash applet with a simple fade in/out to other images.

Nismo

Member

Registered: 12th Sep 02
User status: Offline

14th Jul 11 at 10:56

quote:
Originally posted by Gary
Would be nice to chance those 4 images to a flash applet with a simple fade in/out to other images.

no flash, do it with jquery, stay clear of flash

Gary

Premium Member

Registered: 22nd Nov 06
Location: West Yorkshire
User status: Offline

14th Jul 11 at 11:07

Nothing wrong with flash!

Sam

Moderator
Premium Member

Registered: 24th Dec 99
Location: West Midlands
User status: Offline

14th Jul 11 at 11:10

There is if you use an iPhone/iPad/iPod to look at a website

Dom

Member

Registered: 13th Sep 03
User status: Offline

14th Jul 11 at 11:42

quote:
Originally posted by Gary
Nothing wrong with flash!

You're right there isn't anything wrong with using Flash, but only if the application needs it. Using Flash for simple image fades is pretty sloppy and a big no no (certainly i would question the designer/developer), especially when there are a handful of tools that are better suited like JQuery/Mootools/JS/HTML5 etc.

Gary

Premium Member

Registered: 22nd Nov 06
Location: West Yorkshire
User status: Offline

14th Jul 11 at 14:19

Think I'm still stuck in 2000odd when everything was in flash

Simon

Member

Registered: 24th Apr 03
Location: Oxfordshire
User status: Offline

14th Jul 11 at 16:58

Any info on what you are talking about? Out of my depth

New Topic

New Poll