IPB

Welcome Guest ( Log In | Register )



Tags
This content has not been tagged yet
2 Pages V   1 2 >  
 Reply to this topicStart new topic

Viewing Images

, Thumbnails to full size
fsoftball
no avatar
Member [Level 2]
*****
Group: Members
Posts: 78
Joined: 25-April 05
Member No.: 6,158
Post #1 post May 13 2005, 05:52 PM
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?

Go to the top of the page
+Quote Post
Inspiron
no avatar
Trap Grand Marshal Member
***********
Group: Members
Posts: 1,203
Joined: 25-March 05
Member No.: 4,883
Post #2 post May 13 2005, 07:40 PM
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...
Go to the top of the page
+Quote Post
nickmealey
no avatar
Premium Member
********
Group: Members
Posts: 156
Joined: 14-March 05
From: Washington, USA
Member No.: 4,520
Post #3 post May 13 2005, 10:59 PM
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
Go to the top of the page
+Quote Post
fsoftball
no avatar
Member [Level 2]
*****
Group: Members
Posts: 78
Joined: 25-April 05
Member No.: 6,158
Post #4 post May 14 2005, 04:10 AM
Hi,

I tried Inspirion's code. Thanks!

I cannot get the large picture to show. Any ideas?
Go to the top of the page
+Quote Post
fsoftball
no avatar
Member [Level 2]
*****
Group: Members
Posts: 78
Joined: 25-April 05
Member No.: 6,158
Post #5 post May 14 2005, 04:37 AM
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.
Go to the top of the page
+Quote Post
BuffaloHELP
no avatar
More than meets the eye
******************
Group: Admin
Posts: 3,696
Joined: 23-April 05
From: Trap17 storage box
Member No.: 6,042
myCENT:19.60
Post #6 post May 14 2005, 05:38 AM
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!
Go to the top of the page
+Quote Post
Inspiron
no avatar
Trap Grand Marshal Member
***********
Group: Members
Posts: 1,203
Joined: 25-March 05
Member No.: 4,883
Post #7 post May 14 2005, 07:14 AM
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...
Go to the top of the page
+Quote Post
BuffaloHELP
no avatar
More than meets the eye
******************
Group: Admin
Posts: 3,696
Joined: 23-April 05
From: Trap17 storage box
Member No.: 6,042
myCENT:19.60
Post #8 post May 14 2005, 08:02 AM
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
[right][snapback]141291[/snapback][/right]

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).
Go to the top of the page
+Quote Post
Inspiron
no avatar
Trap Grand Marshal Member
***********
Group: Members
Posts: 1,203
Joined: 25-March 05
Member No.: 4,883
Post #9 post May 14 2005, 08:55 AM
That really motivates me... Really...
Thanks...
Go to the top of the page
+Quote Post
fsoftball
no avatar
Member [Level 2]
*****
Group: Members
Posts: 78
Joined: 25-April 05
Member No.: 6,158
Post #10 post May 16 2005, 06:49 AM
Perfect! Outstanding! The missing () were the problem. Thank you all for your generous help.
Go to the top of the page
+Quote Post
« Next Oldest · HTML, XML etc.. · Next Newest »
 

2 Pages V   1 2 >
Reply to this topicStart new topic

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No New Posts   2 odomike 773 19th August 2004 - 07:33 AM
Last post by: odomike
No New Posts   3 zer000s 318 12th April 2008 - 10:54 AM
Last post by: the need for speed
No New Posts   5 ipunto21 466 14th October 2004 - 07:57 PM
Last post by: sohahm
No New Posts   0 clouds421 436 26th September 2004 - 01:11 AM
Last post by: clouds421
No New Posts   10 Lyon 2,057 26th March 2008 - 03:38 PM
Last post by: FeedBacker
No New Posts   3 DMA 326 25th October 2004 - 01:02 AM
Last post by: MuTeD
No New Posts 7 alapidus 558 2nd November 2004 - 10:54 PM
Last post by: kelp
No New Posts   1 MacFly 526 16th November 2004 - 11:01 AM
Last post by: LuciferStar
No New Posts   0 masugidsk8r 2,916 10th June 2007 - 05:56 AM
Last post by: masugidsk8r
No New Posts