Facebook   Twitter    e-mail newsletter    YouTube    RSS Feed    Android App    iPhone and iPad App     BlackBerry App    


Results 1 to 6 of 6

Thread: HTML: navigation and images

  1. #1

    Question HTML: navigation and images

    I really should go and do some or the other course.

    But in the meantime ... am building a simple HTML-based web page, where I need some basic info in one area, and a large image in another. The image should be framed by arrows (or some obvious clue as to the navigation) which will then load the following/previous image ...

    I don't want a scroll bar, as the image sits in a wide div, and may not always take up the full width of the div (depending on viewer's screen res); therefor the need for nav buttons to the following image. Of course I can build dozens of HTML pages - each with a different image and repeating the rest of the info, but this is inefficient.

    I know close to nothing about this stuff, but should imagine that frames are the way to go? Are they? How the $#@%^ do I save them then?

    Using Dreamweaver CS5. Thanks folks - sorry, I really am clueless when it comes to HTML.

  2. #2

    Default

    wordpress, slideshow gallery plugin, profit

  3. #3

    Default

    http://wowslider.com/html5-image-gal...asic-demo.html right click-> view source

    Looks like they use
    li 's for the images
    a dvi to display the current image
    and then a 's for the next/prev in the #wowslider-container1 a.ws_prev class

    That's where the 'magic' happens on the next/prev.
    The had the arrows in the same picture (./arrows.png) but only display the one side of the pic (margin-top: -21px
    and on the other side margin-top: 0px;
    Align them in the middle of the div (top: 50% and all done.

    Google jquery slider and you can pickup a prebuilt thing that will do all this for you ..

    like http://nivo.dev7studios.com/features/


    #wowslider-container1 a.ws_prev {
    position: absolute;
    display: block;
    top: 50%;
    margin-top: -21px;
    z-index: 60;
    height: 43px;
    width: 29px;
    background-image: url(./arrows.png);
    }

  4. #4

    Default

    Thanks for the links. I intend using a custom built interface (rather than anything from WordPress or Joomla etc), as I need the full control to get that specific look I want ... frustrating, I know. JQuery is just a whole new (totally unfamiliar) territory to me ...

    Doing this with Flash, which I understand, is starting to be appealing. It just seems crazy to use dying tech.
    Last edited by lupedelupe; 17-07-2012 at 01:36 PM.

  5. #5

    Default

    Going with frames - pretty straight-forward actually. But have to admit that the JQuery sliders look amazing!

  6. #6

Similar Threads

  1. HTML
    By Derrick in forum Company and People Info
    Replies: 0
    Last Post: 23-11-2011, 05:16 PM
  2. Unseen images brings new dimension to Google Images
    By Derrick in forum Broadband and IT News
    Replies: 0
    Last Post: 13-12-2010, 10:26 AM
  3. html help...
    By darrenb in forum Off Topic
    Replies: 3
    Last Post: 27-03-2010, 11:40 PM
  4. Unseen images brings new dimension to Google Images
    By rpm in forum Broadband and IT News
    Replies: 1
    Last Post: 04-02-2009, 09:06 AM
  5. HTML to JPG
    By Fudzy in forum Software and Web Development
    Replies: 7
    Last Post: 19-07-2007, 10:05 AM

Bookmarks

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •