...

View Full Version : Resolved How to put pictures in the thumbnails.



effpeetee
11-21-2008, 04:04 PM
This program (http://exitfegs.co.uk/hoverstayc.html)was written for me by a respected member of this forum. I want to leave it exactly as it is functionally but substuting a thumbnail image for the text in the thumbnail block.

I have tried all I can think of with no success.:confused: Any help gratefully received.

For your information, most of the images have thumbnail images available with the suffix a.:D

Frank

BoldUlysses
11-21-2008, 05:49 PM
Here's the basic principle with the CSS altered. Get someone to fix the JavaScript (I can't imagine it'd be that hard but my JS knowledge is nil) and I'd say you're in business:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>We're getting there, thanks to Aero.</title>

<style type="text/css">

/*This program was written for me by Aero*/

body {
margin: 0;
padding: 0;
background-color:#050;
overflow:hidden;
}

#thumbs {margin:0 auto;
padding:0;
margin-top:10px;
text-align:center;
list-style:none;
width:100%;
}

#thumbs li {float:left;
background-color:#070;
border: 1px solid #000;
margin:0 2px;
display:inline;

}

a {
display: block;
width: 120px;
height: 90px;
color:#000;
font-family:arial,non-serif;
font-size:10px;
text-decoration:none;
overflow: hidden;
}

a .big, #imghold {
border: 2px solid #000;
visibility: hidden;
}

a:hover {
overflow: visible;
}

a:hover .big, #imghold {
position: absolute;
left: 50%;
margin-left: -240px; /* half img width */
top: 55%;
margin-top: -180px; /* half img height */
visibility: visible;
}



</style>
<script type="text/javascript">
function getElementsByClassName(className, tag, elm){
var testClass = new RegExp("(^|\\\\s)" + className + "(\\\\s|$)");
var tag = tag || "*";
var elm = elm || document;
var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
var returnElements = [];
var current;
var length = elements.length;
for(var i=0; i<length; i++){
current = elements[i];
if(testClass.test(current.className)){
returnElements.push(current);
}
}
return returnElements;
}
function setShow()
{
var createImg = document.createElement('img');
var links = getElementsByClassName('imgshow');
for(i = 0; i < links.length; i++)
{
links[i].onmouseover = function()
{
theimg = this.getElementsByTagName('img')[0].getAttribute('src');
theimgwidth = this.getElementsByTagName('img')[0].getAttribute('width');
theimgheight= this.getElementsByTagName('img')[0].getAttribute('height');
document.getElementById('imghold').setAttribute('width',theimgwidth);
document.getElementById('imghold').setAttribute('height',theimgheight);
document.getElementById('imghold').setAttribute('src',theimg);
document.getElementById('imghold').style.display = 'block';
}
}
}
window.onload = setShow;
</script>
</head>
<body>
<ul id="thumbs">
<li><a href="#" class="imgshow"><img src="6a.jpg" /><img class="big" src="6.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="7a.jpg" /><img class="big" src="7.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="8a.jpg" /><img class="big" src="8.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="9a.jpg" /><img class="big" src="9.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="17a.jpg" /><img class="big" src="17.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="18a.jpg" /><img class="big" src="18.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="19a.jpg" /><img class="big" src="19.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="20a.jpg" /><img class="big" src="20.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="21a.jpg" /><img class="big" src="21.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="22a.jpg" /><img class="big" src="22.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="23a.jpg" /><img class="big" src="23.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="24a.jpg" /><img class="big" src="24.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="26a.jpg" /><img class="big" src="26.jpg" width="480" height="360" /></a></li>

</ul>


<img id="imghold" alt="" style="display:none;">
</body>
</html>

Note the class added to the larger images to allow for the presence of another img tag in the anchor.

Rowsdower!
11-21-2008, 06:08 PM
I'll grant you that I'm relatively new at this, but shouldn't this code work just fine without having to mess with the JS?

Based on msuffern's code:



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>We're getting there, thanks to Aero.</title>

<style type="text/css">

/*This program was written for me by Aero*/

body {
margin: 0;
padding: 0;
background-color:#050;
overflow:hidden;
}

#thumbs {margin:0 auto;
padding:0;
margin-top:10px;
text-align:center;
list-style:none;
width:100%;
}

#thumbs li {float:left;
/*background-color:#070;*/
border: 1px solid #000;
margin:0 2px;
display:inline;

}

a {
display: block;
width: 120px;
height: 90px;
color:#000;
font-family:arial,non-serif;
font-size:10px;
text-decoration:none;
overflow: hidden;
}

a .big, #imghold {
border: 2px solid #000;
visibility: hidden;
}

a:hover {
overflow: visible;
}

a:hover .big, #imghold {
position: absolute;
left: 50%;
margin-left: -240px; /* half img width */
top: 55%;
margin-top: -180px; /* half img height */
visibility: visible;
}



</style>
<script type="text/javascript">
function getElementsByClassName(className, tag, elm){
var testClass = new RegExp("(^|\\\\s)" + className + "(\\\\s|$)");
var tag = tag || "*";
var elm = elm || document;
var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
var returnElements = [];
var current;
var length = elements.length;
for(var i=0; i<length; i++){
current = elements[i];
if(testClass.test(current.className)){
returnElements.push(current);
}
}
return returnElements;
}
function setShow()
{
var createImg = document.createElement('img');
var links = getElementsByClassName('imgshow');
for(i = 0; i < links.length; i++)
{
links[i].onmouseover = function()
{
theimg = this.getElementsByTagName('img')[0].getAttribute('src');
theimgwidth = this.getElementsByTagName('img')[0].getAttribute('width');
theimgheight= this.getElementsByTagName('img')[0].getAttribute('height');
document.getElementById('imghold').setAttribute('width',theimgwidth);
document.getElementById('imghold').setAttribute('height',theimgheight);
document.getElementById('imghold').setAttribute('src',theimg);
document.getElementById('imghold').style.display = 'block';
}
}
}
window.onload = setShow;
</script>
</head>
<body>
<ul id="thumbs">
<li><a href="#" class="imgshow"><img src="6a.jpg" height="auto" width="100%" /><img class="big" src="6.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="7a.jpg" height="auto" width="100%" /><img class="big" src="7.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="8a.jpg" height="auto" width="100%" /><img class="big" src="8.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="9a.jpg" height="auto" width="100%" /><img class="big" src="9.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="17a.jpg" height="auto" width="100%" /><img class="big" src="17.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="18a.jpg" height="auto" width="100%" /><img class="big" src="18.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="19a.jpg" height="auto" width="100%" /><img class="big" src="19.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="20a.jpg" height="auto" width="100%" /><img class="big" src="20.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="21a.jpg" height="auto" width="100%" /><img class="big" src="21.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="22a.jpg" height="auto" width="100%" /><img class="big" src="22.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="23a.jpg" height="auto" width="100%" /><img class="big" src="23.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="24a.jpg" height="auto" width="100%" /><img class="big" src="24.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="25a.jpg" height="auto" width="100%" /><img class="big" src="26.jpg" width="480" height="360" /></a></li>

</ul>



</body>
</html>

I realize you could use an image class rather than type in the height and width for each img tag, but I thought of that after I'd finished and I'm too lazy... :)

Anyway, this works for me in IE7. God knows what the rest of the world would see...

effpeetee
11-21-2008, 06:35 PM
Thank you both for your efforts, but they do not work for me. I have already tried most things that seem obvious with no success. The program is supposed to show the large image on hover and stay on screen until another is hovered over. Getting it to work without the "stay on screen function" is relatively easy.

I too am no real use at Javascript. I have all the books but my eyesight is not good and reading is quite a feat.

Any further ideas gratefully received.

This is what I get (http://exitfegs.co.uk/ahovercheck.html) with that code in IE7.It is better with FFox3 but does not stay on screen.

This is the original. (http://exitfegs.co.uk/hoverstayc.html)

Frank

bazz
11-21-2008, 11:33 PM
Frank, I don't see either of those pages holding the image onscreen - unless the large image overlaps the thumbnail. In ff3, they both work the same way. But if you click and drag from the thumb to the larger image, it will remain onscreen until you move the kouse off the large image.

Have you looked at javascript kit.com?


check out these two links.

http://minishowcase.net/demo/
http://www.smashingmagazine.com/2007/05/18/30-best-solutions-for-image-galleries-slideshows-lightboxes/

bazz

effpeetee
11-22-2008, 08:02 AM
Hello bazz,

Using the original (http://exitfegs.co.uk/hoverstayc.html)with IE7, IE8,. FFox3 (the latest) and Maxthon. All of them after hover leave the image on screen. This also on my laptop, so I can't understand why not with you.

look here. (http://exitfegs.co.uk/hover1.gif)

I have Vista Ultimate fully up to date, 64 bit.

Thanks for the links.

Frank

bazz
11-22-2008, 12:51 PM
Oops. I had noscript activated, which prevented the js from working.

In the page which works, you have this code set-up



<li><a href="#" class="imgshow">A Japanese garden<img src="7.jpg" width="480" height="360" /></a></li>



In the broken page you seem to have made it more complex and this might be why it isn't doing as you want.



<li><a href="#" class="imgshow"><img src="6a.jpg" height="auto" width="100%" /><img class="big" src="6.jpg" width="480" height="360" /></a></li>


does this work?



<li><a href="#" class="imgshow"><img src="6a.jpg" /><img src="6.jpg" width="480" height="360" /></a></li>


bazz

effpeetee
11-22-2008, 09:21 PM
Thanks Bazz,
If you check here (http://exitfegs.co.uk/bhovercheck.html)you will see that a big step has been made. The thumb images now appear but I think that the Javascript must need attention.

I am even worse with javascript than any thing else.

It is better with FFox and Chrome.
Any further ideas or pointers in the necessary direction will be welcome.

Frank

_Aerospace_Eng_
11-22-2008, 09:53 PM
This should work

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<base href="http://www.exitfegs.co.uk" />
<title>We're getting there, thanks to Aero.</title>
<base href="http://exitfegs.co.uk/">
<style type="text/css">
body {
margin: 0;
padding: 0;
background-color:#050;
overflow:hidden;
}
#thumbs {
margin:0;
padding:0;
text-align:center;
list-style:none;
width:100%;
}
#thumbs li {
float:left;
/*background-color:#070;*/
border: 1px solid #000;
margin:2px;
display:block;
}
a {
display: block;
width: 120px;
height: 90px;
color:#000;
font-family:arial, non-serif;
font-size:10px;
text-decoration:none;
overflow: hidden;
}
a .big, #imghold {
border: 2px solid #000;
visibility: hidden;
}

a img {
border:0;
display:block;
}
a:hover {
overflow: visible;
}
a:hover .big, #imghold {
position: absolute;
left: 50%;
margin-left: -240px; /* half img width */
top: 50%;
margin-top: -180px; /* half img height */
visibility: visible;
}
</style>
<script type="text/javascript">
function getElementsByClassName(className, tag, elm){
var testClass = new RegExp("(^|\\\\s)" + className + "(\\\\s|$)");
var tag = tag || "*";
var elm = elm || document;
var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
var returnElements = [];
var current;
var length = elements.length;
for(var i=0; i<length; i++){
current = elements[i];
if(testClass.test(current.className)){
returnElements.push(current);
}
}
return returnElements;
}
function setShow()
{
var createImg = document.createElement('img');
var links = getElementsByClassName('imgshow');
for(i = 0; i < links.length; i++)
{
links[i].onmouseover = function()
{
theimg = this.getElementsByTagName('img')[1];
theimgsrc = theimg.getAttribute('src');
theimgwidth = theimg.getAttribute('width');
theimgheight= theimg.getAttribute('height');
document.getElementById('imghold').setAttribute('width',theimgwidth);
document.getElementById('imghold').setAttribute('height',theimgheight);
document.getElementById('imghold').setAttribute('src',theimg.src);
document.getElementById('imghold').style.display = 'block';
}
}
}
window.onload = setShow;
</script>
</head>
<body>
<ul id="thumbs">
<li><a href="#" class="imgshow"><img src="6a.jpg" width="100%" /><img class="big" src="6.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="7a.jpg" width="100%" /><img class="big" src="7.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="8a.jpg" width="100%" /><img class="big" src="8.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="9a.jpg" width="100%" /><img class="big" src="9.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="17a.jpg" width="100%" /><img class="big" src="17.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="18a.jpg" width="100%" /><img class="big" src="18.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="19a.jpg" width="100%" /><img class="big" src="19.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="20a.jpg" width="100%" /><img class="big" src="20.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="21a.jpg" width="100%" /><img class="big" src="21.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="22a.jpg" width="100%" /><img class="big" src="22.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="23a.jpg" width="100%" /><img class="big" src="23.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="24a.jpg" width="100%" /><img class="big" src="24.jpg" width="480" height="360" /></a></li>
<li><a href="#" class="imgshow"><img src="25a.jpg" width="100%" /><img class="big" src="26.jpg" width="480" height="360" /></a></li>
</ul>
<img id="imghold" alt="" style="display:none;">
</body>
</html>


Before we were getting the first image, now we want the second image so we change [0] to [1]. I've made it a little more efficient as well.

effpeetee
11-22-2008, 10:28 PM
That's perfect Aero. Thanks once again. I have just got my book of Javascript out to try to understand. I know I'm well past my 'sell by date', but I'm not dead yet. At least, that's my story, and I'm sticking to it!.

I have added some text. Not perfect, but I'll work on it.

I've put the file here (http://exitfegs.co.uk/hoverstayc.html).

Best wishes.

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum