|
|||
suche bestimmte Bildergalerie
hallo leute,
ich bin grade dabei an einer homepage zu arbeiten die aber noch nicht online ist und ich möchte dort eine bestimmte fotogalerie einbinden wie auf den folgenden fotobeispiel, aber das zweite beispiel wäre mir lieber: bin euch für jede hilfe dankbar, mir ist das wichtig. |
Sponsored Links |
|
|||
Hallo,
ist verstehe zwar, das es nicht um einen Bahnhof geht, aber ansonsten bin ich ziemlich ratlos bei deiner Frage. Beschreibe die Wünsche zu deiner Wunschfotogalerie bitte genauer oder verweise auf eine bestehende Seite, auf der wir uns ein bestehende anschauen können. Grafiken helfen da kaum weiter. Gruss MrMurphy |
Sponsored Links |
|
||||
Goooooooogle sagt:
Create an Image Rotator with Description (CSS/jQuery) - Web Design Blog – DesignM.ag Klar muss noch angepasst werden, sollte aber kein Problem sein.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege www.richard-thiel.de | Müssen Websiten überall gleich ausschauen? |
|
|||
ja, das sieht genau so aus... dankeeeeee
ich muss aber mal sehen ob ich es auch so hinbekomme wie auf der seite: Yahoo! Movies - Kino, DVD, Filme, Kinoprogramm, Trailer |
|
|||
soviel ich mitbekommen habe funktioniert das mit javascript funktion... ich habe null ahnung von java
ich hab etwas wissen von html und css mehr auch nicht. wer kann mir helfen die bildergalerie zusammen zu basteln, so das es so aussieht wie in dem beispiel: http://de.movies.yahoo.com/?????? </head> <div class="main_image"> <img src="banner1.jpg" alt="" /> <div class="desc"> <a href="#" class="collapse">Close Me!</a> <div class="block"> <h2>Title</h2> <small>Date</small> <p>Copy</p> </div> </div> </div> <div class="image_thumb"> <ul> <li> <a href="banner1.jpg"><img src="banner1_thumb.jpg" alt="Image Name" /></a> <div class="block"> <h2>Title</h2> <small>Date</small> <p>Copy</p> </div> </li> </ul> </div> <body> </body> </html> -------------------------------------------------- /*--main_image section CSS--*/ .main_image { width: 598px; height: 456px; float: left; background: #333; position: relative; overflow: hidden; /*--Overflow hidden allows the description to toggle/tuck away as it slides down--*/ color: #fff; } .main_image h2 { font-size: 2em; font-weight: normal; margin: 0 0 5px; padding: 10px; } .main_image p { font-size: 1.2em; line-height: 1.6em; padding: 10px; margin: 0; } .block small { /*--We'll be using this same style on our thumbnail list--*/ font-size: 1em; padding: 0 0 0 20px; background: url(icon_calendar.gif) no-repeat 0 center; } .main_image .block small {margin-left: 10px;} .main_image .desc{ position: absolute; bottom: 0; left: 0; /*--Stick the desc class to the bottom of our main image container--*/ width: 100%; display: none; /*--Hide description by default, if js is enabled, we will show this--*/ } .main_image .block{ width: 100%; background: #111; border-top: 1px solid #000; } .main_image a.collapse { /*--This is our hide/show tab--*/ background: url(btn_collapse.gif) no-repeat left top; height: 27px; width: 93px; text-indent: -99999px; position: absolute; top: -27px; right: 20px; } .main_image a.show {background-position: left bottom;} /*--image_thumb section CSS--*/ .image_thumb { float: left; width: 299px; background: #f0f0f0; border-right: 1px solid #fff; border-top: 1px solid #ccc; } .image_thumb img { border: 1px solid #ccc; padding: 5px; background: #fff; float: left; } .image_thumb ul { margin: 0; padding: 0; list-style: none; } .image_thumb ul li{ margin: 0; padding: 12px 10px; background: #f0f0f0 url(nav_a.gif) repeat-x; width: 279px; float: left; border-bottom: 1px solid #ccc; border-top: 1px solid #fff; border-right: 1px solid #ccc; } .image_thumb ul li.hover { /*--Hover State--*/ background: #ddd; cursor: pointer; } .image_thumb ul li.active { /*--Active State--*/ background: #fff; cursor: default; } html .image_thumb ul li h2 { font-size: 1.5em; margin: 5px 0; padding: 0; } .image_thumb ul li .block { float: left; margin-left: 10px; padding: 0; width: 170px; } .image_thumb ul li p{display: none;}/*--Hide the description on the list items--*/ ---------------------------------------------------- // JavaScript Document jQuery(function(){ //runs function, set timer here $(function() { //setInterval( 'slideSwitchTimed()', 6000 ); playSlideshow = setInterval( "slideSwitchTimed()", 6000 ); }); //pauses on hover $('.highlight').hover(function() { clearInterval(playSlideshow); }, function() { playSlideshow = setInterval( "slideSwitchTimed()", 6000 ); }); $(".main_image .desc").show(); //Show Banner $(".main_image .block").animate({ opacity: 0.65 }, 1 ); //Set Opacity $(".image_thumb ul li:first").addClass('active'); //Add the active class (highlights the very first list item by default) //runs function on click $(".image_thumb ul li").click(function () { $active = $(this); slideSwitchClick(); }) .hover(function(){ //Hover effects on list-item $(this).addClass('hover'); //Add class "hover" on hover }, function() { $(this).removeClass('hover'); //Remove class "hover" on hover out }); //runs function, set timer here $(function() { setInterval( 'slideSwitchTimed()', 6000 ); }); }); function slideSwitchTimed() { $active = $('.image_thumb ul li.active').next(); if ( $active.length == 0 ) $active = $('.image_thumb ul li:first'); //goes back to start when finishes slideSwitch(); } function slideSwitchClick() { slideSwitch(); } function slideSwitch() { var $prev = $('.image_thumb ul li.active'); //Show active list-item $prev.removeClass('active'); $active.addClass('active'); //Set Variables var imgAlt = $active.find('img').attr("alt"); //Get Alt Tag of Image var imgTitle = $active.find('a').attr("href"); //Get Main Image URL var imgDesc = $active.find('.block').html(); //Get HTML of the "block" container var imgDescHeight = $(".main_image").find('.block').height(); //Find the height of the "block" if ($(this).is(".active")) { //If the list item is active/selected, then… return false; // Don't click through – Prevents repetitive animations on active/selected list-item } else { //If not active then… //Animate the Description $(".main_image img").animate({ opacity: 0}, 250 ); $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() { $(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0″ }, 250 ); $(".main_image img").attr({ src: imgTitle , alt: imgAlt}).animate({ opacity: 1}, 250 ); }); } return false; } Geändert von gandalf_hh (06.06.2011 um 03:05 Uhr) |
|
|||
ich hab schon gemerkt ihr habt kein bock das alles durchzugucken und die
bildergalerie zusammen zu basteln ich habe mich nach einer anderen bildergalerie umgeschaut und bin auf "nivo-slider2.5.2" gestoßen (http://nivo.dev7studios.com/). das geht durch ich kann damit leben, nur wechselt die galerie zu schnell die bilder, wie/wo kann ich die dauer verlängern??? bitte prezise antworten Geändert von gandalf_hh (07.06.2011 um 19:44 Uhr) |
|
||||
runterscrollen zu Nivo Slider - The Most Awesome jQuery Image Slider
Zitat:
Manfred |
|
|||
ich habe die bildergalerie so bearbeitet wie ich sie haben wollte.
wenn ich sie aufmache funktioniert sie immer wie auf Bild1. aber wenn ich sie auf meine homepage einbinde die noch nicht online ist funktioniert die galerie nicht mehr (bild2)... ich weiss wirklich nicht weiter die bilder sind auch fachgerecht reingeschrieben: <div id="slider" class="nivoSlider"> <a href=""><img src="images/toystory.jpg" alt="" title=""/></a> <a href=""><img src="images/up.jpg" alt="" title="This is an example of a caption" /></a> <a href=""><img src="images/walle.jpg" alt="" title=""/></a> <a href=""><img src="images/nemo.jpg" alt="" title="" /></a> </div> <script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="../jquery.nivo.slider.pack.js"></script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> </body> </html> Geändert von gandalf_hh (08.06.2011 um 01:12 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Suche bestimmte Schriftart | 1chris | Grafik, Design, Typografie | 3 | 27.05.2011 23:18 |
suche einfache Bildergalerie | bea | CSS | 8 | 02.03.2009 16:10 |
Suche schlichte Bildergalerie und Blog | ONeill | Offtopic | 2 | 13.09.2006 19:19 |
Suche PHP Script für eine Bildergalerie | claude | Serveradministration und serverseitige Scripte | 10 | 29.12.2005 00:50 |
suche ein Javacript für Bildergalerie | Corto | Offtopic | 3 | 03.06.2004 14:05 |