zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden suche bestimmte Bildergalerie

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.06.2011, 02:42
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.03.2011
Beiträge: 206
gandalf_hh befindet sich auf einem aufstrebenden Ast
Standard 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.
Angehängte Grafiken
Dateityp: png BEISPIELE.png (415,0 KB, 14x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.06.2011, 09:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.06.2011, 10:44
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

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?
Mit Zitat antworten
  #4 (permalink)  
Alt 04.06.2011, 15:00
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.03.2011
Beiträge: 206
gandalf_hh befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 04.06.2011, 17:05
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.03.2011
Beiträge: 206
gandalf_hh befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #6 (permalink)  
Alt 07.06.2011, 19:42
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.03.2011
Beiträge: 206
gandalf_hh befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #7 (permalink)  
Alt 07.06.2011, 19:53
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

runterscrollen zu Nivo Slider - The Most Awesome jQuery Image Slider
Zitat:
The Nivo Slider has plenty of options to fiddle with. Below is an example of the code with all available options and their defaults:
Dort findest du die Optionen (.. pausetime..)

Manfred
Mit Zitat antworten
  #8 (permalink)  
Alt 08.06.2011, 01:09
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.03.2011
Beiträge: 206
gandalf_hh befindet sich auf einem aufstrebenden Ast
Standard

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>
Angehängte Grafiken
Dateityp: png Bild1.png (306,0 KB, 1x aufgerufen)
Dateityp: png Bild2.png (8,3 KB, 0x aufgerufen)

Geändert von gandalf_hh (08.06.2011 um 01:12 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 08.06.2011, 08:03
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Zitat:
src="scripts/jquery-1.6.1.min.js"
src="../jquery.nivo.slider.pack.js"
...die Pfade sind unterschiedlich?
Ansonsten --> online stellen!

Manfred
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 08.06.2011, 10:40
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von gandalf_hh Beitrag anzeigen
aber wenn ich sie auf meine homepage einbinde die noch nicht online ist funktioniert die galerie nicht mehr (bild2)...
"Funktioniert nicht" hilft nicht wirklich weiter. Gibt es eine Fehlermeldung? (Du weißt wo du dise findest? Wenn nicht such mal nach Fehlerkonsole)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:02 Uhr.