ThemeShaper Forums » Thematic

[closed]

Gallery Plugin or Code?

(9 posts)
  • Started 7 years ago by oakview
  • Latest reply from oakview
  • This topic is resolved
  1. oakview
    Member

    I have a customer for whom I've built a website based on Thematic. He wants a gallery for his artwork, with a twist - he wants it to look and function like this example:

    Carolyn Counnas Fine Art

    Does anyone know of a plugin or code that I could add to Thematic that would emulate this style of presentation?

    I'd be grateful for any ideas.

    Posted 7 years ago #
  2. While on the site, I looked through the page source and it looks similar to how I hard coded my menu. I would hard code it myself, that is if your customer is not going to be changing it often.

    Personally I prefer hard coding over plugins because you have more control over the customizations, plus many of the "gallery" plugins out there could confuse a wooden indian!! (no pun intended)

    Posted 7 years ago #
  3. oakview
    Member

    Her gallery is driven by code from Project Seven, and it costs $95.00 USD. I'm thinking there must be a similar style gallery, open source, and based on jQuery, but haven't found one yet - it doesn't have to be exactly the same, just close enough with thumbnails and a full size display area below (or above). Any links would be appreciated if you run across something that might fit the need...

    Posted 7 years ago #
  4. Go to CSSPlay.com. There are quit a few demos, and everything is in CSS so it would be easier to customize the different galleries/menus there. Hope you find something there. I'm not good with the "gallery" thing yet, still working on mine. Sorry I couldn't help more.

    Posted 7 years ago #
  5. Here is how the gallery is coded in HTML........

    <div id="wrapper">Content for id "wrapper" Goes Here
    <div id="container">Content for id "container" Goes Here
    <div id="content">Content for id "content" Goes Here

    </div>
    </div>
    </div>

    CSS would be or similar to...

    #wrapper{}
    #container{}
    #content{}
    #content ul{}
    #content li{}
    #content img{}

    Going by this demo... http://www.projectseven.com/products/galleries/hgmagic/insects.htm

    Each row is in its own <DIV> so add 4 or so images to each <div> like shown in the demo then add as many as you need going down the page.

    I hope this helps!

    Posted 7 years ago #
  6. Oops it linked... sorry..... here it is again

    <div id="wrapper">Content for id "wrapper" Goes Here
    <div id="container">Content for id "container" Goes Here
    <div id="content">Content for id "content" Goes Here

    • (a href="#")<img width="100" height="100" title"" alt"" src="THUMB/IMAGElinkHere" />

    </div>
    </div>
    </div>

    Posted 7 years ago #
  7. Here is the actual codes from that demo in case I confuse anyone with changing the div id names......

    I did not ask permission to use this code so it is <B>ONLY FOR EXAMPLE</B> purposes!!!!! I take NO credit for any of the codes.

    Code from.....
    http://www.projectseven.com/products/galleries/hgmagic/insects.htm

    HTML...

    <div id="p7GS">
    <div id="p7GSvpW3">
    <div id="p7GSvp">
    <div id="p7GSsc">

    • (a href="img_kl/fullsize/ins_01_fs.jpg">
      <img width="100" height="67" title="" alt="Butterfly" src="img_kl/thumbs/ins_01_tmb.jpg">(/a>
      <div>
      Descriptions can be styled in various ways or can be omitted. They are completely optional.
      You can even have (a href="#">hyperlinks in here.</div>
    • (a href="img_kl/fullsize/ins_02_fs.jpg"><img width="75" height="100" title="" alt="Closeup" src="img_kl/thumbs/ins_02_tmb.jpg">
      (/a>
      <div>Descriptions are carried in the actual markup, right below their related images so that search engines can see them. The description element can be separately styled with CSS. In this example, descriptions have a different font-family set.
      </div>
    • (a href="img_kl/fullsize/ins_03_fs.jpg"><img width="100" height="75" title="" alt="Grasshopper" src="img_kl/thumbs/ins_03_tmb.jpg">

      <div>What a pretty bug!</div>

    • (a href="img_kl/fullsize/ins_04_fs.jpg"><img width="67" height="100" title="" alt="Fly" src="img_kl/thumbs/ins_04_tmb.jpg">

      <div>Flies can be beautiful, too (so long as they keep off my lunch).</div>

    • (a href="img_kl/fullsize/ins_05_fs.jpg"><img width="100" height="67" title="" alt="Yellow Monarch" src="img_kl/thumbs/ins_05_tmb.jpg">

      <div>Butterflies are free (and so was this image).</div>

    • (a href="img_kl/fullsize/ins_06_fs.jpg"><img width="100" height="79" title="" alt="Honeybee" src="img_kl/thumbs/ins_06_tmb.jpg">

      <div>I'm almost certain this is a bee.</div>

    • (a href="img_kl/fullsize/ins_07_fs.jpg"><img width="100" height="75" title="" alt="Paper Moth" src="img_kl/thumbs/ins_07_tmb.jpg">

      <div>Is it a moth or is it a butterfly.</div>

    • (a href="img_kl/fullsize/ins_08_fs.jpg"><img width="100" height="67" title="" alt="Velvet Butterfly" src="img_kl/thumbs/ins_08_tmb.jpg">

      <div>This little fellow is very classy for a bug.</div>

    • (a href="img_kl/fullsize/ins_09_fs.jpg"><img width="75" height="100" title="" alt="Grasshopper" src="img_kl/thumbs/ins_09_tmb.jpg">

      <div>This grasshopper is named George.</div>

    • (a href="img_kl/fullsize/ins_10_fs.jpg"><img width="100" height="74" title="" alt="Butterfly Landing" src="img_kl/thumbs/ins_10_tmb.jpg">

      <div>Are those extra eyes?.</div>

    • (a href="img_kl/fullsize/ins_11_fs.jpg"><img width="100" height="75" title="" alt="Dragonfly" src="img_kl/thumbs/ins_11_tmb.jpg">

      <div>If you know what this bug is, please let us know.</div>

    • (a href="img_kl/fullsize/ins_12_fs.jpg"><img width="100" height="75" title="" alt="Butterfly Flight" src="img_kl/thumbs/ins_12_tmb.jpg">
      <div>She's obviously looking for something - or someone.</div>
    • (a href="img_kl/fullsize/ins_13_fs.jpg"><img width="67" height="100" title="" alt="Beetle" src="img_kl/thumbs/ins_13_tmb.jpg">
      <div>Orange is the hot new color for antenna.</div>
    • (a href="img_kl/fullsize/ins_14_fs.jpg"><img width="100" height="75" title="" alt="Wolf Spider" src="img_kl/thumbs/ins_14_tmb.jpg">
      <div>Back off bucko.</div>
    • (a href="img_kl/fullsize/ins_15_fs.jpg"><img width="100" height="67" title="" alt="Butterfly on Leaf" src="img_kl/thumbs/ins_15_tmb.jpg">
      <div>It really is a small world.</div>

    </div>
    </div>
    </div>
    <div id="p7GSnv">
    <span id="p7GSnvtitle">Thumbnail panels:</span></div>
    <div id="p7GSfs">
    </div>
    <div id="p7GSpb">
    <img width="125" height="22" alt="Now Loading" src="p7gs/images/prog-bar.gif"></div>
    <div id="p7GSah">
    </div>
    <!--[if IE 5]>
    <style>
    #p7GSvp, #p7GSfsc, #p7GSfsd {text-align: left;}
    #p7GSnv a {height: 1em; width: 1em;}
    </style>
    <![endif]-->
    </div>

    CSS....

    #p7GS {
    font-family:Arial,Helvetica,sans-serif;
    }
    #p7GSvpW3 {
    background-color:#D5DC96;
    background-image:url("images/keylime.jpg");
    background-repeat:repeat-x;
    border-bottom:1px solid #000000;
    margin:0 auto;
    }
    #p7GSvp {
    background-color:#D5DC96;
    background-image:url("images/keylime.jpg");
    background-repeat:repeat-x;
    margin:0 auto;
    position:relative;
    }
    #p7GSsc {
    margin:0;
    position:relative;
    }
    #p7GSsc div {
    display:none;
    }
    #p7GSsc ul {
    margin:0;
    padding:0;
    position:relative;
    }
    #p7GSsc li {
    display:inline;
    list-style-type:none;
    margin:0;
    padding:0;
    }
    #p7GSsc img {
    background-color:#FFFFFF;
    border:1px solid #000000;
    margin:6px 8px;
    padding:8px;
    }
    #p7GSsc .p7GSover {
    background-color:#333333;
    border-color:#FFFFFF;
    }
    #p7GSsc .p7GSon {
    background-color:#333333;
    border-color:#FFFFFF;
    }
    #p7GSnv {
    background-color:#444444;
    background-image:url("images/trowlabel.gif");
    background-position:left center;
    background-repeat:no-repeat;
    border-bottom:1px solid #000000;
    border-top:1px solid #999999;
    color:#B6B1AB;
    font-size:1em;
    margin:0;
    padding:3px 0;
    text-align:center;
    }
    #p7GSnvtitle {
    display:inline !important;
    margin:0 10px 0 0;
    }
    #p7GSnv span {
    display:none;
    }
    #p7GSnv a {
    background-color:#999999;
    border:1px solid #000000;
    color:#333333;
    font-size:0.8em;
    font-weight:normal;
    padding:0 6px;
    text-decoration:none;
    }
    #p7GSnv a:visited {
    background-color:#999999;
    color:#333333;
    }
    #p7GSnv a:hover, #p7GSnv a:active, #p7GSnv a:focus {
    background-color:#FF9900;
    border-color:#FFFFFF;
    color:#FFFFFF;
    }
    .p7GSnvon {
    background-color:#A1C240 !important;
    border-color:#FFFFFF !important;
    color:#FFFFFF !important;
    cursor:default;
    }
    #p7GSfs {
    display:none;
    margin:30px 10px;
    }
    .p7GSfst {
    margin:0 auto;
    width:1px;
    }
    .p7GSfsi {
    background-color:#FFFFFF;
    border:1px solid #333333;
    padding:12px;
    }
    .p7GSfsi img {
    border:1px solid #333333;
    }
    .p7GSfsc {
    }
    .p7GSfsc p {
    font-size:0.7em;
    font-weight:bold;
    letter-spacing:0.2em;
    margin:0 0 3px 1px;
    text-transform:uppercase;
    }
    .p7GSfsd {
    font-size:0.75em;
    padding:0;
    }
    .p7GSfsd div {
    background-color:#FFFFFF;
    color:#333333;
    font-family:"Comic Sans MS",Arial,Helvetica,sans-serif;
    margin:0;
    padding:12px;
    }
    .p7GSfsd p {
    margin:0;
    }
    #p7GSpb {
    position:absolute;
    visibility:hidden;
    }
    #p7GSah {
    left:0;
    position:absolute;
    top:0;
    visibility:hidden;
    }
    .p7GScounter {
    font-weight:normal;
    letter-spacing:normal;
    text-transform:lowercase;
    }

    Posted 7 years ago #
  8. If the desired end result is scrollable thumbnails with animated image presentation there's a ton of jquery based solutions for this. jQuery tools (google it) comes to mind.

    Posted 7 years ago #
  9. oakview
    Member

    Found some good jQuery gallery candidates:

    AD Gallery

    Galleriffic

    Galleria Plugin

    Pikachoose

    One of these should fill the client'w wishes.

    Thanks everyone!

    Posted 7 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.