Jump to content

  • Free consultations and support
  • Live chatClick Here for Live Chat
  • Call ico 1888-906-1888
    Phone support: Open

    Ready for your call :)

    Our business hours:

    Mon — Fri, 2am — 8pm (EST)

    US & EU support teams

    Phone support: Closed

    We are back in: 1h 20m

    Our business hours:

    Mon — Fri, 2am — 8pm (EST)

    US & EU support teams


Making scrolling images in Dreamweaver CS5

dreamweaver cs5 making scrolling images

  • Please log in to reply
&nsbp;

#1 Salwa

Salwa

    Senior Member

  • Designer
  • 181 posts

Posted 08 November 2013 - 09:52 PM

1.First create your HTML by open your Dreamweaver and go to Create New->HTML and you’re your file.
2 Insert the images you want to scroll on your page (Ctr+Alt+I)Press “Ctrl+Alt+I”. Make sure that your images have similar width and height.
3.Click on your first image and while you are holding the Shift key click on other image to select all your images. Now Press Ctrl+E and from the tag list select “div”. To insert the div, on the “Tag Chooser” screen go to “Insert” . make sure your code is similar to this
<div><img src="img1.png" width="960" height="400" alt="A" /><img src="img2.png" width="960" height="400" alt="B" /><img src="img3.png" width="960" height="400" alt="C" /></div>
4.select the“Split” view and. Add a class name to the div tag like this:
<div class=”scroll”>
5.Now Style the Image by rightclicking on the selected images and click on the option“CSS Styles” -> “New...” –and choose Class for your selector type and then add in the name “scroll.” And click OK.
6. from the “Category” list choose Box and then set your width and height similar to those of one of your images. Keep the option “Same for all” checked for the margin and Padding and set both to zero, and click OK.
7.Right click on your screen and choose the“CSS Styles” -> “New...” and type in your selector like this
.scroll img
from the selector types choose “Combo “ and click “OK”. From the category list choose “Positioning” and then set “Left” and “Top” to 0 and Click “OK”.
8.Now download the plugin jQuery Cycle from here ‘jQuery.Malsup.com’ This will load the source code of the plugins in your browser. Copy this code and paste it a note pad file. Name this file as “jcycle.js” and save it in the same directory that has your Web page.
9.Go to Insert ->Script and select the folder icon beside the Source field and then from there select the jQuery Cycle script and click OK . Go to Code view select then cut the tags “<script>” that contain the jQuery Cycle from the code. Then paste it right above the “</head>” closing tag.
10.then copy and paste this code above the “<script>” tags
<script src=”https://ajax.googlea...y.min.js” type=”text/javascript”></script>
11.Add this before “</head>,” without giving them a “src” attribute. Between the new
<script>
$('.scroll').cycle({
fx: 'scrollRight'
});
</script>

#2 ptu12

ptu12

    Senior Member

  • Designer
  • 238 posts

Posted 18 February 2014 - 08:03 PM

Thank for your tip, it is very helpful!





Also tagged with one or more of these keywords: dreamweaver cs5, making scrolling images

2 user(s) are reading this topic

0 members, 2 guests, 0 anonymous users