Skip to main content
G
GrinchusMaximus
Participant
May 11, 2020
Question

Lightbox extension for Dreamweaver MX2004

  • May 11, 2020
  • 3 replies
  • 1813 views

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

This topic has been closed for replies.

3 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
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. 

 

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
P
Paul-M
Legend
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
BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
May 11, 2020

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

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    G
    GrinchusMaximusAuthor
    Participant
    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... 😞

    O
    osgood_
    Legend
    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

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices