galeria en bridge

cuideru · #1 (**permalink**) 24/03/2011, 13:47

Hola, hice una galería de fotos en Adobe Bridge. Éste programa la exporta un archivo .html. Alguien sabe cómo podría incorporarlo a una caja en CSS?

Gracias.

ArielGomeX · #2 (**permalink**) 24/03/2011, 13:55

1- Tienes conocimientos de CSS?

2- A que te refieres con Caja?

3- Puedes postear los HTML y explicar lo que quieres hacer.

Grasias.

cuideru · #3 (**permalink**) 24/03/2011, 14:21

Gracias por contestar.

Lo que quiero hacer es incrustar una galería de fotos a una web que estoy haciendo en CSS. Podría hacerla en Flash, pero he visto que era tan cómodo hacerla en Bridge que me pareció una buena opción.

Hice la galería en Bridge y este programa la exporta como archivo .html. Este archivo tiene este código:

Código:

<!-- saved from url=(0013)about:internet -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Gallery</title>
<style>
body,html {
margin-top:0;
margin-left:0;
margin-right:0;
margin-bottom:0;
height: 100%;
width: 100%;
}
</style>
<!-- Active Content Workaround Support File -->
<script src="resources/AC_RunActiveContent.js" language="javascript"></script>
<script language="JavaScript" type="text/javascript">
function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  } 
  return -1;
}
</script>

<script language="JavaScript" type="text/javascript">
  var startImg = getQueryVariable("startImg");
  //alert(startImg);
</script> 

<!-- Flash Detection Script Block -->
<script language="JavaScript" type="text/javascript">
<!--
// -----------------------------------------------------------------------------
// Globals
// Major version of Flash required
var requiredMajorVersion = 8;
// Minor version of Flash required
var requiredMinorVersion = 0;
// Minor version of Flash required
var requiredRevision = 0;
// the version of javascript supported
var jsVersion = 1.0;
// -----------------------------------------------------------------------------
// -->
</script>
<script language="VBScript" type="text/vbscript">
<!-- // Visual basic helper required to detect Flash Player ActiveX control version information
Function VBGetSwfVer(i)
  on error resume next
  Dim swControl, swVersion
  swVersion = 0
  
  set swControl = CreateObject("ShockwaveFlash.ShockwaveFlash." + CStr(i))
  if (IsObject(swControl)) then
    swVersion = swControl.GetVariable("$version")
  end if
  VBGetSwfVer = swVersion
End Function
// -->
</script>
<script language="JavaScript1.1" type="text/javascript">
<!-- // Detect Client Browser type
var isIE  = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false;
var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true : false;
var isOpera = (navigator.userAgent.indexOf("Opera") != -1) ? true : false;
jsVersion = 1.1;
// JavaScript helper required to detect Flash Player PlugIn version information
function JSGetSwfVer(i){
	// NS/Opera version >= 3 check for Flash plugin in plugin array
	if (navigator.plugins != null && navigator.plugins.length > 0) {
		if (navigator.plugins["Shockwave Flash 2.0"] || navigator.plugins["Shockwave Flash"]) {
			var swVer2 = navigator.plugins["Shockwave Flash 2.0"] ? " 2.0" : "";
      		var flashDescription = navigator.plugins["Shockwave Flash" + swVer2].description;
			descArray = flashDescription.split(" ");
			tempArrayMajor = descArray[2].split(".");
			versionMajor = tempArrayMajor[0];
			versionMinor = tempArrayMajor[1];
			if ( descArray[3] != "" ) {
				tempArrayMinor = descArray[3].split("r");
			} else {
				tempArrayMinor = descArray[4].split("r");
			}
      		versionRevision = tempArrayMinor[1] > 0 ? tempArrayMinor[1] : 0;
            flashVer = versionMajor + "." + versionMinor + "." + versionRevision;
      	} else {
			flashVer = -1;
		}
	}
	// MSN/WebTV 2.6 supports Flash 4
	else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.6") != -1) flashVer = 4;
	// WebTV 2.5 supports Flash 3
	else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.5") != -1) flashVer = 3;
	// older WebTV supports Flash 2
	else if (navigator.userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 2;
	// Can't detect in all other cases
	else {
		
		flashVer = -1;
	}
	return flashVer;
} 
// When called with reqMajorVer, reqMinorVer, reqRevision returns true if that version or greater is available
function DetectFlashVer(reqMajorVer, reqMinorVer, reqRevision) 
{
 	reqVer = parseFloat(reqMajorVer + "." + reqRevision);
   	// loop backwards through the versions until we find the newest version	
	for (i=25;i>0;i--) {	
		if (isIE && isWin && !isOpera) {
			versionStr = VBGetSwfVer(i);
		} else {
			versionStr = JSGetSwfVer(i);		
		}
		if (versionStr == -1 ) { 
			return false;
		} else if (versionStr != 0) {
			if(isIE && isWin && !isOpera) {
				tempArray         = versionStr.split(" ");
				tempString        = tempArray[1];
				versionArray      = tempString .split(",");				
			} else {
				versionArray      = versionStr.split(".");
			}
			versionMajor      = versionArray[0];
			versionMinor      = versionArray[1];
			versionRevision   = versionArray[2];
			
			versionString     = versionMajor + "." + versionRevision;   // 7.0r24 == 7.24
			versionNum        = parseFloat(versionString);
        	// is the major.revision >= requested major.revision AND the minor version >= requested minor
			if ( (versionMajor > reqMajorVer) && (versionNum >= reqVer) ) {
				return true;
			} else {
				return ((versionNum >= reqVer && versionMinor >= reqMinorVer) ? true : false );	
			}
		}
	}	
}
// -->
</script>
</head>

<body><div align="center" style="width:100%; height:100%">
<script language="JavaScript" type="text/javascript">
<!-- 
// Version check for the Flash Player that has the ability to start Player Product Install (6.0r65)
var hasProductInstall = DetectFlashVer(6, 0, 65);

// Version check based upon the values entered above in "Globals"
var hasReqestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);

// Location visited after installation is complete if installation is required
var MMredirectURL = window.location;

// Stored value of document title used by the installation process to close the window that started the installation process
// This is necessary to remove browser windows that will still be utilizing the older version of the player after installation is complete
// DO NOT MODIFY THE FOLLOWING TWO LINES
//document.title = document.title.slice(0, 47) + " - Flash Player Installation";
document.title = document.title.slice(0, 47);
var MMdoctitle = document.title;



// Check to see if a player with Flash Product Install is available and the version does not meet the requirements for playback
if ( hasProductInstall && !hasReqestedVersion ) {
    var productInstallOETags = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"'
    + 'width="550" height="200"'
    + 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">'
    + '<param name="movie" value="resources/playerProductInstall.swf?MMredirectURL='+MMredirectURL+'&MMplayerType=ActiveX&MMdoctitle='+MMdoctitle+'" />'
    + '<param name="quality" value="best" /><param name="bgcolor" value="#3A6EA5" />'
    + '<embed src="resources/playerProductInstall.swf?MMredirectURL='+MMredirectURL+'&MMplayerType=PlugIn" quality="high" bgcolor="#3A6EA5" '
    + 'width="550" height="300" name="detectiontest" aligh="middle"'
    + 'play="true"'
    + 'loop="false"'
    + 'quality="best"'
    + 'allowScriptAccess="sameDomain"'
    + 'type="application/x-shockwave-flash"'
    + 'pluginspage="http://www.adobe.com/go/getflashplayer">'
    + '<\/embed>'
    + '<\/object>';
    document.write(productInstallOETags);   // embed the Flash Product Installation SWF
} else if (hasReqestedVersion) {  // if we've detected an acceptable version
    AC_FL_RunContent(
			'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',
			'flashvars','baseRefUrl=resources/&groupxml=group.xml&stylexml=style.xml&localText=localText.xml&livePreview=false&startImg='+startImg,
			'width', '100%',
			'height', '100%',
			'src', 'resources/gallery',
			'quality', 'high',
			'pluginspage', 'http://www.adobe.com/go/getflashplayer',
			'align', 'middle',
			'play', 'true',
			'loop', 'true',
			'scale', 'showall',
			'wmode', 'window',
			'devicefont', 'false',
			'id', 'gallery',
			'bgcolor', '#f7f7f7',
			'name', 'gallery',
			'menu', 'true',
			'allowScriptAccess','sameDomain',
			'movie', 'resources/gallery',
			'salign', ''
			);
  } else {  // flash is too old or we can't detect the plugin
    var alternateContent = 'This photo gallery requires the Adobe Flash Player.'
   	+ '<a href=http://www.adobe.com/go/getflash/>Get the free Flash Player here</a>';
    document.write(alternateContent);  // insert non-flash content
  }
// -->
</script>
<noscript>
	// Provide alternate content for browsers that do not support scripting
	// or for those that have scripting disabled.
  	Sorry, this photo gallery requires that scripting be enabled on your web browser and that the Adobe Flash Player be installed.
  	<a href="http://www.adobe.com/go/getflash/">Download the Adobe Flash Player</a>  	
</noscript>
</div>
</body>
</html>

Me gustaría que la galería apareciera dentro de una caja/contenedor de mi página. En html lo haría con iframes, pero en CSS no se me ocurre cómo resolverlo.

ArielGomeX · #4 (**permalink**) 24/03/2011, 14:31

ok entiendo... pero aun tengo alguna duda, los iFrame llaman el contenido de X pagina o dirección y lo encierra en un FRAME.

Si quires tener efecto de un FRAME es muy facil, solo tienes que tener en cuenta de si quieres o no Scrolls (Barra de desplazamiento) en tu galeria.

En este caso te podre un ejemplo.

Código HTML:

<div id="Caja">Aqui pones todo lo que te genera después de la etiqueta <body></div>

CSS

Código HTML:

#Caja {
position: relative;
width: 900px;
margin: 0 auto;
padding: 10px;
border: solid 5px #ccc;
}

cuideru · #5 (**permalink**) 24/03/2011, 14:45

Gracias por la idea. No quiero utilizar iframes, era sólo una forma de explicar lo que quería hacer, meter la página dentro de la caja.

He seguido tu indicación de meter en la caja el contenido entre <body></body> (fue mi idea inicial) y el resto del script lo he puesto en la cabecera desde <style></style> pero no funciona. Al previsualizar en el navegador no se ve nada dentro de la caja.

Entonces probé a meter todo el código dentro de la caja, y en explorer se ve sin problemas pero en googlechrome y en Morzilla el contenido de la caja ocupa el 100% de la página.

ArielGomeX · #6 (**permalink**) 24/03/2011, 14:58

Tendría que ver el código completo para revisar.

cuideru · #7 (**permalink**) 24/03/2011, 15:05

El código de la página es simple:

Código:

<HTML>
<HEAD>


<STYLE type="text/css">
BODY{
	background:#333333;
}

.contenedor{
	width:932;
	height:1024;
	margin-left:-466px;
	position:absolute; 
	top: 0px;
	left:50%;
	border:1px solid red;
}
.cajacentral{
	width:852;
	height:480;
	margin:374 0 0 40;
	position:absolute;
	border:1 solid green;	
}

</style>
</HEAD>


<body>

	<div class="contenedor">
		<div class="cajacentral">


			
		</div>
	</div>
</body>
</HTML>

Y lo que quiero hacer es meter la galería en "cajacentral".

ArielGomeX · #8 (**permalink**) 24/03/2011, 15:16

cambia tus CSS a estos:

Código:

.contenedor{
	width:932;
	height:1024;
	margin: 0 auto;
	position:relative; 
	border:1px solid red;
}
.cajacentral{
	width:852;
	height:480;
	margin: 0 auto;
	position:relative;
	border:1 solid green;	
}

Me dices si te funcionan

cuideru · #9 (**permalink**) 24/03/2011, 15:32

Gracias, no, no va. Creo que uno de los problemas es que no sé exactamente "de dónde a dónde" va lo que tengo que poner del código del archivo .html en mi cabecera.