Jump to content
Sign in to follow this  
Kalfis

Javascript - Galeria de Imagens

Recommended Posts

Kalfis

Boas, eu estou a construir uma galeria de imagens através de Javascript, mas estou a ter uns problemas, ele vai-me buscar as imagens, mas nao consigo ir buscá-las dentro de uma pasta (ele só me vai buscar as imagens se elas estiverem fora de qualquer pasta) e outro problema é q tive de fazer uma variável para ir buscar as imagens, e tive de por um limite de imagens a ter, no meu caso 256, mas ela vai-me sempre buscar as imagens, mesmo nao tendo as 256 o produtor vai ate aos 256, e queria mostrar apenas as imagens q tenho.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>PushButton SlideShow</title>

<!-- 
Set up the caption font in the following style.
Also set the styles for the controls.
Place the style script in the head of the page.
//-->

<style type="text/css">
.Caption {
font-family: Arial;
font-weight: normal;
font-size:  12pt;
color:      #FF3300; }

A.Controls:link    { color:#666666;
                     text-decoration:none;
                     font-family: Arial;
                     font-size:   14pt;
                     font-weight: bold; }
A.Controls:visited { color:#666666; text-decoration:none; 
                     font-family: Arial;
                     font-size:   14pt;
                     font-weight: bold; }
A.Controls:active  { color:#666666; text-decoration:none;
                     font-family: Arial;
                     font-size:   14pt;
                     font-weight: bold; }
A.Controls:hover   { color:#00FF00; text-decoration:none;
                     font-family: Arial;
                     font-size:   14pt;
                     font-weight: bold; }

</style>

<!-- 
Place the following script in the head of the page.
Follow the set-up instructions within the script.
//-->

<script language="javascript" type="text/javascript">

// (C) 2003 by CodeLifter.com
// Free for all users, but leave in this header.

// ==============================
// Set the following variables...
// ==============================

// Set the slideshow speed (in milliseconds)
var SlideShowSpeed = 3000;

// Set the duration of crossfade (in seconds)
var CrossFadeDuration = 2;

var Picture = new Array(); // don't change this
var Caption = new Array(); // don't change this
var showHot = false;       // don't change this

// Specify the image files...
// To add more images, just continue
// the pattern, adding to the array below.
// To use fewer images, remove lines
// starting at the end of the Picture array.
// Caution: The number of Pictures *must*
// equal the number of Captions!

try
{


for(var x = 0; x < 256 ; x= x+1)
{
    Picture[x]  = x+'.JPG';
    Caption[x]  = x+'.JPG';
}
}
catch(err)
{}



// Specify the Captions...
// To add more captions, just continue
// the pattern, adding to the array below.
// To use fewer captions, remove lines
// starting at the end of the Caption array.
// Caution: The number of Captions *must*
// equal the number of Pictures!




// =====================================
// Do not edit anything below this line!
// =====================================

var tss;
var iss;
var jss = 0;
var pss = Picture.length-1;

var preLoad = new Array();
for (iss = 1; iss < pss+1; iss++){
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];}

function control(how){
if (showHot){
if (how=="H") jss = 1;
if (how=="F") jss = jss + 1;
if (how=="B") jss = jss - 1;
if (jss > (pss)) jss=1;
if (jss < 1) jss = pss;
if (document.all){
document.images.PictureBox.style.filter="blendTrans(duration=2)";
document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
document.images.PictureBox.filters.blendTrans.Apply();}
document.images.PictureBox.src = preLoad[jss].src;
if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
if (document.all) document.images.PictureBox.filters.blendTrans.Play();
}}






</script>

</head>

<!--
Add onload='showHot=true;' to the body tag.  This is
needed to prevent false object calls while the page
is loading. Optional: If you are using this in a
popup, as in this demo, adding self.focus() to the
onload event in the body tag will bring the popup
to the front each time it is loaded [recommended]. 
//-->

<body onload='showHot=true;self.focus();' style="background-color:#000000" link="#FF0000" vlink="#FF0000" alink="#FF0000">

<!--
The following table holds the images, captions, and controls.
Place the table in your page where you want the slideshow
to appear.  Follow the instructions for each table cell.
//-->

<div align="center">
  <center>

<table border="0" cellpadding="10" cellspacing="0">
  <tr>
    <!--
    The next table cell holds the images.
    Set cell and image width and height the same.
    The img src must have name=PictureBox in its
    tag.  Often, the first image in the Picture
    array in the script is used here; but you
    may also use a different, introductory image
    as we have here, since this image is shown
    only on start-up.
    //-->
    <td width="350" height="280" colspan="3">
    <img alt="" src="desktopography.jpg" name="PictureBox" width="350" height="280" id="IMG1" onclick="height:auto ; width:auto" />
    
    </td>
  </tr>
  <tr>
    <!-- 
    The next table cell holds the captions.
    This table cell must have id=CaptionBox and
    class=Caption in its tag. The default caption
    shows whilst loading in all browsers; NS4
    will show only the default caption, throughout.
    //-->
    <td id="CaptionBox" class="Caption" align="center" colspan="3">
    Galeria de Imagens
    </td>
  </tr>
    <!--
    The following three cells contain the controls.
    Each of the control a href's must contain class=
    Controls, to attach the styles (see top of script).
    To dress this up a bit, you can of course substitute
    <img src> images for the text in the links.
    //-->
  <tr>
    <td align="center">
    <a class="Controls" href="#" onclick="javascript:control('B');">< <</a>
    </td>
    <td align="center">
    <a class="Controls" href="#" onclick="javascript:control('H');">| | |</a>
    </td>
    <td align="center">
    <a class="Controls" href="#" onclick="javascript:control('F');"><b>> ></b></a>
    </td>
  </tr>  
</table>

  </center>
</div>

</body>

</html>

Share this post


Link to post
Share on other sites
mohican

como o script diz

// Caution: The number of Pictures *must*

// equal the number of Captions!

se tens 256 nessa parte do code, vai sempre mostrar 256 "imagens", se só queres ter 10 imagens tens de alterar esse número.

quanto a ir buscar imagem dentro da pasta convém defenires a pasta também no codigo


Ubi dubium ibi libertas: Where there is doubt, there is freedom

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.