Lightbox extension for Dreamweaver MX2004

Report · May 10, 2020

Hi,

I know, I know - it's a 16 year old piece of software however can anyone recommend a relatively simple Lightbox extension/add on that I can download use with DW MX 2004.

I'm no Web Design guru and my expertise is reasonably limited. I came across the Ajatix products (via the Adobe website) and downloaded their app, however it will not install and seems broken/not functional (pic attached) and so far I have had no reply to my emails. I'm running Windows 10.

Many thanks

Sean

Report · May 11, 2020

No need for an extension, just follow https://www.w3schools.com/howto/howto_js_lightbox.asp

Wappler, the only real Dreamweaver alternative.

Report · May 11, 2020

Thanks ever so much Ben...

However I'm going to struggle with that, but I'll give it a go. To clarify, the Javascript goes into the head of my page (I'm good with that)... I need to create a new Stylesheet containing that code (I'm less confident with that but will give it a bash). But the html is confusing my small and confused mind... 😞

Report · May 11, 2020

Unless you defer the javscript running until after the page has loaded then you will need to put the javascript code or link at the end of your page - https://www.w3schools.com/tags/att_script_defer.asp

In this case its not awfully important as there will probably not be a lot of content on the page so it wont take too long to download plus the page content is not depened on anything in the javascript until something is clicked upon on the page but its best to observe best practices and put it at the end of your page.

Just follow the link at the url you have been supplied with (it shows the complete page of code so no need to guess where the code should go):

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_lightbox

Report · May 11, 2020

If you really want an extenion try Project 7 Make sure you check that it will work with your old version of Dreamweaver.

Paul-M - Community Expert

Report · May 11, 2020

I don't know if Ajatix is still in business. I never used their products. But I do know that finding a supported extension for MX 2004 is unlikely in 2020. The web has changed too much and so has the code. MX is no longer fit for purpose.

That said, if you can work with jQuery plugins, you can do this yourself in no time without a lot of manual coding. See working example below.

jQuery UI Dialog

Copy & paste this HTML5 code into a new blank document. Save & test in modern browsers and mobile devices.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog with  Animation</title>

<!--jQuery UI pepper-grinder Theme. 24 more themes available at code.jQuery.com-->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css">

<style>
.container {
width:50%; 
padding:3%; 
margin:0 auto;
text-align:center;
}
</style>

</head>
<body>
<div class="container">
<div id="dialog" title="Basic Dialog Window">
<p>This is an animated Dialog Window which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
</div>

<!--First jQuery core, then jQuery UI-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<!--invoke jQuery UI dialog after page load-->
  <script>
  $( function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });
    $( "#opener" ).on( "click", function() {
      $( "#dialog" ).dialog( "open" );
    });
  } );
  </script>
</body>
</html>

Post back if you have questions.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Adobe Community

Lightbox extension for Dreamweaver MX2004