 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
vayu
Threadersteller
Dabei seit: 09.05.2009
Ort: Berlin
Alter: 46
Geschlecht: 
|
Verfasst Di 31.01.2012 16:54
Titel jquery laufband - einzelne bilder werden nicht angezeit |
  |
|
vielleicht hat einer eine idee , was ich falsch mache. ich habe ein bilder laufband (image slider) angepasst. das funktiniert auch soweit einwandfrei, doch sobald ich das über wordpress einfüge wird nur ein bild angezeigt.
ich habe mir das so gedacht, dass die bilder aus wordpress (customfields einzelner posts) angezeigt werden. nach längerer fehlersuche kam ich zum entschluss, dass es am javascript liegt. denn wenn ich die classen und ids entferne werden die bilder angezeigt.
hier der link http://beta.sitgermany.com/, bitte drauf auchten, es geht um den slide "team"
Hier ein wenig code:
javascript: | Code: | <script type="text/javascript">
$(function() {
//remove js-disabled class
$("#viewer").removeClass("js-disabled");
//create new container for images
$("<div>").attr("id", "container").css({ position:"absolute"}).width($(".wrapper").length * 325).height(500).appendTo("div#viewer");
//add images to container
$(".wrapper").each(function() {
$(this).appendTo("div#container");
});
//work out duration of anim based on number of images (1 second for each image)
var duration = $(".wrapper").length * 2500;
//store speed for later (distance / time)
var speed = (parseInt($("div#container").width()) + parseInt($("div#viewer").width())) / duration;
//set direction
var direction = "rtl";
//set initial position and class based on direction
(direction == "rtl") ? $("div#container").css("left", $("div#viewer").width()).addClass("rtl") : $("div#container").css("left", 0 - $("div#container").width()).addClass("ltr") ;
//animator function
var animator = function(el, time, dir) {
//which direction to scroll
if(dir == "rtl") {
//add direction class
el.removeClass("ltr").addClass("rtl");
//animate the el
el.animate({ left:"-" + el.width() + "px" }, time, "linear", function() {
//reset container position
$(this).css({ left:$("div#imageScroller").width(), right:"" });
//restart animation
animator($(this), duration, "rtl");
//hide controls if visible
($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;
});
} else {
//add direction class
el.removeClass("rtl").addClass("ltr");
//animate the el
el.animate({ left:$("div#viewer").width() + "px" }, time, "linear", function() {
//reset container position
$(this).css({ left:0 - $("div#container").width() });
//restart animation
animator($(this), duration, "ltr");
//hide controls if visible
($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;
});
}
}
//start anim
animator($("div#container"), duration, direction);
//pause on mouseover
$("a.wrapper").live("mouseover", function() {
//stop anim
$("div#container").stop(true);
//show controls
($("div#controls").length == 0) ? $("<div>").attr("id", "controls").appendTo("div#outerContainer").css({ opacity:0.7 }).slideDown("slow") : null ;
($("a#rtl").length == 0) ? $("<a>").attr({ id:"rtl", href:"#", title:"rtl" }).appendTo("#controls") : null ;
($("a#ltr").length == 0) ? $("<a>").attr({ id:"ltr", href:"#", title:"ltr" }).appendTo("#controls") : null ;
//variable to hold trigger element
var title = $(this).attr("title");
//add p if doesn't exist, update it if it does
($("p#title").length == 0) ? $("<p>").attr("id", "title").text(title).appendTo("div#controls") : $("p#title").text(title) ;
});
//restart on mouseout
$("a.wrapper").live("mouseout", function(e) {
//hide controls if not hovering on them
(e.relatedTarget == null) ? null : (e.relatedTarget.id != "controls") ? $("div#controls").slideUp("slow").remove() : null ;
//work out total travel distance
var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());
//work out distance left to travel
var distanceLeft = ($("div#container").hasClass("ltr")) ? totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width())) : totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left")))) ;
//new duration is distance left / speed)
var newDuration = distanceLeft / speed;
//restart anim
animator($("div#container"), newDuration, $("div#container").attr("class"));
});
//handler for ltr button
$("#ltr").live("click", function() {
//stop anim
$("div#container").stop(true);
//swap class names
$("div#container").removeClass("rtl").addClass("ltr");
//work out total travel distance
var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());
//work out remaining distance
var distanceLeft = totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width()));
//new duration is distance left / speed)
var newDuration = distanceLeft / speed;
//restart anim
animator($("div#container"), newDuration, "ltr");
});
//handler for rtl button
$("#rtl").live("click", function() {
//stop anim
$("div#container").stop(true);
//swap class names
$("div#container").removeClass("ltr").addClass("rtl");
//work out total travel distance
var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());
//work out remaining distance
var distanceLeft = totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left"))));
//new duration is distance left / speed)
var newDuration = distanceLeft / speed;
//restart anim
animator($("div#container"), newDuration, "rtl");
});
});
</script> |
Hier code vom WP / PHP:
| Code: |
<?php if (have_posts()) : ?>
<?php $do_not_duplicate = array(); ?>
<?php
while ( have_posts() ) : the_post();
$do_not_duplicate[] = get_the_ID();
?>
<?php the_content(''); ?>
<?php endwhile; ?>
<div id="outerContainer">
<div id="imageScroller">
<div id="viewer" class="js-disabled">
<?php
$random_query = new WP_Query(array(
'post__not_in' => $do_not_duplicate,
'showposts' => 300,
'orderby' => 'date',
'cat' => '3'
));
while ($random_query->have_posts()) : $random_query->the_post(); ?>
<a class="wrapper box photo col3" href="<?php the_permalink() ?>" rel="bookmark" title=""><div class="thumbnail">
<div class="hover_content" style="display: none; ">
<div class="hover_info">
<p><?php the_title_attribute(); ?>hallo</p>
</div><!-- hover_info -->
</div><!-- hover_content -->
<img class="logo" id="" src="<?php $key="teambild"; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php the_title_attribute(); ?>"></div><!--thumbnail --></a>
<?php endwhile; ?>
<?php else : ?>
... Inhalt wenn keine Posts vorhanden ...
<?php endif; ?>
</div><!-- viewer -->
</div><!-- imageScroller -->
</div><!-- outerContainer -->
</div><!-- item -->
|
wäre sehr dankbar, wenn jm weiis was ich falsch mache
|
|
| |
  |
 |
fyll
Dabei seit: 20.09.2003
Ort: Augsburg
Alter: 39
Geschlecht:
|
Verfasst Mi 01.02.2012 13:18
Titel
|
|
|
Zwischen den Bildern macht der dirn Leerzeichen rein, deswegen passen se nicht mehr in den generierten Container.
Also kannst se im HTML direkt aneinander kleben oder das SCript ein wenig abändern: | Code: | var wrapperanz= $(".wrapper").length;
$("<div>")
.attr("id", "container")
.css({
position: "absolute",
width: (wrapperanz*325)+(wrapperanz*10),
height: 550
})
.appendTo("div#viewer"); |
Zuletzt bearbeitet von fyll am Mi 01.02.2012 13:24, insgesamt 1-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
vayu
Threadersteller
Dabei seit: 09.05.2009
Ort: Berlin
Alter: 46
Geschlecht:
|
Verfasst Mi 01.02.2012 14:08
Titel hat geklappt |
|
|
vielen dank, es klappt jetzt 
|
|
| |
|
|
vayu
Threadersteller
Dabei seit: 09.05.2009
Ort: Berlin
Alter: 46
Geschlecht:
|
Verfasst Mi 01.02.2012 14:13
Titel ein kleines problem ist aufgetreten |
|
|
|
der hover läuft nicht mehr auf beiden bildern, wird also auch nicht für alle übernommen. liegt es daran, wo ich das script eingefügt hatte?
|
|
| |
|
|
fyll
Dabei seit: 20.09.2003
Ort: Augsburg
Alter: 39
Geschlecht:
|
Verfasst Mi 01.02.2012 14:50
Titel Re: ein kleines problem ist aufgetreten |
|
|
Ja - du sollst doch diese Zeile hier: | Code: | | $("<div>").attr("id", "container").css({ position:"absolute"}).width($(".wrapper").length * 325).height(500).appendTo("div#viewer"); |
dadurch ersetzen 
edit: hab da nochn typo drin - die 550 soll natürlich 500 sein ^^
Zuletzt bearbeitet von fyll am Mi 01.02.2012 14:51, insgesamt 1-mal bearbeitet
|
|
| |
|
|
vayu
Threadersteller
Dabei seit: 09.05.2009
Ort: Berlin
Alter: 46
Geschlecht:
|
Verfasst Do 02.02.2012 03:36
Titel ganz lieben dank, klappt alles super! |
|
|
|
ganz lieben dank, klappt alles super!!!!
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
PS Auswahlen in einzelne Bilder exportieren
Flash einzelne bilder aus .fla Datei Export?
JQuery Bilder Slider erstellen
jQuery Load Bilder und T-Mobil
JQUERY: Bestimmte Anzahl von Bilder einblenden
Problem mit Laufband
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
