XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Javascript & Ajax (http://xhtmlforum.de/forumdisplay.php?f=83)
-   -   suche bestimmte Bildergalerie (http://xhtmlforum.de/showthread.php?t=64837)

gandalf_hh 04.06.2011 02:42

suche bestimmte Bildergalerie
 
Liste der Anhänge anzeigen (Anzahl: 1)
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.

MrMurphy 04.06.2011 09:01

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

Thielo 04.06.2011 10:44

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.

gandalf_hh 04.06.2011 15:00

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

gandalf_hh 04.06.2011 17:05

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;
}

gandalf_hh 07.06.2011 19:42

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

Manfred62 07.06.2011 19:53

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

gandalf_hh 08.06.2011 01:09

Liste der Anhänge anzeigen (Anzahl: 2)
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>

Manfred62 08.06.2011 08:03

Zitat:

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

Manfred

protonenbeschleuniger 08.06.2011 10:40

Zitat:

Zitat von gandalf_hh (Beitrag 495650)
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)


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:52 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023