Author Topic: Javascript - Jquery - LightBox - Visio 2007  (Read 4032 times)

Betazep

  • Sunk
  • Founders
  • Posts: 1685
  • Karma: +14/-5
Javascript - Jquery - LightBox - Visio 2007
« on: February 06, 2013, 10:37:03 PM »
So Visio has an export to webpage function that basically creates a boatload of JS and HTML files. Before doing the export, one can set a hyperlink on an object... and the hyperlink will open from the exported/saved webpage.  The hyperlinks I am using go to an img/ directory to show various screenshots related to the process that the person is clicking on.  My visio is basically a flow chart with hyperlinks to images on each of the process items. Even though I get the hyperlinks to open in a different window, it is not very clean because basically the person has to open an image... then close the tab... open the next image...  then close the tab... etc.  I also did a link to the image with a POST like quality http://url.html?image=MyImage1.jpg  That allows me to use an HTML page to load each image which is only slightly better than just letting the browser render the image directly.  (at least then I can have a background)

Lightbox does EXACTLY what I want to do on this exported visio webpage... but the many files of Javascript that Visio spits out have been too difficult for me to decipher and figure out how to even manually place the link to the stylesheet, the two script lines... and most importantly the rel="lightbox[group]" and title="blahblah" switches in the (a href= /).  (parens used on purpose there for descriptive purposes)

If any of you more-experienced-web-guys have Visio 2007, do you think you can create a Flowchart and add one process box.  Select the process box (object) Insert/Hypertext and add a generic URL.... Save the file as Webpage which will create folders and all the files to render the webpage.... and tell me how I can force the page to render the hyperlink with those two lightbox switches in them?  Basically reverse engineer the Visio webpage build files which contain several .js files and .xml files to build out the page dynamically.  :(

Any help would be super appreciated.  I spent three hours on this today with nothing good coming out of it other than I can definitely build my own html pages with lightbox. 

I googled the hell out of it as well... and only found this.

http://social.technet.microsoft.com/Forums/en-US/visiogeneral/thread/dab71178-4cd4-47d8-aa6d-12195ee17c45/ 

Basically useless and stating basically the same problem I am having with no resolution.
« Last Edit: February 06, 2013, 10:46:48 PM by Betazep »
"The most likely way for the world to be destroyed, most experts agree, is by accident. That's where we come in; we're computer professionals. We cause accidents." -Nathaniel Borenstein

ober

  • Ashton Shagger
  • Ass Wipe
  • Posts: 14305
  • Karma: +73/-790
  • mini-ober is taking over
    • Windy Hill Web Solutions
Re: Javascript - Jquery - LightBox - Visio 2007
« Reply #1 on: February 07, 2013, 08:54:29 AM »
Something tells me it's not that straight forward.  You're probably going to need to generate the files and modify it afterwards.

Betazep

  • Sunk
  • Founders
  • Posts: 1685
  • Karma: +14/-5
Re: Javascript - Jquery - LightBox - Visio 2007
« Reply #2 on: February 07, 2013, 10:14:13 AM »
That is what I am saying. The generated files are relatively complicated. PM me your email and I can send a zip file of the export as a quick example. Maybe you can tell me where the URL link can be edited to add in those keys in a working way.
"The most likely way for the world to be destroyed, most experts agree, is by accident. That's where we come in; we're computer professionals. We cause accidents." -Nathaniel Borenstein

Betazep

  • Sunk
  • Founders
  • Posts: 1685
  • Karma: +14/-5
Re: Javascript - Jquery - LightBox - Visio 2007
« Reply #3 on: February 07, 2013, 04:46:07 PM »
Actually.  I am certain that the object link resides in one HTM file for the page.... it has this code.

Code: [Select]
<html xmlns:v="urn:schemas-microsoft-com:vml"
 xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"/>
<link rel="stylesheet" type="text/css" href="visio.css"/>
<title>Drawing2</title>
<style type="text/css">
v\:* { behavior: url(#default#VML); }
</style>

<script src="vml_1.js" type="text/jscript" language="jscript"></script>

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

var pageID = 0;
var viewMgr = null;

if (parent.g_FirstPageToLoad != null && parent.g_FirstPageToLoad.length > 0)
{
if (parent.g_FileList[parent.g_CurPageIndex].PageID != pageID)
{
location.replace(parent.g_FileList[parent.g_CurPageIndex].PriImage);
}

parent.g_FirstPageToLoad = null;
}

function getPNZ()
{
var rawHTML = VMLDiv.innerHTML;
var strReturn = ""

strReturn = rawHTML.slice( rawHTML.indexOf( '<v:group' ), rawHTML.indexOf( "</v:shape>" ) );
strReturn += "</v:shape></v:group>\n";

return strReturn;
}

function load()
{
viewMgr = new parent.CViewMgr("ConvertedImage", "arrowDiv");

viewMgr.put_Location = ViewMgrSetVMLLocation;


viewMgr.visBBoxLeft = 2.435833;
viewMgr.visBBoxRight = 6.126667;
viewMgr.visBBoxBottom = 4.232708;
viewMgr.visBBoxTop = 7.001667;

viewMgr.Zoom = VMLZoomChange;
viewMgr.setView= VMLSetView;

viewMgr.SupportsDetails = true;
viewMgr.SupportsSearch = true;

parent.viewMgr = viewMgr;

fit();
}

function unload()
{
viewMgr = null;
parent.viewMgr = null;
}

function fit()
{
if(parent.frmToolbar)
{
if (parent.g_WidgetsLoaded)
{
var zoom100 = parent.frmToolbar.document.all('a100');
if (zoom100)
{
parent.viewMgr.PostZoomProcessing = PostZoomProcessing;
zoom100.click();
}
else
{
parent.viewMgr.PostZoomProcessing = PostZoomProcessing;
viewMgr.Zoom(100);
}
}
else
{
window.setTimeout("fit()", 500);
}
}
else
{
parent.viewMgr.PostZoomProcessing = PostZoomProcessing;
viewMgr.Zoom(100);
}
}

function PostZoomProcessing (newZoomLevel)
{
parent.viewMgr.PostZoomProcessing = null;
var pageIndex = parent.PageIndexFromID (pageID);
parent.viewMgr.getPNZ = getPNZ;
parent.CurPageUpdate (pageIndex);
}



var isUpLevel = parent.isUpLevel;
var OnShapeClick = parent.OnShapeClick;
var OnShapeKey = parent.OnShapeKey;
var UpdateTooltip = parent.UpdateTooltip;
var clickMenu = parent.clickMenu;
var toggleMenuDiv = parent.toggleMenuDiv;
var toggleMenuLink = parent.toggleMenuLink;
var GoToPage = parent.GoToPage;

window.onload = load;
window.onunload = unload;
document.onclick = clickMenu;




</script>

</head>

<body style="MARGIN:10px" onresize="VMLOnResize();" onscroll="VMLOnScroll();">

<div id="arrowdiv" style="position:absolute;top:0;left:0;visibility:hidden;z-index:5">
<img id="arrowgif" alt="Shows the location of the selected shape" src="arrow.gif"/>
</div>

<div id="menu1" onclick="clickMenu()" class="hlMenu">
</div>




<div id="VMLDiv" >


<v:group  id="ConvertedImage" style="width:5.331728in;height:4.000000in;position:absolute;visibility=hidden;" coordSize="2666,2000" coordOrigin="-1000,-1000" >

<v:shapetype
  id="VISSHAPE"
  target="_parent"
  coordsize="2666,2000"
  coordorigin="-1000,-1000"
  stroked="f"
  strokecolor="red"
  filled="t"
>
<v:fill opacity="0.0"/>
</v:shapetype>


<v:shape style="top:-1000.0;left:-1000.0;width:2665.9;height:2000.0;position:absolute" coordSize="2666,2000" coordOrigin="-1000,-1000" >
<v:imagedata src="vml_1.emz"/>
</v:shape>

<v:shape type="#VISSHAPE"  origHref="Agentportal.jpg" style="cursor: pointer;" tabindex="1" title="Hello World" origTitle="Hello World"  style="top:-1000;left:-1000;width:2666;height:2000;position:absolute" path=" m -988,988 l 1653,988 l 1653,-988 l -988,-988 l -988,988xe" onmouseover="UpdateTooltip(this,0,1)" onclick="OnShapeClick(0,1)" onfocus="UpdateTooltip(this,0,1);" onkeyup="OnShapeKey(0,1)"/>

</v:group>



</div>



</body>
</html>

« Last Edit: February 07, 2013, 04:58:56 PM by Betazep »
"The most likely way for the world to be destroyed, most experts agree, is by accident. That's where we come in; we're computer professionals. We cause accidents." -Nathaniel Borenstein

Betazep

  • Sunk
  • Founders
  • Posts: 1685
  • Karma: +14/-5
Re: Javascript - Jquery - LightBox - Visio 2007
« Reply #4 on: February 07, 2013, 04:51:53 PM »
This is the object that contains the link  (called origHref="Agentportal.jpg")

Code: [Select]
<v:shape type="#VISSHAPE"  origHref="Agentportal.jpg" style="cursor: pointer;" tabindex="1" title="Hello World" origTitle="Hello
 World"  style="top:-1000;left:-1000;width:2666;height:2000;position:absolute" path=" m -988,988 l 1653,988 l 1653,-988 l -988,
-988 l -988,988xe" onmouseover="UpdateTooltip(this,0,1)" onclick="OnShapeClick(0,1)" onfocus="UpdateTooltip(this,0,1);"
 onkeyup="OnShapeKey(0,1)"/>

This is definitely not in the (a href="AgentPortal.jpg") format where I could just add in --> rel="lightbox[group]" <--

e.g.
Code: [Select]
<a href="AgentPortal.jpg" rel="lightbox[Mygroup1]" title="The Agent Portal">

"The most likely way for the world to be destroyed, most experts agree, is by accident. That's where we come in; we're computer professionals. We cause accidents." -Nathaniel Borenstein

Mike

  • Jackass In Charge
  • Posts: 11248
  • Karma: +168/-32
  • Ex Asshole - a better and more caring person.
Re: Javascript - Jquery - LightBox - Visio 2007
« Reply #5 on: February 07, 2013, 05:45:56 PM »
* Mike goes and cries in a corner after reading that crap

Betazep

  • Sunk
  • Founders
  • Posts: 1685
  • Karma: +14/-5
Re: Javascript - Jquery - LightBox - Visio 2007
« Reply #6 on: March 29, 2013, 12:04:29 AM »
Yeah... I gave up on this.  Found an alternative.
"The most likely way for the world to be destroyed, most experts agree, is by accident. That's where we come in; we're computer professionals. We cause accidents." -Nathaniel Borenstein