locked
swapping images RRS feed

  • Question

  • http://www.mmba.org/

    I believe this site was done in Joomla.  I am using EW.  But there's something on that home page that I'd like to do in EW.  On the top-right, the *sponsors* box... very simple, just scrolls through a list of images.  I don't want any caption, just exaclty like it's show there.

    What is the simplest way to do that in EW?

    I tried Google, came across a bunch of java scripts, but I'm a newb and I'm not sure if there's an easier way.

     

     

    Monday, September 6, 2010 11:03 PM

Answers

  • You have 'the call' on your page already, it's the part below:

    $('#portfolio').innerfade({
        speed: 'slow',
        timeout: 4000,
        type: 'sequence',
        containerheight: '220px'
        });

    What you haven't got is the JQuery.Innerfade plugin, the link for which is at the bottom of the page http://medienfreunde.com/lab/innerfade/  You need to add this to the script calls on the page too.

    <script type="text/javascript" src="scripts/jquery.innerfade.js"></script>

    HTH


    Ian Haynes

    EW V4 Add-Ins
    EW resources, hints and tips
    • Marked as answer by JohnB352 Tuesday, September 7, 2010 6:55 PM
    Tuesday, September 7, 2010 5:56 PM

All replies

  • Javascript image rotator or slide show, thousands of them out there. You could use the image rotator contol for asp.net if you are using an asp.net site or something like http://ajaxslideshow.com/add-slidehow-to-expression-web.html 

    Though I'd probably use a jQuery extension.


    Try out the new expressionwebforum.com


    MS MVP Expression Tutorials & Help http://by-expression.com
    Monday, September 6, 2010 11:20 PM
  • The ajax slideshow is way more than what I need.  I don't know what jQuery is, but doing a google search on it brings up things DreamWeaver related.

    All the searching I've done so far gives results for mouse-over effects.  Not what I'm needing.  I need something just like the example in the link, where it swaps several small images, I'm not looking for something to display a photo album.

    Tuesday, September 7, 2010 2:08 PM
  • I like the jQuery Cycle plugin for this:

    http://jquery.malsup.com/cycle/


    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    Tuesday, September 7, 2010 2:24 PM
  • jQuery is not related to DreamWeaver, other than people who create websites may use jQuery and may certainly use DreamWeaver also, as well as EW or other tools.

    The ajax slideshow can be exactly what you want.  Uncheck transistion effects, text captions, don't display the control thumbnails underneath, and you are left with: images that swap in a timed sequence.  (Swapping several small images is displaying a photo album: one that contains those small images.  All that remains is how fancy you want the display to be.)

    I'm not saying you have to use the ajax slideshow, just that it will do what you want.  The example you gave may look simple, but look at the source and you'll find a lot of javascript functions called to do it.  Not much different in concept from the ajax slideshow.

    However, google javascript image rotator and find one that looks simpler to you, if you like.

    Tuesday, September 7, 2010 2:36 PM
  • I just saw the note about Joomla. 

    If its a Joomla site then you want to use a Joomla plugin.  Joomla has its own model and framework for the site and you want to build in functionality by building upon the existing framework.  Your best bet is to visit the Joomla Plugin directory or forum.

    You don't want to modify the theme with this kinda of functionality without using the framework.  It would be a big mistake.


    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    Tuesday, September 7, 2010 3:03 PM
  • Like Chris, I am partial to a jQuery solution, only for this type of application my choice is the jQuery InnerFade plugin http://medienfreunde.com/lab/innerfade/. It is very compact and easy to use, and because the rotated content is specified directly in a simple <ul> in standard HTML, it is indexable by search engines and easily modifiable with standard HTML. Here is an example of its use (the product images on the left): http://earhartrefrig.com/index.html

    In my case, I wanted a caption with each image. InnerFade rotates whatever is inside the list item contents, so I just placed a div in each <li>, with an image and caption, and a little styling in my CSS to center, and done. Adding another item to the rotation is as easy as copying and pasting a list item, then changing its contents. In fact, when I originally set it up I just entered the first <li>, then copied and pasted it as many times as I had images to rotate, then came back and changed the urls and captions. View the page source and see the <ul> with id "testlist."

    If you don't want to download and then publish the jQuery library, you don't have to. Just reference it from the Google CDN, at http://code.google.com/apis/libraries/devguide.html#jquery. Specifically, on that page the most recent version's url is given as http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js. Reference that in a script tag in the <head> and you have access to the latest jQuery library. The Innerfade plugin can be downloaded from the address above, and will have to be saved to and referenced from a location in your site (I use a "scripts" folder on the same level as my "images" folder for easy organization), and published to your online site, as well.

    I think you'll find that, as far as free solutions go that will accomplish your objective, it doesn't get a whole lot easier than jQuery with InnerFade. Give it a shot, and if you run into problems, we're here.  ;-)

    cheers,
    scott


    C'mon, folks. This isn't rocket science, nor neurosurgery. It's "Expression" (singular) "Web" (singular), in that order, followed by a version numeral if you wish to be specific. It is often abbreviated "EW." It is not "Web Expression," "Expressions Web," "Web Expressions," or plain "Expression" or "Expressions." Not using the correct name indicates either ignorance or laziness. Most folks would rather avoid the appearance of either.
    • Proposed as answer by Veign Tuesday, September 7, 2010 7:36 PM
    Tuesday, September 7, 2010 3:16 PM
  • Chris, the example of what the OP wants is on a Joomla site.  That does not mean the OP's site is a Joomla site.
    Tuesday, September 7, 2010 3:20 PM
  • Ahhh...I'm all confused.....
    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    Tuesday, September 7, 2010 3:28 PM
  • Like Chris, I am partial to a jQuery solution, only for this type of application my choice is the jQuery InnerFade plugin http://medienfreunde.com/lab/innerfade/ .

    I've never used (or heard of) jQuery, so thanks for you offer to help with this.

    On this page there's a solution called "A list with images and links" that would be perfect.

    I've been trying this for a while now and I'm at a standstill with this:

    http://brigan.com/test7/

    I downloaded jquery.js and saved it to a folder called "scripts".  It doesn't alternate 2 images that I have.  There's a paragraph of code on the innerfade site that mentions "the call".  I have a feeling that's related to my problem, but I don't know where I'd put that on the page.

     

     

    Tuesday, September 7, 2010 5:19 PM
  • I've never come across innerFade before.  Bookmarked.  Very nice plugin.

    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    Tuesday, September 7, 2010 5:47 PM
  • You have 'the call' on your page already, it's the part below:

    $('#portfolio').innerfade({
        speed: 'slow',
        timeout: 4000,
        type: 'sequence',
        containerheight: '220px'
        });

    What you haven't got is the JQuery.Innerfade plugin, the link for which is at the bottom of the page http://medienfreunde.com/lab/innerfade/  You need to add this to the script calls on the page too.

    <script type="text/javascript" src="scripts/jquery.innerfade.js"></script>

    HTH


    Ian Haynes

    EW V4 Add-Ins
    EW resources, hints and tips
    • Marked as answer by JohnB352 Tuesday, September 7, 2010 6:55 PM
    Tuesday, September 7, 2010 5:56 PM
  • Sorry to take so long getting back. However, as you can see, there is plenty of able assistance here. ;-)

    Ian is correct. The innerfade plugin (all "plugins" of whatever framework) require that the framework itself be loaded first. That part you had (although since there was no version specified, I'm not sure if what you have is sufficient—1.3.2 is required, I believe).

    However, you also have to reference the plugin script itself (after referencing the library) to obtain its functionality. Enter the line that Ian provided above following the reference to the library. Your call is OK, although how you expected to be able to witness the transition with two identical, but differently-named images I don't know. ;-) I brought one of them into Photoshop, which I happened to already have open, and just put "TEST" across the front of one so I could see the change.

    Another thing you'll want to do is use CSS to style the list. The list is still a list, although obviously some dynamic behavior has been added. So, use list-style-type:none to get rid of the bullets, margin and padding of zero to clear the defaults, etc., and you should be good to go.

    cheers,
    scott


    C'mon, folks. This isn't rocket science, nor neurosurgery. It's "Expression" (singular) "Web" (singular), in that order, followed by a version numeral if you wish to be specific. It is often abbreviated "EW." It is not "Web Expression," "Expressions Web," "Web Expressions," or plain "Expression" or "Expressions." Not using the correct name indicates either ignorance or laziness. Most folks would rather avoid the appearance of either.
    Tuesday, September 7, 2010 6:08 PM
  • Ah, that worked!
    That's exactly what I was looking for.

    Thanks to all.

    Tuesday, September 7, 2010 6:59 PM
  • Your call is OK, although how you expected to be able to witness the transition with two identical, but differently-named images I don't know. ;-) 

    Another thing you'll want to do is use CSS to style the list. The list is still a list, although obviously some dynamic behavior has been added. So, use list-style-type:none to get rid of the bullets, margin and padding of zero to clear the defaults, etc., and you should be good to go.

    Hehe.... yeah, luckily it had the fade effect, or I may have been here a while trying to figure out why it didn't change .   I added some styling , but I need to do some more reading on how that's done.  I just used Firebug (something else I learned of on this forum) to look at how they did it in the example, and copied that.

    Thanks for the help.

    Tuesday, September 7, 2010 7:08 PM