Adding a Colorbox jQuery slideshow in Dreamweaver

dwcourse — Mon, 21 Mar 2011 02:45:15 +0000

Click logo above to play video…

Clarifications:

1. Colorbox may not preview correctly in Live View in some versions of Dreamweaver. In that case use Preview in Browser instead. It should dispaly correctly in all browsers.

2. Colorbox comes with five example files which demonstrate various appearance settings. In step 2 below, choose the example file you wish to mimic and copy the colorbox.css and images folder from that example.

3. Each color box example demostrates a variety of settings (Elastic Transition, Fade Transition, etc.). These correspond to the rel="exampleX" attribute you add your link in step 10 below. Here is a list of the possible rel attributes and the corresponding Colorbox effect:

example1: elastic transition (popup smoothly transitions to match size of image)
example2: fade transition between image
example3: no transition with container set to 75% of screen size
example4: auto playing slide show
additional examples are available for non-image content but that is beyond the scope of this tutorial.

Summary of the video:

Before you begin: Download the Colorbox zip file at http://colorpowered.com/colorbox/. When the file is unzipped, it will create a colorbox folder containing the following folders:

colorbox
colorbox.ai
content
example1
example2
example3
example4
example5

Plus the files colorbox.ai and README.

In Windows or the Mac Finder (not Dreamweaver) locate your local site folder and create a new folder colorbox inside it.
Copy the following downloaded files into the new colorbox folder in your website that you created in step 1:
- From the colorbox folder:
  jquery.colorbox-min.js
- From the exampleX folder (X is the example you are trying to emulate):
  colorbox.css
  the complete images folder
In Dreamweaver, create and save the file that will contain your Colorbox slide show (I called mine colorbox.html).
Create a folder (I called mine slides) in your local site to hold the images for your slide show and place your web-formatted images in it.
In the code, in the of your of your document: In the Insert palette, click the script icon and insert the link to the jQuery file hosted by Google at:
In the code, in the of your of your document immediately following the script tag you inserted above: In the Insert palette, click and link to the jquery.colorbox-min.js file.
In the CSS Styles palette, click the Attach Style Sheet (link) icon and link to the colorbox.css file.
Cut and paste the javascript code below into the of your document BELOW the scripts added above (Colorbox will not function properly if the scripts do not appear in the correct order in the code.):
<script> $(document).ready(function(){ //Examples of how to assign the ColorBox event to elements $("a[rel='example1']").colorbox(); $("a[rel='example2']").colorbox({transition:"fade"}); $("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"}); $("a[rel='example4']").colorbox({slideshow:true}); $(".example5").colorbox(); $(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344}); $(".example7").colorbox({width:"80%", height:"80%", iframe:true}); $(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"}); $(".example9").colorbox({ onOpen:function(){ alert('onOpen: colorbox is about to open'); }, onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); }, onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); }, onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); }, onClosed:function(){ alert('onClosed: colorbox has completely closed'); } }); //Example of preserving a JavaScript event for inline calls. $("#click").click(function(){ $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here."); return false; }); }); </script>
Insert the link(s) to your images.
Add the
rel="example1"
attribute to your links using the Quick Tag Editor (right click on the tag in the status bar). You can use any value (not just example1) but be sure to give each link the same rel attribute so that they are all part of the same slide show.

Give each link a title (which will be used as the caption in Colorbox) by selecting the link and typing the title into the Title field in the properties inspector.

Switch to Live View and test your slide show.

Using Photoshop Smart Objects in Dreamweaver

dwcourse — Wed, 12 Jan 2011 02:31:25 +0000

Duration 6 minutes

I recently asked for suggestions for videos and tutorials and Jim McKibben asked “how to effectively use Dreamweaver with Adobie Creative Suite?” That’s a pretty broad subject, but I thought I’d start by demonstrating how you can integrate Photoshop Smart Objects into your Dreamweaver workflow.

I hope you’ll find the video helpful. If you have any questions about Photoshop Smart Objects, feel free to ask them using the comments form below. And, if you have topics you’d like me to tackle in future tutorials and videos, submit them using my contact form.

If you enjoyed the information in this article, you may be interested in Dominate Dreamweaver. My 12-week online course which will take you from the basics of Dreamweaver through complex topics such as Spry menubars and on to building complete interactive websites. The cost for the course is $397 (or three payments of $149.99).

Click here for more information or use the button below to register now.

Editing content in absolutely positioned divs in Dreamweaver

dwcourse — Thu, 19 Mar 2009 16:17:20 +0000

Question from @discuit via Twitter: A coder we use has coded the site in Absoloute DIVs, and now we can't select any text in Design view. Any idea how to fix it?

Answer: Discuit, hover your cursor over the border of the div you want to edit (even one underneath another layer) until it highlights. Then click on border to select div. Now you can click inside the div and edit as usual.

Alternatively, you can also set the CSS visibility property to hidden for the top div in order to access the underlying div for editing. Just make sure you change it back!

Update: And, of course, I overlooked the obvious. Simply select the div you want to edit in Dreamweaver's AP Elements tab. Once the div is selected, you can click inside the div and edit as usual.

Follow me on Twitter: @DWcourse

DWcourse: Adobe Dreamweaver Blog » Dreamweaver Content Editing

Adding a Colorbox jQuery slideshow in Dreamweaver

Clarifications:

Summary of the video:

Using Photoshop Smart Objects in Dreamweaver

Editing content in absolutely positioned divs in Dreamweaver