Welcome Guest ( Log In | Register)



2 Pages V   1 2 >  
 Reply to this topicStart new topic
> Viewing Images, Thumbnails to full size
fsoftball
post May 13 2005, 05:52 PM
Post #1


Member [Level 2]
*****

Group: Members
Posts: 78
Joined: 25-April 05
Member No.: 6,158
Hi,

Need help designing a thumbnail page in frontpage. Need to have about six thumbnails aligned on the right hand side, and when you put the mouse over the thumbnail you can preview the image on the same page (as opposed to previewing it in a new window).

Does anyone know a good way to do this?


(list)

Go to the top of the page
 
+Quote Post
Inspiron
post May 13 2005, 07:40 PM
Post #2


Trap Grand Marshal Member
***********

Group: Members
Posts: 1,203
Joined: 25-March 05
Member No.: 4,883
You will have to be familiar with javascript because javascript is the one playing the role of switching pictures.
I've created a sample for you according to your specifications.

CODE

<html>

<head>
<title>New Page 1</title>
<script language="javascript">

function pictureA
 {
  document.preview.src = "1.jpg";
 }
 
function pictureB
 {
  document.preview.src = "2.jpg";
 }

function pictureC
 {
  document.preview.src = "3.jpg";
 }

function pictureD
 {
  document.preview.src = "4.jpg";
 }

function pictureE
 {
  document.preview.src = "5.jpg";
 }

function pictureF
 {
  document.preview.src = "6.jpg";
 }


</script>
</head>

<body>

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
 <tr>
   <td width="50%" rowspan="6"><img src="" name="preview" width="800" height="600"></td>
   <td width="50%"><img src="1.jpg" width="320" height="240" onmouseover="javascript:pictureA();"></td>
 </tr>
 <tr>
   <td width="50%"><img src="2.jpg" width="320" height="240" onmouseover="javascript:pictureB();"></td>
 </tr>
 <tr>
   <td width="50%"><img src="3.jpg" width="320" height="240" onmouseover="javascript:pictureC();"></td>
 </tr>
 <tr>
   <td width="50%"><img src="4.jpg" width="320" height="240" onmouseover="javascript:pictureD();"></td>
 </tr>
 <tr>
   <td width="50%"><img src="5.jpg" width="320" height="240" onmouseover="javascript:pictureE();"></td>
 </tr>
 <tr>
   <td width="50%"><img src="6.jpg" width="320" height="240" onmouseover="javascript:pictureF();"></td>
 </tr>
</table>

</body>

</html>


Hope it helps...

(list)

Go to the top of the page
 
+Quote Post
nickmealey
post May 13 2005, 10:59 PM
Post #3


Premium Member
********

Group: Members
Posts: 156
Joined: 14-March 05
From: Washington, USA
Member No.: 4,520
another code:


CODE

<script>
          //<!--
          //<![CDATA[
         
          first = 1;
          last = 16;
          current = 1;
         
          function nextPicture() {
              // Hide current picture
              object = document.getElementById('slide' + current);
              object.style.display = 'none';
             
              // Show next picture, if last, loop back to front
              if (current == last) { current = 1; }
              else { current++ }
              object = document.getElementById('slide' + current);
              object.style.display = 'block';
          }

          function previousPicture() {
              // Hide current picture
              object = document.getElementById('slide' + current);
              object.style.display = 'none';
             
              if (current == first) { current = last; }
              else { current--; }
              object = document.getElementById('slide' + current);
              object.style.display = 'block';
          }
          //]]>
          // -->



</script>


      <div class="slideShow">
          <div class="setTitle">Family</div>
         
          <div id="slide1" class="slides">
              <div class="slideTitle">01</div>
              <img src="family/01.gif" height="300" width="400" border="0" />
          </div>
          <div id="slide2" class="slides">
              <div class="slideTitle">02</div>
              <img src="family/02.gif" height="300" width="400" border="0" />
          </div>
          <div id="slide3" class="slides">
              <div class="slideTitle">03</div>
              <img src="family/03.gif" height="300" width="400" border="0" />
          </div>
          <div id="slide4" class="slides">
              <div class="slideTitle">04</div>
              <img src="family/04.gif" height="300" width="400" border="0" />
          </div>
          <div id="slide5" class="slides">
              <div class="slideTitle">05</div>
              <img src="family/05.gif" height="300" width="400" border="0" />
          </div>
          <div id="slide6" class="slides">
              <div class="slideTitle">06</div>
              <img src="family/06.gif" height="300" width="400" border="0" />
          </div>
          <div id="slide7" class="slides">
              <div class="slideTitle">07</div>
              <img src="family/07.gif" height="300" width="400" border="0" />
          </div>
          <div id="slide8" class="slides">
              <div class="slideTitle">08</div>
              <img src="family/08.gif" height="300" width="400" border="0" />
          </div>
          <div id="slide9" class="slides">
              <div class="slideTitle">09</div>
              <img src="family/09.gif" height="300" width="400" border="0" />
          </div>
          <div id="slide10" class="slides">
              <div class="slideTitle">10</div>
              <img src="family/10.gif" height="300" width="400" border="0" />
          </div>
          <div id="slide11" class="slides">
              <div class="slideTitle">10</div>
              <img src="family/11.gif" height="300" width="400" border="0" />
          </div>
          <div id="slide12" class="slides">
              <div class="slideTitle">10</div>
              <img src="family/12.gif" height="300" width="400" border="0" />
          </div>
          <div class="controls">
              <a href="javascript:previousPicture()" style="margin: 10px; color: #888888;">< Previous</a>
              <a href="javascript:nextPicture()" style="margin: 10px; color: #888888;">Next ></a>
          </div>
      </div>  






Kinda confusing, but I like it a ton, but don't use .gif images, use jpg

(list)

Go to the top of the page
 
+Quote Post
fsoftball
post May 14 2005, 04:10 AM
Post #4


Member [Level 2]
*****

Group: Members
Posts: 78
Joined: 25-April 05
Member No.: 6,158
Hi,

I tried Inspirion's code. Thanks!

I cannot get the large picture to show. Any ideas?

(list)

Go to the top of the page
 
+Quote Post
fsoftball
post May 14 2005, 04:37 AM
Post #5


Member [Level 2]
*****

Group: Members
Posts: 78
Joined: 25-April 05
Member No.: 6,158
OK...so the error reads "Object expected" for this line:

<td width="50%"><img src="5.JPG" width="320" height="240" onmouseover="javascript:pictureE();"></td>

And all the other lines that are like it. Any help is totally appreciated.
Thanks.

(list)

Go to the top of the page
 
+Quote Post
BuffaloHELP
post May 14 2005, 05:38 AM
Post #6


Desperately seeking "any key" to continue...
Group Icon

Group: Admin
Posts: 3,489
Joined: 23-April 05
From: Trap17 storage box
Member No.: 6,042
If you are referring to Inspiron's code (which is excellent by the way), it's missing () after each called function.

QUOTE(Inspiron)
HTML
function pictureA()
{
  document.preview.src = "1.jpg";
}

As you can see it's perfect if you add () at the end of each called function.

Few suggestion I would make is that the small thumbnail images should be on the left hand side with either cell padding or border AND the larger image on the right hand side. I am going to use Inspiron's code. I think I'll modify it so that a function called can have automatic incremental (so I don't have to type 1, 2, 3...it can be unlimited number of pictures and a single if then else would take care of it)

nickmealey your coding did not work as requested. Nice coding, however. Keep up the good work!

(list)

Go to the top of the page
 
+Quote Post
Inspiron
post May 14 2005, 07:14 AM
Post #7


Trap Grand Marshal Member
***********

Group: Members
Posts: 1,203
Joined: 25-March 05
Member No.: 4,883
Oh ...
Thanks BuffaloHELP for discovering my errors...
I didn't know that as I was typing...

You know I always like to write my codes up to scratch.. smile.gif

Hope it helped you, fsoftball...

(list)

Go to the top of the page
 
+Quote Post
BuffaloHELP
post May 14 2005, 08:02 AM
Post #8


Desperately seeking "any key" to continue...
Group Icon

Group: Admin
Posts: 3,489
Joined: 23-April 05
From: Trap17 storage box
Member No.: 6,042
QUOTE(Inspiron @ May 14 2005, 03:14 AM)
I didn't know that as I was typing...

You know I always like to write my codes up to scratch.. smile.gif
*


You are what we (the OG's) used to call, "the free coders." You have all the codes in your head and the fingers cannot just keep up with your mind. LOL.

You youngens, write 'em codeboys, write 'em! (spin-off of Ride 'em cowboys).