Suche Bilder-Gallerie.

  • Hallo Core'ler

    Ich suche eine Bildergallerie für eine HTML basierende website.


    Am besten wäre so eine slideshow wie bei Imagehack :)


    Könnt ihr mir helfen, da meine Alte Bilder-Gallerie nicht so der bringer ist. :s


    DANKE :D

    [SIZE=4][COLOR=Yellow][CENTER]
    [COLOR=LemonChiffon] [SIZE=2]Danke an[/SIZE] [SIZE=3][COLOR=lime]Marvin[/COLOR][/SIZE][/COLOR]
    [/CENTER]
    [/COLOR][/SIZE]

  • Zitat von Kogoro;197723

    Nur mit HTML ist sowas nicht möglich.
    Versuch es mit jQuery in JS.
    Hier findest du versch.: 13 Super Useful jQuery Content Slider Scripts and Tutorials | Tutorials


    ja das ist mir klar.

    ich meien auch ein javascript das man in html einbinden kann.

    ich kann 0 mit js anfangen.

    deswegen frage ich auch :D

    [SIZE=4][COLOR=Yellow][CENTER]
    [COLOR=LemonChiffon] [SIZE=2]Danke an[/SIZE] [SIZE=3][COLOR=lime]Marvin[/COLOR][/SIZE][/COLOR]
    [/CENTER]
    [/COLOR][/SIZE]

  • Dann stell die Fragen bitte nächstes Mal deutlicher.
    Such dir einfach eins aus. Meistens gibt es dann da Beispiele, aus welchen du den nötigen Quelltext extrahieren kannst.
    Beispiel: Moving Boxes
    Quellcode:

    HTML
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">  <head>     <meta http-equiv="Content-type" content="text/html; charset=UTF-8">          <title>Moving Boxes</title>          <link rel="stylesheet" href="[URL="http://www.mmorpg-core.com/forum/view-source:http://css-tricks.com/examples/MovingBoxes/css/style.css"]css/style.css[/URL]" type="text/css" media="screen" charset="utf-8">      [COLOR=Yellow]<script src="[URL="http://www.mmorpg-core.com/forum/view-source:http://css-tricks.com/examples/MovingBoxes/js/jquery-1.3.1.min.js"]js/jquery-1.3.1.min.js[/URL]" type="text/javascript" charset="utf-8"></script>     <script src="[URL="http://www.mmorpg-core.com/forum/view-source:http://css-tricks.com/examples/MovingBoxes/js/slider.js"]js/slider.js[/URL]" type="text/javascript" charset="utf-8"></script>[/COLOR] </head>   <body>      <style type="text/css"> .bsa_it_ad { border: 0 !important; padding: 6px !important; overflow: hidden !important; background: #eae3c0 !important; -moz-box-shadow: 0 0 48px black; -webkit-box-shadow: 0 0 48px black; } .bsa_it_ad a { margin: 0 !important; padding: 0 !important; } .bsa_it_ad a img { border: 0 !important; position: static !important; } .bsa_it_ad a:hover img { margin: 0 !important; } .bsa_it_ad a:hover { background: none !important; } .bsa_it_i { margin: 0 15px 0 0 !important; } .bsa_it_t { margin: 12px 0 0 0 !important; font: 16px Georgia, Serif !important; } .bsa_it_d { font: 11px Verdana, Helvetica, Arial, Sans-Serif; padding-right: 10px; } .bsa_it_p { bottom: 5px !important; right: 5px !important; padding: 0 !important; } .bsa_it_p a:hover { background: none !important; } .header-button {    border-top: 1px solid #cf942d !important;    border-bottom: 0 !important;    background: #964418 !important;    background: -webkit-gradient(linear, left top, left bottom, from(#e86e36), to(#964418)) !important;    background: -moz-linear-gradient(top, #e86e36, #964418) !important;    padding: 3px 10px !important;    -webkit-border-radius: 8px !important;    -moz-border-radius: 8px !important;    border-radius: 8px !important;    -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0 !important;    -moz-box-shadow: rgba(0,0,0,1) 0 1px 0 !important;    box-shadow: rgba(0,0,0,1) 0 1px 0 !important;    text-shadow: rgba(0,0,0,.4) 0 1px 0 !important;    color: white !important;    font-size: 13px !important;    font-family: Georgia, serif !important;    text-decoration: none !important;    vertical-align: middle !important;    display: inline !important;    margin: 0 !important;     float: none !important;    } .header-button:hover {    border-top: 1px solid #4f220d !important;    background: #4f220d !important;    color: #ccc !important;    text-decoration: none !important;    margin: 0 !important;    } .header-button:active {    border-top: 1px solid #261105 !important;    background: #261105;    } .header-button:visited:before, .header-button:visited:after {     content: "" !important; } </style>  <div id="hook-just-in-case" style="height: 77px; background: black url(/examples/images/examples-header-bg.png) repeat-x; color: white !important; font: 14px Georgia, Serif !important; position: relative; zoom: 1; width: 100% !important; z-index: 10000 !important;">          <div style="width: 960px; height: 77px; margin: 0 auto; position: relative;">              <img src="[URL="http://www.mmorpg-core.com/forum/view-source:http://css-tricks.com/examples/images/example-logo.png"]/examples/images/example-logo.png[/URL]" alt="Demo Page" style="position: absolute; top: 0; left: 0;" />                  <div style="position: absolute; left: 140px; top: 52px; width: 400px; text-align: left;">                             <a class="header-button" href="[URL="http://www.mmorpg-core.com/forum/view-source:http://css-tricks.com/"]http://css-tricks.com[/URL]">&larr; Back Home</a> &nbsp;               <a class="header-button" href="[URL="http://www.mmorpg-core.com/forum/view-source:http://css-tricks.com/downloads/"]http://css-tricks.com/downloads/[/URL]">Other Demos &rarr;</a>                     </div>                  <div style="width: 420px; position: absolute; right: 0; top: 0;">             <div id="bsap_1248303" class="bsarocks bsap_3469a2a501a9e18091036aa0c89f9dcb"></div>         </div>              </div>      </div>     <div id="wrapper">              <img src="[URL="http://www.mmorpg-core.com/forum/view-source:http://css-tricks.com/examples/MovingBoxes/images/movingboxes.png"]http://www.mmorpg-core.com/forum/images/movingboxes.png[/URL]" alt="moving boxes" />             [COLOR=Yellow] <div id="slider">                  <img class="scrollButtons left" src="[URL="http://www.mmorpg-core.com/forum/view-source:http://css-tricks.com/examples/MovingBoxes/images/leftarrow.png"]http://www.mmorpg-core.com/forum/images/leftarrow.png[/URL]">              <div style="overflow: hidden;" class="scroll">                      <div class="scrollContainer">                          <div class="panel" id="panel_1">                         <div class="inside">                             <img src="[URL="http://www.mmorpg-core.com/forum/view-source:http://css-tricks.com/examples/MovingBoxes/images/1.jpg"]http://www.mmorpg-core.com/forum/images/1.jpg[/URL]" alt="picture" />                             <h2>News Heading</h2>                             <p>A very shot exerpt goes here... <a href="[URL="http://www.mmorpg-core.com/forum/view-source:http://flickr.com/photos/justbcuz/112479862/"]http://flickr.com/photos/justbcuz/112479862/[/URL]">more link</a></p>                         </div>                     </div>                      <div class="panel" id="panel_2">                         <div class="inside">                             <img src="[URL="http://www.mmorpg-core.com/forum/view-source:http://css-tricks.com/examples/MovingBoxes/images/2.jpg"]http://www.mmorpg-core.com/forum/images/2.jpg[/URL]" alt="picture" />                             <h2>News Heading</h2>                             <p>A very shot exerpt goes here... <a href="[URL="http://www.mmorpg-core.com/forum/view-source:http://flickr.com/photos/joshuacraig/2698975899/"]http://flickr.com/photos/joshuacraig/2698975899/[/URL]">more link</a></p>                         </div>                     </div>                                      <div class="panel" id="panel_3">                         <div class="inside">                             <img src="[URL="http://www.mmorpg-core.com/forum/view-source:http://css-tricks.com/examples/MovingBoxes/images/3.jpg"]http://www.mmorpg-core.com/forum/images/3.jpg[/URL]" alt="picture" />                             <h2>News Heading</h2>                             <p>A very shot exerpt goes here... <a href="[URL="http://www.mmorpg-core.com/forum/view-source:http://flickr.com/photos/ruudvanleeuwen/468309897/"]http://flickr.com/photos/ruudvanleeuwen/468309897/[/URL]">more link</a></p>                         </div>                     </div>                                          <div class="panel" id="panel_4">                         <div class="inside">                             <img src="[URL="http://www.mmorpg-core.com/forum/view-source:http://css-tricks.com/examples/MovingBoxes/images/4.jpg"]http://www.mmorpg-core.com/forum/images/4.jpg[/URL]" alt="picture" />                             <h2>News Heading</h2>                             <p>A very shot exerpt goes here... <a href="[URL="http://www.mmorpg-core.com/forum/view-source:http://flickr.com/photos/emikohime/294092478/"]http://flickr.com/photos/emikohime/294092478/[/URL]">more link</a></p>                         </div>                     </div>                                          <div class="panel" id="panel_5">                         <div class="inside">                             <img src="[URL="http://www.mmorpg-core.com/forum/view-source:http://css-tricks.com/examples/MovingBoxes/images/5.jpg"]http://www.mmorpg-core.com/forum/images/5.jpg[/URL]" alt="picture" />                             <h2>News Heading</h2>                             <p>A very shot exerpt goes here... <a href="[URL="http://www.mmorpg-core.com/forum/view-source:http://flickr.com/photos/evilpeacock/1631808336/"]http://flickr.com/photos/evilpeacock/1631808336/[/URL]">more link</a></p>                         </div>                     </div>                                  </div>[/COLOR]                  <div id="left-shadow"></div>                 <div id="right-shadow"></div>              </div>             <img class="scrollButtons right" src="[URL="http://www.mmorpg-core.com/forum/view-source:http://css-tricks.com/examples/MovingBoxes/images/rightarrow.png"]http://www.mmorpg-core.com/forum/images/rightarrow.png[/URL]">          </div>                  <br /><br />                  <a href="[URL="http://www.mmorpg-core.com/forum/view-source:http://css-tricks.com/moving-boxes/"]/moving-boxes/[/URL]" style="font-size: 16px; color: #900;">&lt; BACK TO ARTICLE</a>              </div>       </body>  </html>

    Alles gelb Makierte brauchst du. Das passt du deinen Wünschen an.
    Für die Includierung des Javascripts musst du natürlich jQuery und diese Slideshow runterladen ;)

    P.S.: Warum geht der Code-Tag nicht richtig?

    [COLOR=Sienna]MfG
    Kogoro[/COLOR]
    [COLOR=darkorange]Support gibt es auf:[/COLOR]
    [SIZE=2][COLOR=darkorange]coding-cluster.net[/COLOR][/SIZE]

  • Zitat von Kogoro;197748

    Dann stell die Fragen bitte nächstes Mal deutlicher.
    Such dir einfach eins aus. Meistens gibt es dann da Beispiele, aus welchen du den nötigen Quelltext extrahieren kannst.
    Beispiel: Moving Boxes
    Quellcode:

    HTML
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">  <head>     <meta http-equiv="Content-type" content="text/html; charset=UTF-8">          <title>Moving Boxes</title>          <link rel="stylesheet" href="[URL="http://www.mmorpg-core.com/forum/view-source:http://css-tricks.com/examples/MovingBoxes/css/style.css"]css/style.css[/URL]" type="text/css" media="screen" charset="utf-8">      [COLOR=Yellow]<script src="[URL="http://www.mmorpg-core.com/forum/view-source:http://css-tricks.com/examples/MovingBoxes/js/jquery-1.3.1.min.js"]js/jquery-1.3.1.min.js[/URL]" type="text/javascript" charset="utf-8"></script>     <script src="[URL="http://www.mmorpg-core.com/forum/view-source:http://css-tricks.com/examples/MovingBoxes/js/slider.js"]js/slider.js[/URL]" type="text/javascript" charset="utf-8"></script>[/COLOR] </head>   <body>      <style type="text/css"> .bsa_it_ad { border: 0 !important; padding: 6px !important; overflow: hidden !important; background: #eae3c0 !important; -moz-box-shadow: 0 0 48px black; -webkit-box-shadow: 0 0 48px black; } .bsa_it_ad a { margin: 0 !important; padding: 0 !important; } .bsa_it_ad a img { border: 0 !important; position: static !important; } .bsa_it_ad a:hover img { margin: 0 !important; } .bsa_it_ad a:hover { background: none !important; } .bsa_it_i { margin: 0 15px 0 0 !important; } .bsa_it_t { margin: 12px 0 0 0 !important; font: 16px Georgia, Serif !important; } .bsa_it_d { font: 11px Verdana, Helvetica, Arial, Sans-Serif; padding-right: 10px; } .bsa_it_p { bottom: 5px !important; right: 5px !important; padding: 0 !important; } .bsa_it_p a:hover { background: none !important; } .header-button {    border-top: 1px solid #cf942d !important;    border-bottom: 0 !important;    background: #964418 !important;    background: -webkit-gradient(linear, left top, left bottom, from(#e86e36), to(#964418)) !important;    background: -moz-linear-gradient(top, #e86e36, #964418) !important;    padding: 3px 10px !important;    -webkit-border-radius: 8px !important;    -moz-border-radius: 8px !important;    border-radius: 8px !important;    -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0 !important;    -moz-box-shadow: rgba(0,0,0,1) 0 1px 0 !important;    box-shadow: rgba(0,0,0,1) 0 1px 0 !important;    text-shadow: rgba(0,0,0,.4) 0 1px 0 !important;    color: white !important;    font-size: 13px !important;    font-family: Georgia, serif !important;    text-decoration: none !important;    vertical-align: middle !important;    display: inline !important;    margin: 0 !important;     float: none !important;    } .header-button:hover {    border-top: 1px solid #4f220d !important;    background: #4f220d !important;    color: #ccc !important;    text-decoration: none !important;    margin: 0 !important;    } .header-button:active {    border-top: 1px solid #261105 !important;    background: #261105;    } .header-button:visited:before, .header-button:visited:after {     content: "" !important; } </style>  <div id="hook-just-in-case" style="height: 77px; background: black url(/examples/images/examples-header-bg.png) repeat-x; color: white !important; font: 14px Georgia, Serif !important; position: relative; zoom: 1; width: 100% !important; z-index: 10000 !important;">          <div style="width: 960px; height: 77px; margin: 0 auto; position: relative;">              <img src="[URL="http://www.mmorpg-core.com/forum/view-source:http://css-tricks.com/examples/images/example-logo.png"]/examples/images/example-logo.png[/URL]" alt="Demo Page" style="position: absolute; top: 0; left: 0;" />                  <div style="position: absolute; left: 140px; top: 52px; width: 400px; text-align: left;">                             <a class="header-button" href="[URL="http://www.mmorpg-core.com/forum/view-source:http://css-tricks.com/"]http://css-tricks.com[/URL]">&larr; Back Home</a> &nbsp;               <a class="header-button" href="[URL="http://www.mmorpg-core.com/forum/view-source:http://css-tricks.com/downloads/"]http://css-tricks.com/downloads/[/URL]">Other Demos &rarr;</a>                     </div>                  <div style="width: 420px; position: absolute; right: 0; top: 0;">             <div id="bsap_1248303" class="bsarocks bsap_3469a2a501a9e18091036aa0c89f9dcb"></div>         </div>              </div>      </div>     <div id="wrapper">              <img src="[URL="http://www.mmorpg-core.com/forum/view-source:http://css-tricks.com/examples/MovingBoxes/images/movingboxes.png"]http://www.mmorpg-core.com/forum/images/movingboxes.png[/URL]" alt="moving boxes" />             [COLOR=Yellow] <div id="slider">                  <img class="scrollButtons left" src="[URL="http://www.mmorpg-core.com/forum/view-source:http://css-tricks.com/examples/MovingBoxes/images/leftarrow.png"]http://www.mmorpg-core.com/forum/images/leftarrow.png[/URL]">              <div style="overflow: hidden;" class="scroll">                      <div class="scrollContainer">                          <div class="panel" id="panel_1">                         <div class="inside">                             <img src="[URL="http://www.mmorpg-core.com/forum/view-source:http://css-tricks.com/examples/MovingBoxes/images/1.jpg"]http://www.mmorpg-core.com/forum/images/1.jpg[/URL]" alt="picture" />                             <h2>News Heading</h2>                             <p>A very shot exerpt goes here... <a href="[URL="http://www.mmorpg-core.com/forum/view-source:http://flickr.com/photos/justbcuz/112479862/"]http://flickr.com/photos/justbcuz/112479862/[/URL]">more link</a></p>                         </div>                     </div>                      <div class="panel" id="panel_2">                         <div class="inside">                             <img src="[URL="http://www.mmorpg-core.com/forum/view-source:http://css-tricks.com/examples/MovingBoxes/images/2.jpg"]http://www.mmorpg-core.com/forum/images/2.jpg[/URL]" alt="picture" />                             <h2>News Heading</h2>                             <p>A very shot exerpt goes here... <a href="[URL="http://www.mmorpg-core.com/forum/view-source:http://flickr.com/photos/joshuacraig/2698975899/"]http://flickr.com/photos/joshuacraig/2698975899/[/URL]">more link</a></p>                         </div>                     </div>                                      <div class="panel" id="panel_3">                         <div class="inside">                             <img src="[URL="http://www.mmorpg-core.com/forum/view-source:http://css-tricks.com/examples/MovingBoxes/images/3.jpg"]http://www.mmorpg-core.com/forum/images/3.jpg[/URL]" alt="picture" />                             <h2>News Heading</h2>                             <p>A very shot exerpt goes here... <a href="[URL="http://www.mmorpg-core.com/forum/view-source:http://flickr.com/photos/ruudvanleeuwen/468309897/"]http://flickr.com/photos/ruudvanleeuwen/468309897/[/URL]">more link</a></p>                         </div>                     </div>                                          <div class="panel" id="panel_4">                         <div class="inside">                             <img src="[URL="http://www.mmorpg-core.com/forum/view-source:http://css-tricks.com/examples/MovingBoxes/images/4.jpg"]http://www.mmorpg-core.com/forum/images/4.jpg[/URL]" alt="picture" />                             <h2>News Heading</h2>                             <p>A very shot exerpt goes here... <a href="[URL="http://www.mmorpg-core.com/forum/view-source:http://flickr.com/photos/emikohime/294092478/"]http://flickr.com/photos/emikohime/294092478/[/URL]">more link</a></p>                         </div>                     </div>                                          <div class="panel" id="panel_5">                         <div class="inside">                             <img src="[URL="http://www.mmorpg-core.com/forum/view-source:http://css-tricks.com/examples/MovingBoxes/images/5.jpg"]http://www.mmorpg-core.com/forum/images/5.jpg[/URL]" alt="picture" />                             <h2>News Heading</h2>                             <p>A very shot exerpt goes here... <a href="[URL="http://www.mmorpg-core.com/forum/view-source:http://flickr.com/photos/evilpeacock/1631808336/"]http://flickr.com/photos/evilpeacock/1631808336/[/URL]">more link</a></p>                         </div>                     </div>                                  </div>[/COLOR]                  <div id="left-shadow"></div>                 <div id="right-shadow"></div>              </div>             <img class="scrollButtons right" src="[URL="http://www.mmorpg-core.com/forum/view-source:http://css-tricks.com/examples/MovingBoxes/images/rightarrow.png"]http://www.mmorpg-core.com/forum/images/rightarrow.png[/URL]">          </div>                  <br /><br />                  <a href="[URL="http://www.mmorpg-core.com/forum/view-source:http://css-tricks.com/moving-boxes/"]/moving-boxes/[/URL]" style="font-size: 16px; color: #900;">&lt; BACK TO ARTICLE</a>              </div>       </body>  </html>

    Alles gelb Makierte brauchst du. Das passt du deinen Wünschen an.
    Für die Includierung des Javascripts musst du natürlich jQuery und diese Slideshow runterladen ;)

    P.S.: Warum geht der Code-Tag nicht richtig?


    ich danke dir mein lieber <3

    [SIZE=4][COLOR=Yellow][CENTER]
    [COLOR=LemonChiffon] [SIZE=2]Danke an[/SIZE] [SIZE=3][COLOR=lime]Marvin[/COLOR][/SIZE][/COLOR]
    [/CENTER]
    [/COLOR][/SIZE]

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!