...

View Full Version : Code available for "View Next Image"... ?



Partizan
02-16-2009, 08:11 PM
Hi, Just wondering if anyone has some code for a "View next image" whereby upon onclick the image changes along with some text below the image (i.e. some description of the above image)?

I want to use it e.g. here, http://www.minifigtimes.com/

The pic on the right would change along with the text "LFC have given Marco Van Basten the dreaded 'Vote of Confidence' making the under-fire manager..........." however the browser would remain on http://www.minifigtimes.com/

Any code around for this kinda of feature OR anything similar/better to do?

snowieken
02-16-2009, 08:43 PM
For now, you can toy around with this:



<script type="text/javascript">
function changeIMG(URL) {
document.images.blah.src="../Chirowebsite/foto/annelies.jpg";
document.getElementById("imgcaption").innerHTML="This is your new image!";
}
</script>

Put this in the head section of your page.

Then, in your HTML:


<img name="blah" src="..." onclick="changeIMG();">
<p id="imgcaption" style="width: 100%;">
LFC have given Marco Van Basten the dreaded 'Vote of Confidence' making the under-fire manager the number one favourite to be the next Serie A boss to be shown the door. Van Basten told The Minifig Times that reports LFC had already lined up Francesco Pedone as his successor were 'unsettling the team'.
</p>

This makes the image change one time. I suspect you need it to be changed more than that. It's rather easy to do so if you want, just let me know.

On a side note, that looks to become an awesome website. I love LEGO.

Partizan
02-16-2009, 09:15 PM
Thanks for this!!

It's pretty sweet, I am testing it out here: http://www.minifigtimes.com/test2.shtml

Just 2 things I want to also do.

As you can see I also want some text link like "Next Image" that when hit goes to the next image.

I would also like to have more than one image and perhaps a "Back" link.

These wants possible?
(By the way, Ms Derkins sucks)

EDIT: extra requirement: can I also have the text paragraphed? That is a space between two bodies of text.. ?

snowieken
02-16-2009, 09:53 PM
I'm feeling bored and as I always enjoy myself writing code, here we go...

Head section:


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

var img = new Array();
var caption = new Array();

var path = "http://www.minifigtimes.com/"

img[0] = path + "images-2009/news/2009-02-14-p1.png"
caption[0] = "LFC have given Marco Van Basten the dreaded 'Vote of Confidence' making the under-fire manager the number one favourite to be the next Serie A boss to be shown the door. Van Basten told The Minifig Times that reports LFC had already lined up Francesco Pedone as his successor were 'unsettling the team'.";
img[1] = path + "image2.jpg";
caption[1] = "This is the second one.";
img[2] = path + "image3.jpg";
caption[2] = "And the third.";
// Add more images here


function changeIMG(direction) {

var current=document.images.blah.src;

for (var i = 0;i<img.length;i++) {
if(img[i]==current) {
if(direction=="forward") {
if(i==img.length-1) {
swap(0);
}
else {
swap(i+1);
}
}
if(direction=="back") {
if(i==0) {
swap(img.length-1);
}
else {
swap(i-1);
}
}
break;
}
}
}

function swap(nr) {
document.images.blah.src=img[nr];
document.getElementById("imgcaption").innerHTML=caption[nr];
}

//-->
</script>

You can add more images in the same fashion where I put the comment "add more images here". Due to the way document.image.src works, the full path is required though... I made a variable "path" where you can edit that path, so it's easy to change if you change the path (for example, from your local to your web host).

So, for example, if you want to add an image to the script above, called "image4.jpg" with a caption of "This is image 4!", you add:


img[3]=path + "image4.jpg";
caption[3]="This is image 4!";


If anyone finds a workaround for this full path problem, feel free to add to this code! :)

Then, in your HTML, you can make two links if you want:


<a href="#" onclick="changeIMG('back');">Previous</a>
<a href="#" onclick="changeIMG('forward');">Next</a>

If you need more help getting this to work, don't be afraid to ask!

I'm not exactly sure what you mean with that extra requirement, though.

EDIT: You can put any HTML you want in the captions, if that's what you mean, for instance a <br /> tag.

Partizan
02-17-2009, 08:48 AM
Thanks a million snow for all the effort - this is exactly what I wanted.

Also with the <br /> tag, that's what I wanted also :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum