Jul 20, 2008

Viewing Images - Thumbnails to full size
Free Web Hosting, No Ads > CONTRIBUTE > Computers > Programming Languages > HTML, XML etc..
Pages: 1, 2

free web hosting

Viewing Images - Thumbnails to full size

fsoftball
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?


Reply

Inspiron
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...

 

 

 


Reply

nickmealey
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

Reply

fsoftball
May 14 2005, 04:10 AM
Hi,

I tried Inspirion's code. Thanks!

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

Reply

fsoftball
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.

Reply

BuffaloHELP
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!

Reply

Inspiron
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...

Reply

BuffaloHELP
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
*


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).

Reply

Inspiron
May 14 2005, 08:55 AM
That really motivates me... Really...
Thanks...

Reply

fsoftball
May 16 2005, 06:49 AM
Perfect! Outstanding! The missing () were the problem. Thank you all for your generous help.

Reply


Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.
Confirm Code:

Pages: 1, 2
Similar Topics

Keywords : viewing images thumbnails

  1. Centering Page Of Html At Various Display Widths - Viewing Screen Shots No Matter Resolution (14)
  2. Double Combo Box Produces Images? - (1)
    I am trying to do a website which requires two drop down boxes that will display different images.
    Basically you select a category then you can select a sub category from the second drop down box.
    Now all the scripts I found online that do this direct you to a link by either pressing Go or some
    kind of submit button. Can some one point me in the right direction to make the selection show
    different images? In the end I want to have an image show up when you select the sub category, then
    have the user be able to drag and drop that image to a different part of the screen...
  3. Correct Markup For A List With Big Images - so that it validates (7)
    How will the correct markup be for a list that has big images (different images each) next to it?
    Like a list of places you can go and each one with a picture of the destination (but not just a
    bullet, and aligned to the right, AND IE compatible).... So that i can use a heading, a little
    description and a floated img to the right, and avoid pasting the img itself in the document, but
    through a css background rule in the given div or whatever... Thanks in advance!...
  4. Substitute Form Button For An Image - homemade images in forms buttons (3)
    Hi, I have the next formular : CODE  <form method='post'
    action='index.php?mode=2&id=1'>                <input type='hidden'
    name='name' value='Canon Digital Ixus 700'/>                <input
    type='hidden' name='id' value='1'/>                <input
    type='hidden' name='qty' value='1'>                <input
    type='hidden' name='cost' value='40'>                <input
    type='submit' value='Add to ca...
  5. Opening Images In Pictureviewer Instead Of Browser - Locally (7)
    What I am trying to do is make up a small HTML site which will be based localy on my computer and
    basicly show all of the images I have taken on different holidays. What I want though is when I
    click on an image for it to be opened up in Windows Picture Viewer. As the web site will all be
    saved locally on my computer and not be going on the internet is there any way of achiving this? I
    am running Windows XP Professional if it makes any difference Thank you in advance,kvarnerexpress...
  6. Web Images Optimizer? Is There Any? - (5)
    can any1 tell me where can i find a imge optimizer for web... so.. i have a lot of jpg images w 300
    dpi inside a folder named IMG... i want convert all images to 72 dpi and 75 quality the fastest
    possible... can any software do that? thanks /laugh.gif" style="vertical-align:middle"
    emoid=":lol:" border="0" alt="laugh.gif" />...



Looking for viewing, images, thumbnails, full, size

Searching Video's for viewing, images, thumbnails, full, size
advertisement



Viewing Images - Thumbnails to full size



 

 

 

 

ADD REPLY / Got an Opinion! Remove these ADs! RAPID SEARCH! Free Web Hosting [X]
Express your Opinions, Thoughts or Contribute more info. to help others.
Ask your Doubts & Queries to get answers, So that "Together We can help others!" 		Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE