PDA

View Full Version : Lightroom 3 gallery embed into Dreamweaver page


Designer
09-06-2011, 04:40 PM
Hi
I am a designer photographer building my own website. Does anyone have experience of embedding a 'Lightroom web gallery' into a web page. I want it to sit within my standard inner page, with header and menu bar above and footer beneath. I have looked extensively on the web and the question is asked often but never answered satisfactorily. both pieces of software are adobe and the Lightroom feature is called 'web gallery' I cant believe it is so difficult or it never occurred to adobe that anyone would want to use the 'web gallery' in a website. any insight gratefully received as always
Designer

Corrosive
09-07-2011, 06:42 AM
Not used Lightroom before but does it give you any code we could have a look at?

Designer
09-08-2011, 02:10 PM
Hi Corrosive, Thanks for getting back so soon. Lightroom exports the gallery into a folder. the folder contains 2 subfolders and an html file. the subfolders are 'images' and 'resources' the later containing: gallery.swf, playerProductInstall.swf and 4 subfolders: javascript, localization, mediaGroupData and styles.
- on double clicking the html file the gallery then jumps up in Safari and plays. For some reason, I cant open the file in Dreamweaver or Textedit it just throws up the statement:
"Sorry, this photo gallery requires that scripting be enabled on your web browser and that the Adobe Flash Player be installed. Download the Adobe Flash Player"
However, I did get to the code. I am not sure if it is forum protocol to put large slabs of code in these replies so apologies if not - this is the code of the index.html file. PS I want the viewer to sit in a cell of a table on my site.
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lifestyle</title>
<style type="text/css">
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/javascript/AC_RunActiveContent.js" type="text/javascript" ></script>
<script 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 type="text/javascript">
<!--
var startImg = getQueryVariable("startImg");
//alert(startImg);
// -->
</script>

<!-- Flash Detection Script Block -->
<script 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 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 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 = i - 1) {
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>
<script 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='+MMredirec tURL+'&MMplayerType=ActiveX&MMdoctitle='+MMdoctitle+'" />'
+ '<param name="quality" value="best" /><param name="bgcolor" value="#3A6EA5" />'
+ '<embed src="resources/playerProductInstall.swf?MMredirectURL='+MMredirec tURL+'&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','livePreview=false&baseRefUrl=&groupxml=resources/mediaGroupData/group.xml&stylexml=resources/styles/style.xml&localText=resources/localization/localText.xml&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', ''
&nbsp;);
} 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. -->
<p>
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>
</p>
</noscript>
</body>
</html>

gentleone
09-08-2011, 02:20 PM
I am not sure if it is forum protocol to put large slabs of code in these replies so apologies if not
No problem, Designer. Only wrap your code in code tags (# or <> symbols) in the advanced editor.

Corrosive
09-08-2011, 02:47 PM
Sorry :( Flash is right out of my comfort zone I'm afraid. Hopefully someone else can help out.

gentleone
09-08-2011, 03:05 PM
design view can't render scripts (not sure about live view), so it just reads the noscript tag.

If you want to have the gallery on your page you just have to wrap the whole gallery script in a div and position that div whereever you want on your page

DWcourse
09-09-2011, 04:14 AM
Actually it's a pain to drop a gallery from Lightroom into Dreamweaver. You need to know a bit about building pages to do it and, if you know enough to do it, you know enough to know it's not a good idea.

Designer
09-11-2011, 04:22 PM
Thanks to all for the above - if this seems such a bad idea, can anyone recommend a gallery viewer that will sit in a cell on a web page? R

Corrosive
09-11-2011, 04:28 PM
That's a bit of an open question and depends what you want the gallery to look like and do. That said I'd definitely go for something jquery powered. Try these; http://www.1stwebdesigner.com/css/fresh-jquery-image-gallery-display-solutions/

Designer
09-13-2011, 05:08 PM
Thanks for this - i have checked out and really like one of the Jquery plug-ins which I have downloaded with all it's bits and pieces - will battle on and report. thanks again. Designer

Designer
09-14-2011, 09:31 AM
Currently styling up the gallery with CSS with some success - was going to introduce my images by swapping with the originals in the image folder of the downloaded 'example' and giving them the same names eg '1.jpg' and 't1.jpg' for the thumbnails. this seem pretty laborious - am I missing something? I know that when I have got it in the shape I am happy with, I will need advice on how to get the thing into my page and where to put the js files etc, would someone be able to point me in the right direction on this? Thanks as ever - D