Zurück   Flashforum > Alternative Technologien > JavaScript & jQuery

Antwort
 
LinkBack Themen-Optionen Ansicht
Alt 27-05-2008, 09:43   #1 (permalink)
mcm-web
 
Benutzerbild von deak
 
Registriert seit: Jun 2002
Ort: Germany
Beiträge: 941
Gallerie Frage

Hi,
ich muss eine Galerie mit JS machen, sollte so aussehen. Es gibt drei Ordner
in den Bilder liegen also drei Kategorien.

1. Frage wie kann ich Bilder mit JS aus einem Ordner auslesen? geht das überhaupt oder muss ich php nehmen?

Dann sollen die Bilder beginnend mit der ersten Katgeorie und wenn durch die die nächste usw. sich von links nach rechts bewegen. Ok das ist kein Problem.
Des weiteren sollen drei Buttons ermöglichen direkt zum Anfang der nächsten Kategorie zu springen.

Wenn ich mit As machen würde wüsste ich wie, aber hab mit JS wenig gemacht.

Vielleicht hat jemand eine Idee bzw Tip wie ich am besten vorgehe.

Beste Grüße

deak
__________________
da weisste bescheid, schätzelein!!!!
deak ist offline   Mit Zitat antworten
Alt 27-05-2008, 09:56   #2 (permalink)
mcm-web
 
Benutzerbild von deak
 
Registriert seit: Jun 2002
Ort: Germany
Beiträge: 941
also soweit bin ich, der code stammt so nicht von mir sondern nem kollegen (wills gleich dazu sagen). ich bekomms einfach net hin das es von links nach rechts statt von rechts nach links läuft.



PHP-Code:
<script language="JavaScript1.2">
<!--
var 
sliderwidth=200  
var sliderheight=145 
var slidespeed=4     
var leftrightslide=new Array()
var 
finalslide=''
leftrightslide[0]= '<a href="#"><img src="01.jpg" border=0></a>'
leftrightslide[1]= '<a href="#"><img src="02.jpg" border=0></a>'
leftrightslide[2]= '<a href="#"><img src="03.jpg" border=0></a>'
leftrightslide[3]= '<a href="#"><img src="04.jpg" border=0></a>'


var copyspeed=slidespeed   
for (i=0;i<leftrightslide.length;i++)
finalslide=finalslide+leftrightslide[i]+"  "
if (document.all){      
document.write('<marquee id="ieslider" scrollAmount=0 style="width:'+sliderwidth+'">'+finalslide+'</marquee>')

ieslider.onmouseover=new Function("ieslider.scrollAmount=0")

ieslider.onmouseout=new Function("if (document.readyState=='complete') ieslider.scrollAmount=slidespeed")
}
function 
regenerate(){
window.location.reload()
}
function 
regenerate2(){
if (
document.layers){
document.ns_slider01.visibility="show"
setTimeout("window.onresize=regenerate",200)
intializeleftrightslide()
}
if (
document.all)
ieslider.scrollAmount=slidespeed
}                   
//NS specific function 

function intializeleftrightslide(){
document.ns_slider01.document.ns_slider02.document.write('<nobr>'+finalslide+'</nobr>')
documentns_slider01.document.ns_slider02.document.close()
thelength=document.ns_slider01.document.ns_slider02.document.width
scrollslide
()
}
//NS specific function for sliding slideshow
function scrollslide(){
if (
document.ns_slider01.document.ns_slider02.left>=thelength*(-1)){
document.ns_slider01.document.ns_slider02.left-=slidespeed
setTimeout
("scrollslide()",100)
}
else{
document.ns_slider01.document.ns_slider02.left=sliderwidth
scrollslide
()
}
}
window.onload=regenerate2
//-->
</script>

<ilayer width=&{sliderwidth}; height=&{sliderheight}; name="ns_slider01" visibility=hide>
<layer name="ns_slider02" onMouseover="slidespeed=0;" onMouseout="slidespeed=copyspeed">
</layer>
</ilayer> 
__________________
da weisste bescheid, schätzelein!!!!
deak ist offline   Mit Zitat antworten
Alt 27-05-2008, 09:58   #3 (permalink)
mcm-web
 
Benutzerbild von deak
 
Registriert seit: Jun 2002
Ort: Germany
Beiträge: 941
Noch eine Frage warum läuft das net im Firefox?
__________________
da weisste bescheid, schätzelein!!!!
deak ist offline   Mit Zitat antworten
Alt 27-05-2008, 10:07   #4 (permalink)
mod_rewrite
 
Benutzerbild von sonar
 
Registriert seit: Feb 2003
Ort: München
Beiträge: 15.682
Um Himmels Willen nimm bitte ein bestehendes JS/DHTML/AJAX-Framework und brich dir nicht beim Selber-Coden einen ab... da kuck mal:
http://script.aculo.us/
http://mootools.net/
http://developer.yahoo.com/yui/
http://jquery.com/
http://dojotoolkit.org/
__________________
RTFM
Wie man Fragen richtig stellt.

Money makes the world go round, fear makes it turn much faster.
(New Model Army)

Geändert von sonar (27-05-2008 um 10:09 Uhr)
sonar ist offline   Mit Zitat antworten
Alt 27-05-2008, 10:30   #5 (permalink)
mcm-web
 
Benutzerbild von deak
 
Registriert seit: Jun 2002
Ort: Germany
Beiträge: 941
ok danke
__________________
da weisste bescheid, schätzelein!!!!
deak ist offline   Mit Zitat antworten
Alt 27-05-2008, 10:41   #6 (permalink)
Wetmaster
 
Benutzerbild von Nicmare
 
Registriert seit: Aug 2001
Ort: BERLIN
Beiträge: 3.070
ich beschäftige mich stetig mit der thematik gallery in js mit ordner auslesen etc.
guck dir mal smoothgallery an. basiert auf mootools. leider ist der code nicht ganz fehlerfrei aber dafür sehr kompatibel (IE6, FF, Safari, Opera) und eben smooth
Nicmare ist offline   Mit Zitat antworten
Alt 27-05-2008, 12:03   #7 (permalink)
mcm-web
 
Benutzerbild von deak
 
Registriert seit: Jun 2002
Ort: Germany
Beiträge: 941
Hi Sonar

jhab mir jquery mal angschaut, scheint ganz cool zu sein.
ich finde nur nichts um z.B ein Bild von rechts nach links wandern zu lassen.


danke

deak
__________________
da weisste bescheid, schätzelein!!!!
deak ist offline   Mit Zitat antworten
Alt 27-05-2008, 12:21   #8 (permalink)
nobody is perfect
 
Benutzerbild von richtsteiger
 
Registriert seit: Jul 2004
Ort: munich
Beiträge: 867
Zum Beispiel mit animate.
__________________
XING
richtsteiger ist offline   Mit Zitat antworten
Alt 27-05-2008, 14:04   #9 (permalink)
mcm-web
 
Benutzerbild von deak
 
Registriert seit: Jun 2002
Ort: Germany
Beiträge: 941
Hi,

hmm ok noch eine Frage wie kann ich eine Funktion immer wieder aufrufen und noch eine Bewdingung setzen. Also mach das so lange bis bild ganz rechts...

thanx

deak
__________________
da weisste bescheid, schätzelein!!!!
deak ist offline   Mit Zitat antworten
Alt 27-05-2008, 14:18   #10 (permalink)
mcm-web
 
Benutzerbild von deak
 
Registriert seit: Jun 2002
Ort: Germany
Beiträge: 941
ok das hätte ich auch. ich brauch jetzt noch die bedingung die den kasten wenn dieser ganz rechts ist wieder nach links setzt.

also quasi so
ich weiss das das ganz falsch vom code her ist aber nur von der logik her?!?
Code:
  function doPassVar(){
if (.block._x <= window.width){
 $(".block").animate({"left": "+=50px"}, "slow");
} else {
.block._x = window.width-.block.width

}


}
setInterval("doPassVar()", 100);
__________________
da weisste bescheid, schätzelein!!!!
deak ist offline   Mit Zitat antworten
Alt 27-05-2008, 16:48   #11 (permalink)
mcm-web
 
Benutzerbild von deak
 
Registriert seit: Jun 2002
Ort: Germany
Beiträge: 941
Hi

also bin ein Stück weiter.

versteh nur nicht warum er immer wieder zurück springt...

PHP-Code:
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("#right").click(function(){
      $(".block").animate({"left": "+=50px"}, "slow");
    });

    $("#left").click(function(){
      $(".block").animate({"left": "-=50px"}, "slow");
    });
  $(".block").animate({"left": "+=50px"}, "slow");
  });
  
  function doPassVar(){
   var stand = document.getElementById('blocker').style.left
if (stand <= window.innerWidth ){
 $(".block").animate({"left": "+=50px"}, "slow");
 } else  {
 document.getElementById('blocker').style.left = 0;
  $(".block").animate({"left": "+=10px"}, "slow");
 }
 
var breite = window.innerWidth;







}
setInterval("doPassVar()", 100);

  </script> 
vielleicht kann mal ma jemand nen tip geben
__________________
da weisste bescheid, schätzelein!!!!
deak ist offline   Mit Zitat antworten
Alt 27-05-2008, 16:53   #12 (permalink)
Wetmaster
 
Benutzerbild von Nicmare
 
Registriert seit: Aug 2001
Ort: BERLIN
Beiträge: 3.070
warum das rad neuerfinden. nimm doch einfach fertige plugins.
jcarousel in kombination mit thickbox ist da ne runde sache.

Geändert von Nicmare (27-05-2008 um 16:55 Uhr)
Nicmare ist offline   Mit Zitat antworten
Alt 27-05-2008, 17:15   #13 (permalink)
mcm-web
 
Benutzerbild von deak
 
Registriert seit: Jun 2002
Ort: Germany
Beiträge: 941
hi Nicmare

super Sache cooles Ding! Danke...
Dumme Frage wie bekomm ichs den am besten hin das er automatisch scrollt?

Beste Grüße und Danke

deak
__________________
da weisste bescheid, schätzelein!!!!
deak ist offline   Mit Zitat antworten
Alt 27-05-2008, 18:50   #14 (permalink)
mcm-web
 
Benutzerbild von deak
 
Registriert seit: Jun 2002
Ort: Germany
Beiträge: 941
Hi,

also ich möchte die Galerie mit Thickbox und flexibel habe den code aus beiden zusammen gefügt. Leider kreig ich es einfach nicht hin das die Thickbox auch funkt.Verzweiflung... Hier mal der ganze Code:

HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<!--
  jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.2.3.pack.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.pack.js"></script>
<!--
  jCarousel core stylesheet
-->
<script type="text/javascript" src="../lib/thickbox/thickbox.js"></script>


<link rel="stylesheet" type="text/css" href="../lib/jquery.jcarousel.css" />
<!--
  jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="../skins/tango/skin.css" />

<link rel="stylesheet" type="text/css" href="../lib/thickbox/thickbox.css" />

<style type="text/css">

/**
 * Overwrite for having a carousel with dynamic width.
 */
.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 85%;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width: 100%;
}

</style>

<script type="text/javascript">

// Set thickbox loading image
tb_pathToImage = "../images/loading-thickbox.gif";

var mycarousel_itemList = [
    {url: "http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg", title: "Flower1"},
    {url: "http://static.flickr.com/75/199481072_b4a0d09597_s.jpg", title: "Flower2"},
    {url: "http://static.flickr.com/57/199481087_33ae73a8de_s.jpg", title: "Flower3"},
    {url: "http://static.flickr.com/77/199481108_4359e6b971_s.jpg", title: "Flower4"},
    {url: "http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg", title: "Flower5"},
    {url: "http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg", title: "Flower6"},
    {url: "http://static.flickr.com/58/199481218_264ce20da0_s.jpg", title: "Flower7"},
    {url: "http://static.flickr.com/69/199481255_fdfe885f87_s.jpg", title: "Flower8"},
    {url: "http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg", title: "Flower9"},
    {url: "http://static.flickr.com/70/229228324_08223b70fa_s.jpg", title: "Flower10"}
];

function mycarousel_itemLoadCallback(carousel, state)
{
    for (var i = carousel.first; i <= carousel.last; i++) {
        if (carousel.has(i)) {
            continue;
        }

        if (i > mycarousel_itemList.length) {
            break;
        }

        // Create an object from HTML
        var item = jQuery(mycarousel_getItemHTML(mycarousel_itemList[i-1])).get(0);

        // Apply thickbox
        tb_init(item);

        carousel.add(i, item);
    }
};

/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(item)
{
    var url_m = item.url.replace(/_s.jpg/g, '_m.jpg');
    return '<a href="' + url_m + '" title="' + item.title + '"><img src="' + item.url + '" width="75" height="75" border="0" alt="' + item.title + '" /></a>';
};



jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        visible: 4
		 size: mycarousel_itemList.length,
        itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
    });
});

</script>

</head>
<body>
<div id="wrap">
 



  <ul id="mycarousel" class="jcarousel-skin-tango">
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
  </ul>

</div>
</body>
</html>
__________________
da weisste bescheid, schätzelein!!!!
deak ist offline   Mit Zitat antworten
Alt 27-05-2008, 19:33   #15 (permalink)
nobody is perfect
 
Benutzerbild von richtsteiger
 
Registriert seit: Jul 2004
Ort: munich
Beiträge: 867
Zitat:
Zitat von deak Beitrag anzeigen
Dumme Frage wie bekomm ichs den am besten hin das er automatisch scrollt?
Die Galerie? Mit auto:
HTML-Code:
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
      auto: 1,
      visible: 4,
      size: mycarousel_itemList.length,
      itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
    });
});
Guckst du hier: http://sorgalla.com/projects/jcarous...atic_auto.html

Und noch eine Bitte. Der Code hilft hier auch nicht viel weiter ohne
die Scripts und die CSS. Daher bei weiteren Problmen am besten mal
als ganzes hier posten bzw. 'nen Link anbieten. Danke
__________________
XING

Geändert von richtsteiger (27-05-2008 um 19:34 Uhr)
richtsteiger ist offline   Mit Zitat antworten
Antwort

Lesezeichen

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 sind an
Pingbacks sind an
Refbacks sind an



Alle Zeitangaben in WEZ +1. Es ist jetzt 23:58 Uhr.

Domains, Webhosting & Vserver von Host Europe
Unterstützt das Flashforum!
Adobe User Group


Copyright ©1999 – 2014 Marc Thiele