Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Customizing the FlexSlider Widget

  • We are going to customize a widget in order to have this slideshow use our images instead of the default ones
  • Open FlexSlider_default.html & show the code, this widget uses jQuery to produce our slideshow
  • You can see there are many javascript & css files that are used to create this widget
  • This widget uses 4 images that are 800x504 in size, so we just need to replace their images with ours
  • Turn to split view and place your cursor in the coding on line 74 for the images
  • Use point to file or browse to replace their image with ours
  • Do the same for the 8 different images in this area of the page
  • If you preview in live view you will see the image area changes based on the height of the images
  • If you do not click at all, it runs through a slideshow of the images
  • In the configuration area for this widget you can customize this so it will auto play immediately, do a continuous loop, etc.
  • Let's change the name of this page to gallery, and add a link to it from the travel news section of our homepage
  • Add any text you want onto this page and customize it as needed

Customizing the FlexSlider Widget

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Preview in Browser 0:53
  • FlexSlider Widget Files 1:24
    • Code View
    • Insert Own Images into Widget
  • Preview in Browser 6:38
  • Comment Out Code 7:47
  • Understanding Widget Code 9:10
  • Comment Out Hyperlink 9:47
  • Add Text Content to Widget 10:34
  • Preview in Browser 11:06
  • Summary 12:29

Transcription: Customizing the FlexSlider Widget

And now for the moment we have all been waiting for: we are going to go ahead and make the FlexSlider widget our own by working with our own images.0000

What I have open is the FlexSlider default file: in other words, when I downloaded and installed the FlexSlider widget files, I put them into this folder here, in my root folder, so I knew where they were all located.0011

And you can see, there is a CSS folder, a Javascript folder, an Images folder...and what I have also done is taken another folder of images (which are the images that I am going to put into the FlexSlider) in place of the default ones that the widget contains (which is all of those cupcake images).0027

I'll show you what I mean: if I move out to the browser with this particular file--and I'll go out to Chrome as an example--you can see, there are all of these images placed within the FlexSlider.0051

What I want to do is get my own images plugged in here; and basically, they have four separate images (and if you are into desserts, these look pretty good), and these images I want to replace with my own.0065

That is what we are going to do: now, if I open up the file (and this is the HTML file that I downloaded with the rest of the files here for the widget)--if I open up that file (it's an HTML file) in Dreamweaver, it doesn't look like anything is going on.0082

And that is because we have to place this in the browser in order to get it to work; because of all these Javascript files up at the top, this is actually using jQuery and quite a few different Javascript files.0101

So, we have to go into the full browser to really get the effect of this particular widget.0117

It makes it somewhat difficult to actually figure out what is going on and how to insert our images.0123

Also, I want to point out that there are two CSS files that were downloaded along with this page, as well; I don't have any of our Wanderlust Travel style sheets attached to this, either; so this is just a pure page from the widget itself.0130

Now, this is a bit more of an advanced-type feature, because we are dealing in Javascript; and because of that, we have to go into the code just a little bit, because as you can see, I can't really do anything from Design View.0150

But this shouldn't be too difficult: what I want to point out is a couple of things.0165

First of all, notice that, if I go into Code View and go down to line 69, it says FlexSlider: this is actually where the content begins, and if you are unsure yourself, what you can do is go into Split View and simply highlight this text.0171

We know that that is where the text starts on the page, so everything above this line, we don't need to bother with.0192

What I am going to do is focus on the content under this line; and let me show you that in Code View.0201

I am down on line 69 in this file; and within that, notice, we have these image tags; and the images say it's the Kitchen Adventure Cheesecake Brownie.0208

Now, that is coming from a folder within the files for this widget, called Images; and that is right here.0223

So, if I open this up, there are four images that were downloaded along with the files; and these are the images they are using.0230

We should be able to replace their images with our own, and we should have no trouble getting our images into this widget.0239

Now, our images are not the exact same size as theirs, so we will have to see what happens when we plug in ours.0249

But let's get our images plugged in first.0256

Now, this page actually contains two different types of code: the first one has an ID of slider; the second one--if you go down further, it has an ID of carousel.0259

The carousel is actually one style of this Widget Browser; so let's go down and, in the carousel area, we are going to ignore it; let's place our images within the upper area for the one that says slider on line 71.0276

I can use the Dreamweaver interface to replace the images; so, I am going to click inside that cheesecake brownie image, and I am going to go down to the source area here.0298

And what I am going to do in my Files panel is replace it with the images in the Slideshow folder.0310

I have a couple of choices here (let me close up the CSS Styles); and here are the images I am going to replace theirs with.0318

I am going to select the Point to File where their image is located, and I am going to drag out to the clock tower--my image.0327

And you can see, it now shows the Slideshow folder and the clock-tower image; so, I simply click in each one of these and use Point to File to point to my image.0337

That was clock-tower; I will next go to the bakery; and I'll just keep going right down the line--so you see, I'm not really having to type any code; I just needed to go into the Code View in order to access these.0349

I'll do the next one; I just did the prader--I'll do the prague-clock; next one will be...I'm just going right down the line here to my images...strauss...the next image--there are actually eight of these, so this will be tahiti-outrigger, and I have two left.0364

I am almost there: I'll click on Point to File, and after tahiti is tahiti-sunset; and the last one in this area is vegas.0386

Let's put this in the browser and see what happens: we have replaced their images with our own--and guess what?--there is my clock; I'll go ahead and move--there is the bakery; the Prader Ferris Wheel in Vienna...there is Old Town in Prague, and the clock.0398

Now, these aren't exactly the correct size of images; since their images were a little bigger than ours, we don't quite have the right resolution on that.0426

Now notice, if I put my cursor inside the width and height for this image, there is nothing listed; and this is where it gets interesting, because I have to find in this code somewhere where the information is located that tells it what size the images are.0437

The other piece within this is: you can see, there is code on the page that still has their images; and that is the carousel piece down below.0456

Now, I don't need this carousel; so notice, the style is Display None, which is actually hiding it; but I certainly don't want their images to have to download onto my page.0467

So, what I am going to do--instead of completely deleting this, I am going to select this div tag and scroll down to the bottom div tag.0480

So, in other words, I selected lines 99 (I didn't change any of these) through 127; and what I am going to do is apply a comment.0489

What that will do is remove the browser from trying to find those files; if I apply a comment, you will see, it turns light, and it will not be used by the browser.0503

Let's take a look further on the page (and let me close up the Properties here--oops--there we go--close that one up), and let's scroll up on the page a little bit.0516

And what you will actually see (get rid of my panels over there) is information here about the actual slideshow piece.0527

And notice, it doesn't really give me any information about the size of the images themselves; that information is located elsewhere.0540

I have all of these files where that information is located--so the key is, "How do I figure out what is making these particular images stay this size?"0551

I'll have to look through here and figure that one out.0564

But at least I have all of their code still on my page; and you can see, there are comments for what each item in this code means.0568

But it is a good idea to get familiar with some of the code and at least read through the comments before you try and use these features.0578

Now, the other thing I want to do in order to make this line is: there is this information here (and I'll move into Design View to show you)--I don't want this on my page.0588

So, what I am going to do is also comment that out; the reason I am doing that is because I am going to use this page as a base for my own pages, and I don't want to see that; but what that code contains is the hyperlink to go to this widget out on the Internet, in case I have questions.0599

So, I am going to take line 66 and select it; and I am going to click on the comment and say "Apply HTML comment to that line, also."0619

That will remove that from showing in the browser; and what I am going to do instead is say View My Slideshow.0630

I'll make that a Header 1; and you can see, it's up pretty close to the top, so I'll just hit Enter one more time--and there is the slideshow.0642

Now, we still haven't addressed the issue with the size of the images; however, we have plugged our own in, so we will have to address the size of the images moving forward.0653

But if I go to preview this (and let's look at it in Internet Explorer), you can see that, in Internet Explorer, there are some interesting things happening.0666

This is Internet Explorer 8; let's put it into another browser and just make sure there isn't something in my code that was causing a problem when I commented things out; and you can see, there isn't.0678

Now, what is interesting is: look at what the slideshow does--what it is doing is adjusting the image size, based on what is looking at it.0693

That is a pretty awesome feature for these do I really need to modify these?--definitely not, unless I want to make sure they only get to a certain size.0705

That is my slideshow; that is working with the FlexSlider slideshow and plugging in your own images within that FlexSlider widget.0719

These images do auto-adjust to the width of the browser; now, if you want to limit that, you will have to dig around in the code just a little bit more.0731

I could get into adjusting quite a few of these settings, but that is a bit beyond the scope of this course.0741

That is how you can work specifically with the FlexSlider widget; it also introduces you to the Widget Browser and exposes you a little bit to how some of these widgets are set up within the Widget Browser, so you can move in and start playing around with some of these.0749

Choose a widget that you like and really become familiar with it; obviously, I can customize this page much better, but because it's all set up as my own page, what I can do is (and I'll close with this)--I am going to do a Save As.0768

I am going to save this particular file out, and this is going to be--notice, I do have a slideshow already, so I am going to name this one flex-slideshow.0785

That way, I can save it out and still have that original FlexSlider default file available to me.0802

Right here, I am going to say "Update links--yes"; if I say No, my images won't be able to be found by this file, so Update links--yes.0810

I'll pop this into the browser one more time, just to make sure that those images are working--and they are, as you can see.0822

That is working with the FlexSlider widget from within the Widget Browser and working on that widget from within Dreamweaver itself.0831

Thank you for watching; see you in the next lesson!0841