Slideshow in Shop 2

Freaky

Sehr aktives Mitglied
7. Mai 2009
1.331
104
Hallo,

ich möchte eine kleine Slideshow auf der Startseite in den Shop2 bauen. Dazu möchte ich jQuery benutzen. Das funktioniert auch so weit schon wie ich mir das vorstelle. Jetzt habe ich allerdings noch 2 Probleme.

Wenn der Besucher Javascript deaktiviert hat, werden alle Bilder untereinander angezeigt. Das sieht natürlich sehr blöd aus. Wie setze ich es um, dass dann ein Bild per Zufallsprinzip angezeigt wird?

Des weiteren, wie baue ich das Script am besten ein? Nutze ich nen iFrame oder binde ich das direkt ins Template ein?

Hier der Code:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

	<title>AnythingSlider</title>

	<link rel="stylesheet" href="css/page.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="css/anythingslider.css" type="text/css" media="screen" />

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.easing.1.2.js"></script>
	<script type="text/javascript" src="js/swfobject.js"></script> <!-- http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js -->
	<script type="text/javascript" src="js/jquery.anythingslider.js" charset="utf-8"></script>

	<script type="text/javascript">

		$(function () {
			$('#slider1').anythingSlider({
				startPanel      : 0,         // This sets the initial panel
				autoPlay        : true, // This turns off the entire slideshow FUNCTIONALY, not just if it starts running or not
				startStopped    : false, // If autoPlay is on, this can force it to start stopped
				width           : 500,  // Override the default CSS width
				height          : 250,        // if resizeContent is false, this is the default height if panel size is not defined
//				toggleControls  : true, // if true, then slide in controls on hover and slider change, hide @ other times
				theme           : 'default',
				buildArrows     : false,      // If true, builds the forwards and backwards buttons

				onSlideComplete : function(slider){
					// alert('Welcome to Slide #' + slider.currentPage);
				}
			});



			// Report Events to console
			$('.anythingSlider').bind('slideshow_start slideshow_stop slideshow_paused slideshow_unpaused slide_init slide_begin slide_complete',function(e, slider){
				// show object ID + event (e.g. "slider1: slide_begin")
				var txt = slider.$el[0].id + ': ' + e.type + ', now on panel #' + slider.currentPage;
				$('#status').text(txt);
				if (window.console && window.console.firebug){ console.debug(txt); } // added window.console.firebug to make this work in Opera
			});



		});
	</script>
</head>
	<div id="">


			<!-- AnythingSlider #1 -->
			<ul id="slider1">

				<li><a href="http://xxxxx.de">
				<img src="images/slide-civil-1.jpg" width="500" height="250 alt="" /></li>

				<li><a href="http://xxxxx.de">
				<img src="images/slide-env-1.jpg" width="500" height="250 alt="" /></li>

				<li><a href="http://xxxxx.de">
				<img src="images/rahmen1.png" width="500" height="250 alt="" /></li>

				<li><a href="http://xxxxx.de">
				<img src="images/slide-civil-1.jpg" width="500" height="250 alt="" /></li>

				<li><a href="http://xxxxx.de">
				<img src="images/slide-env-1.jpg" width="500" height="250 alt="" /></li>

				<li><a href="http://xxxxx.de">
				<img src="images/slide-civil-2.jpg" width="500" height="250 alt="" /></li>



			</ul>  <!-- END AnythingSlider #1 -->



	</div>

</body>

</html>
 

Freaky

Sehr aktives Mitglied
7. Mai 2009
1.331
104
AW: Slideshow in Shop 2

Ich habe hier noch ein Problem.

Wenn ich in die tpl_inc/header.tpl folgenden Code einfüge:

Code:
    <link rel="stylesheet" href="{$currentTemplateDir}css/page.css" type="text/css" />
    <link rel="stylesheet" href="{$currentTemplateDir}css/anythingslider.css" type="text/css" />
    <script type="text/javascript" src="{$currentTemplateDir}js/jquery.anythingslider.js" charset="utf-8"></script>
Ist die ganze Formatierung vom Shop verloren. Habe ich da irgendwie nen Denkfehler drin?
 

Freaky

Sehr aktives Mitglied
7. Mai 2009
1.331
104
AW: Slideshow in Shop 2

Danke Jörg, aber die brauche ich ja. Zur Not benenne ich die halt um. Aber ne page.css verwendet der Shop ja eigentlich nicht. Da habe ich extra drauf geachtet.
 

Freaky

Sehr aktives Mitglied
7. Mai 2009
1.331
104
AW: Slideshow in Shop 2

Habe die Datei jetzt so umbenannt:

Code:
    <link rel="stylesheet" href="{$currentTemplateDir}css/anythingsliderhaupt.css" type="text/css" />
Aber sobald ich das einfüge, zerschießt mir die Formatierung. Verstehe ich nicht. Oder sind das die "Befehle" IN der besagten Datei, die sich mit dem Shop in die Quere kommen? Habe von CSS leider nicht wirklich viel Ahnung :redface:

EDIT:

Das ist der Inhalt der .css:

Code:
/* Demo specific css */
*                      { margin: 0; padding: 0; }
body                   { font: 12px Georgia, Serif; }
a, a img               { border: 0; text-decoration: none; }

#page-wrap             { width: 90%; padding: 15px; background: white; margin: 0 auto 50px; position: relative; }

h1                     { font: bold 60px Helvetica, Sans-Serif; letter-spacing: -2px; margin: 20px 0; text-align: center; }
h2                     { font: bold 30px Helvetica, Sans-Serif; letter-spacing: -1px; margin: 0 0 10px 0; }
h3                     { font: 20px Georgia, Serif; margin: 0 0 10px 0; }  
h5                     { font: 15px Georgia, Serif; text-align: center; }
pre                    { font: 13px/1.8 Monaco, MonoSpace; margin: 0 0 15px 0; background: #f5f5f5; block: inline; }
blockquote             { margin-left: 30px; }

ul                     { margin: 0 0 25px 25px; }
ul li                  { font: 15px Georgia, Serif; margin: 0 0 8px 0; }

#dl                    { position: absolute; top: 10px; right: 0; background: black; color: white; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 3px 6px; }
#dl:hover              { background: #666; }

.themeselector         { margin: 0 auto; text-align: center; }

#status                { color: #00a; font-weight: bold; }
.alert                 { color: #f00; font-weight: bold; }
.data                  { width: 100%; border: #555 1px solid; border-collapse: collapse; }
.data td, .data th     { border: #555 1px solid; padding: 0 5px; }
.data th               { background: #eee; }
.data .col             { width: 200px; }

/* For Specific Slides */
#textSlide             { padding: 10px 30px; }
#textSlide h3          { font: 20px Georgia, Serif; }
#textSlide h4          { text-transform: uppercase; font: 15px Georgia, Serif; margin: 10px 0; }
#textSlide ul          { list-style: disc; margin: 0 0 0 25px; }
#textSlide ul li       { display: list-item; }

.quoteSlide            { padding: 30px; }
.quoteSlide blockquote { font: italic 24px/1.5 Georgia, Serif; text-align: center; color: #444; margin: 0 0 10px 0; }
.quoteSlide p          { text-align: center; }

/* Set second slider panel sizes */
#slider2 .panel1       { width: 500px; height: 350px; }
#slider2 .panel2       { width: 450px; height: 420px; }
#slider2 .panel3       { width: 680px; height: 317px; }
#slider2 .panel4       { } /* left undefined to show it defaults to wrapper size */
#slider2 .panel5       { width: 680px; height: 317px; }
 

Dealux-GmbH

Sehr aktives Mitglied
5. März 2007
8.676
7
Düsseldorf
AW: Slideshow in Shop 2

Nimm mal nur das hier und lösch den Rest da raus:

HTML:
.themeselector         { margin: 0 auto; text-align: center; }

#status                { color: #00a; font-weight: bold; }
.alert                 { color: #f00; font-weight: bold; }
.data                  { width: 100%; border: #555 1px solid; border-collapse: collapse; }
.data td, .data th     { border: #555 1px solid; padding: 0 5px; }
.data th               { background: #eee; }
.data .col             { width: 200px; }

/* For Specific Slides */
#textSlide             { padding: 10px 30px; }
#textSlide h3          { font: 20px Georgia, Serif; }
#textSlide h4          { text-transform: uppercase; font: 15px Georgia, Serif; margin: 10px 0; }
#textSlide ul          { list-style: disc; margin: 0 0 0 25px; }
#textSlide ul li       { display: list-item; }

.quoteSlide            { padding: 30px; }
.quoteSlide blockquote { font: italic 24px/1.5 Georgia, Serif; text-align: center; color: #444; margin: 0 0 10px 0; }
.quoteSlide p          { text-align: center; }

/* Set second slider panel sizes */
#slider2 .panel1       { width: 500px; height: 350px; }
#slider2 .panel2       { width: 450px; height: 420px; }
#slider2 .panel3       { width: 680px; height: 317px; }
#slider2 .panel4       { } /* left undefined to show it defaults to wrapper size */
#slider2 .panel5       { width: 680px; height: 317px; }
 

Freaky

Sehr aktives Mitglied
7. Mai 2009
1.331
104
AW: Slideshow in Shop 2

Danke Jörg, das klappt soweit. Hast in ner Privatbrauerei was gut bei mir ;)

Jetzt habe ich nur noch ein Problem.
Den HTML Code habe ich jetzt über das Backend auf die Startseite eingebunden.
Kann ich das überhaupt machen?
Es wird nämlich leider nichts davon angezeigt, nur die Bilder der Slideshow in transparent. Drauf klicken kann ich allerdings.

Hier noch mal der eingefügte code:
Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title>xxx</title>


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="{$currentTemplateDir}js/jquery.easing.1.2.js"></script>
    <script type="text/javascript" src="{$currentTemplateDir}js/swfobject.js"></script> <!-- http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js -->

    <script type="text/javascript">

        $(function () {
            $('#slider1').anythingSlider({
                startPanel      : 0,         // This sets the initial panel
                autoPlay        : true, // This turns off the entire slideshow FUNCTIONALY, not just if it starts running or not
                startStopped    : false, // If autoPlay is on, this can force it to start stopped
                width           : 500,  // Override the default CSS width
                height          : 250,        // if resizeContent is false, this is the default height if panel size is not defined
//                toggleControls  : true, // if true, then slide in controls on hover and slider change, hide @ other times
                theme           : 'default',
                buildArrows     : false,      // If true, builds the forwards and backwards buttons
                animationTime       : 800,       // How long the slideshow transition takes (in milliseconds)

                onSlideComplete : function(slider){
                    // alert('Welcome to Slide #' + slider.currentPage);
                }
            });



            // Report Events to console
            $('.anythingSlider').bind('slideshow_start slideshow_stop slideshow_paused slideshow_unpaused slide_init slide_begin slide_complete',function(e, slider){
                // show object ID + event (e.g. "slider1: slide_begin")
                var txt = slider.$el[0].id + ': ' + e.type + ', now on panel #' + slider.currentPage;
                $('#status').text(txt);
                if (window.console && window.console.firebug){ console.debug(txt); } // added window.console.firebug to make this work in Opera
            });



        });


window.onload = function() {
var imgs = document.getElementsByTagName("img");
for(var i=0; i<imgs.length; i++) {
    var image = imgs[i];
    if(image.className == "ausblenden") {
        image.style.display = "block";
    }
}
}
    </script>
</head>

    <div id="">


            <!-- AnythingSlider #1 -->
            <ul id="slider1" style="list-style-type:none;">

<!-- Dein erstes Bild -->
                <li><a href="http://www.xxxx.de/xxxx">
                <img src="{$currentTemplateDir}angebote/startseite1.png" width="500" height="250" alt="" /></li>

                <li><a href="http://www.xxxx">
                <img src="{$currentTemplateDir}angebote/startseite2.png" width="500" height="250" alt="" class="ausblenden" /></li>

                <li><a href="http://www.xxx">
                <img src="{$currentTemplateDir}angebote/startseite3.png" width="500" height="250" alt="" class="ausblenden" /></li>


            </ul>  <!-- END AnythingSlider #1 -->



    </div>

</body>

</html>
Aber wenn ich mir den fertigen Quellcode anzeigen lasse, ist es natürlich so, dass es einen Head Bereich gibt, einen Body Bereich und dann das selbe noch mal, von meinem Code natürlich.
 

Dealux-GmbH

Sehr aktives Mitglied
5. März 2007
8.676
7
Düsseldorf
AW: Slideshow in Shop 2

Hehe alles ;)

Nee das wird so nicht klappen. Das musst du schon ins Template einbinden. Kann ja keine zwei Head-Bereiche geben.

Das hier mit in die Header.tpl, bevor der Head-Bereich aufhört:

HTML:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="{$currentTemplateDir}js/jquery.easing.1.2.js"></script>
    <script type="text/javascript" src="{$currentTemplateDir}js/swfobject.js"></script> <!-- http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js -->

    <script type="text/javascript">

        $(function () {
            $('#slider1').anythingSlider({
                startPanel      : 0,         // This sets the initial panel
                autoPlay        : true, // This turns off the entire slideshow FUNCTIONALY, not just if it starts running or not
                startStopped    : false, // If autoPlay is on, this can force it to start stopped
                width           : 500,  // Override the default CSS width
                height          : 250,        // if resizeContent is false, this is the default height if panel size is not defined
//                toggleControls  : true, // if true, then slide in controls on hover and slider change, hide @ other times
                theme           : 'default',
                buildArrows     : false,      // If true, builds the forwards and backwards buttons
                animationTime       : 800,       // How long the slideshow transition takes (in milliseconds)

                onSlideComplete : function(slider){
                    // alert('Welcome to Slide #' + slider.currentPage);
                }
            });



            // Report Events to console
            $('.anythingSlider').bind('slideshow_start slideshow_stop slideshow_paused slideshow_unpaused slide_init slide_begin slide_complete',function(e, slider){
                // show object ID + event (e.g. "slider1: slide_begin")
                var txt = slider.$el[0].id + ': ' + e.type + ', now on panel #' + slider.currentPage;
                $('#status').text(txt);
                if (window.console && window.console.firebug){ console.debug(txt); } // added window.console.firebug to make this work in Opera
            });



        });


window.onload = function() {
var imgs = document.getElementsByTagName("img");
for(var i=0; i<imgs.length; i++) {
    var image = imgs[i];
    if(image.className == "ausblenden") {
        image.style.display = "block";
    }
}
}
    </script>

Und das hier dann in die Seite in die du das haben willst (z.B. Seite.tpl, aber Achtung, hier wird das auf allen Seiten die du über das Backend erstellst angezeigt!)

HTML:
    <div id="">


            <!-- AnythingSlider #1 -->
            <ul id="slider1" style="list-style-type:none;">

<!-- Dein erstes Bild -->
                <li><a href="http://www.xxxx.de/xxxx">
                <img src="{$currentTemplateDir}angebote/startseite1.png" width="500" height="250" alt="" /></li>

                <li><a href="http://www.xxxx">
                <img src="{$currentTemplateDir}angebote/startseite2.png" width="500" height="250" alt="" class="ausblenden" /></li>

                <li><a href="http://www.xxx">
                <img src="{$currentTemplateDir}angebote/startseite3.png" width="500" height="250" alt="" class="ausblenden" /></li>


            </ul>  <!-- END AnythingSlider #1 -->



    </div>
 

Freaky

Sehr aktives Mitglied
7. Mai 2009
1.331
104
AW: Slideshow in Shop 2

Ähm ja..
..wenn ich den oberen Code einfüge, bleibt die komplette Seite weiß.


Ich hatte mir das ganze Ding ja schon vorher zusammengebastelt und getestet, da lief es wunderbar. Ich wollte das erst über nen iframe einbinden, allerdings gibt es da ja noch das Problem, dass meinen Bilder verlinkt sind und diese dann wahrscheinlich die ganze Seite in dem iframe lädt. Getestet habe ich das allerdings noch nicht. Gibt es da nicht eine möglichkeit die index.html, oder wie man sie nennen mag, einfach so einzubinden? :redface:
 

Dealux-GmbH

Sehr aktives Mitglied
5. März 2007
8.676
7
Düsseldorf
AW: Slideshow in Shop 2

Im Shop3 könnte man das als Plugin machen.

Ich weiß aber glaube ich wo das problem ist. Versuche im Header mal folgendes:
HTML:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="{$currentTemplateDir}js/jquery.easing.1.2.js"></script>
    <script type="text/javascript" src="{$currentTemplateDir}js/swfobject.js"></script> <!-- http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js -->

   {literal} <script type="text/javascript">

        $(function () {
            $('#slider1').anythingSlider({
                startPanel      : 0,         // This sets the initial panel
                autoPlay        : true, // This turns off the entire slideshow FUNCTIONALY, not just if it starts running or not
                startStopped    : false, // If autoPlay is on, this can force it to start stopped
                width           : 500,  // Override the default CSS width
                height          : 250,        // if resizeContent is false, this is the default height if panel size is not defined
//                toggleControls  : true, // if true, then slide in controls on hover and slider change, hide @ other times
                theme           : 'default',
                buildArrows     : false,      // If true, builds the forwards and backwards buttons
                animationTime       : 800,       // How long the slideshow transition takes (in milliseconds)

                onSlideComplete : function(slider){
                    // alert('Welcome to Slide #' + slider.currentPage);
                }
            });



            // Report Events to console
            $('.anythingSlider').bind('slideshow_start slideshow_stop slideshow_paused slideshow_unpaused slide_init slide_begin slide_complete',function(e, slider){
                // show object ID + event (e.g. "slider1: slide_begin")
                var txt = slider.$el[0].id + ': ' + e.type + ', now on panel #' + slider.currentPage;
                $('#status').text(txt);
                if (window.console && window.console.firebug){ console.debug(txt); } // added window.console.firebug to make this work in Opera
            });



        });


window.onload = function() {
var imgs = document.getElementsByTagName("img");
for(var i=0; i<imgs.length; i++) {
    var image = imgs[i];
    if(image.className == "ausblenden") {
        image.style.display = "block";
    }
}
}
    </script>{/literal}
 

Freaky

Sehr aktives Mitglied
7. Mai 2009
1.331
104
AW: Slideshow in Shop 2

Wenn ich das einbinde, hat das schon mal keinen negativen Einfluss auf den Shop!
So wie ich es sehe, haste du nur die {literal} varriable eingebaut. Wozu ist das genau gut?

Wenn ich jetzt aus Post8 den zweiten Code im Backend auf der Startseite einbaue, bin ich wieder beim Ergebnis, dass die Slideshow nicht angezeigt wird die verlinkungen zu den Bildern aber vorhanden ist.
Muss ich den Code zwingend im Template einbinden? Das wäre ja dann am besten in der seite.tpl oder?
 

Dealux-GmbH

Sehr aktives Mitglied
5. März 2007
8.676
7
Düsseldorf
AW: Slideshow in Shop 2

Das {literal} verhindert das { oder } von Smarty in dem Bereich beachtet wird.

Stimmt, den zweiten Code könntest du eigentlich auch über das Backend einfügen. "Sollte" funktionieren.
 

Freaky

Sehr aktives Mitglied
7. Mai 2009
1.331
104
AW: Slideshow in Shop 2

So, wenn ich den Code in die seite.tpl einbinde, werden mir alle Grafiken korrekt angezeigt. Ich habe in meinem Beispiel drei Grafiken.
Leider wird die JS funktion nicht angesprochen, daher werden alle Bilder untereinander angezeigt.

Das Script erkennt auch ob JS aktiviert ist, wenn dies nämlich nicht der Fall ist, soll nur das erste Bild angezeigt werden. Das funktionierte aber alles. Also heißt es, irgendwie fehlt da der JS Zugriff.

Ich suche noch mal.
 

Dealux-GmbH

Sehr aktives Mitglied
5. März 2007
8.676
7
Düsseldorf
AW: Slideshow in Shop 2

Da war noch nen fehler drin. Die schließenden </a> haben gefehlt:

HTML:
    <div id="">


            <!-- AnythingSlider #1 -->
            <ul id="slider1" style="list-style-type:none;">

<!-- Dein erstes Bild -->
                <li><a href="http://www.xxxx.de/xxxx">
                <img src="{$currentTemplateDir}angebote/startseite1.png" width="500" height="250" alt="" /></a></li>

                <li><a href="http://www.xxxx">
                <img src="{$currentTemplateDir}angebote/startseite2.png" width="500" height="250" alt="" class="ausblenden" /></a></li>

                <li><a href="http://www.xxx">
                <img src="{$currentTemplateDir}angebote/startseite3.png" width="500" height="250" alt="" class="ausblenden" /></a></li>


            </ul>  <!-- END AnythingSlider #1 -->



    </div>
 

Freaky

Sehr aktives Mitglied
7. Mai 2009
1.331
104
AW: Slideshow in Shop 2

Also der will noch nicht auf JS zugreifen.

Die JS Dateien liegen alle im richtigen Verzeichnis, das habe ich jetzt 4x überprüft :biggrin:

Hier mal der Head-Bereich des GENERIERTEN Quellcodes:

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">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
    <title>Brettspielversand.de günstiger Gesellschaftsspiele Shop</title>
    <META NAME="Title" CONTENT="Brettspielversand.de günstiger Gesellschaftsspiele Shop">
    <META NAME="description" CONTENT="">
    <meta name="author" content="Christian Wirtz">
    <META NAME="language" CONTENT="de">
    <META NAME="revisit-after" CONTENT="7 days">
    <META NAME="robots" CONTENT="index, follow, all">
    <META NAME="publisher" CONTENT="xxx">
    <META NAME="copyright" CONTENT="xxx">
    <META NAME="keywords" CONTENT="xxx">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="expires" content="now">
    <meta http-equiv="Content-Language" content="de">
    <link rel="stylesheet" type="text/css" href="[URL="http://forum.jtl-software.de/view-source:http://www.brettspielversand.de/templates/IDR_smooth/css/jtlshop2.css"]templates/IDR_smooth/css/jtlshop2.css[/URL]">
    <link rel="stylesheet" href="[URL="http://forum.jtl-software.de/view-source:http://www.brettspielversand.de/templates/IDR_smooth/css/tab.css"]templates/IDR_smooth/css/tab.css[/URL]" TYPE="text/css" MEDIA="screen">
    <link rel="stylesheet" href="[URL="http://forum.jtl-software.de/view-source:http://www.brettspielversand.de/templates/IDR_smooth/css/tab-print.css"]templates/IDR_smooth/css/tab-print.css[/URL]" TYPE="text/css" MEDIA="print">
    <link rel="shortcut icon" href="[URL="http://forum.jtl-software.de/view-source:http://www.brettspielversand.de/templates/IDR_smooth/gfx/favicon.ico"]templates/IDR_smooth/gfx/favicon.ico[/URL]" />
    <link rel="stylesheet" href="[URL="http://forum.jtl-software.de/view-source:http://www.brettspielversand.de/templates/IDR_smooth/css/anythingsliderhaupt.css"]templates/IDR_smooth/css/anythingsliderhaupt.css[/URL]" type="text/css" />
    <link rel="stylesheet" href="[URL="http://forum.jtl-software.de/view-source:http://www.brettspielversand.de/templates/IDR_smooth/css/anythingslider.css"]templates/IDR_smooth/css/anythingslider.css[/URL]" type="text/css" />
    <script type="text/javascript" src="[URL="http://forum.jtl-software.de/view-source:http://www.brettspielversand.de/templates/IDR_smooth/js/jquery.anythingslider.js"]templates/IDR_smooth/js/jquery.anythingslider.js[/URL]" charset="utf-8"></script>




    <script type="text/javascript" src="[URL="http://forum.jtl-software.de/view-source:http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"]http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js[/URL]"></script>
    <script type="text/javascript" src="[URL="http://forum.jtl-software.de/view-source:http://www.brettspielversand.de/templates/IDR_smooth/js/jquery.easing.1.2.js"]templates/IDR_smooth/js/jquery.easing.1.2.js[/URL]"></script>
    <script type="text/javascript" src="[URL="http://forum.jtl-software.de/view-source:http://www.brettspielversand.de/templates/IDR_smooth/js/swfobject.js"]templates/IDR_smooth/js/swfobject.js[/URL]"></script> <!-- [URL]http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js[/URL] -->

    <script type="text/javascript">

        $(function () {
            $('#slider1').anythingSlider({
                startPanel      : 0,         // This sets the initial panel
                autoPlay        : true, // This turns off the entire slideshow FUNCTIONALY, not just if it starts running or not
                startStopped    : false, // If autoPlay is on, this can force it to start stopped
                width           : 500,  // Override the default CSS width
                height          : 250,        // if resizeContent is false, this is the default height if panel size is not defined
//                toggleControls  : true, // if true, then slide in controls on hover and slider change, hide @ other times
                theme           : 'default',
                buildArrows     : false,      // If true, builds the forwards and backwards buttons
                animationTime       : 800,       // How long the slideshow transition takes (in milliseconds)

                onSlideComplete : function(slider){
                    // alert('Welcome to Slide #' + slider.currentPage);
                }
            });



            // Report Events to console
            $('.anythingSlider').bind('slideshow_start slideshow_stop slideshow_paused slideshow_unpaused slide_init slide_begin slide_complete',function(e, slider){
                // show object ID + event (e.g. "slider1: slide_begin")
                var txt = slider.$el[0].id + ': ' + e.type + ', now on panel #' + slider.currentPage;
                $('#status').text(txt);
                if (window.console && window.console.firebug){ console.debug(txt); } // added window.console.firebug to make this work in Opera
            });



        });


window.onload = function() {
var imgs = document.getElementsByTagName("img");
for(var i=0; i<imgs.length; i++) {
    var image = imgs[i];
    if(image.className == "ausblenden") {
        image.style.display = "block";
    }
}
}
    </script>



</head>
Und die betreffenden Zeilen weiter unten:

Code:
                <p class="navi">Sie sind hier: <a href="[URL="http://forum.jtl-software.de/view-source:http://www.brettspielversand.de/index.php?s=3"]index.php?s=3[/URL]">Startseite</a><br /></p>
        </div>

        <p class="spacer">&nbsp;</p>    <div id="wrapper">
        <div id="content">
            <div id="contentmid">





    <div id="">

            <!-- AnythingSlider #1 -->
            <ul id="slider1" style="list-style-type:none;">

<!-- Dein erstes Bild -->
                <a><a href="[URL="http://forum.jtl-software.de/view-source:http://www.brettspielversand.de/Sparsets"]http://www.xxx.de/xxx[/URL]">
                <img src="[URL="http://forum.jtl-software.de/view-source:http://www.brettspielversand.de/templates/IDR_smooth/angebote/startseite1.png"]templates/IDR_smooth/angebote/startseite1.png[/URL]" width="500" height="250" alt="" /></a></li>

                <a><a href="[URL="http://forum.jtl-software.de/view-source:http://www.brettspielversand.de/suche.php?suchausdruck=haus+anubis&JTLSHOP2"]http://www.xxx.de/[/URL]">
                <img src="[URL="http://forum.jtl-software.de/view-source:http://www.brettspielversand.de/templates/IDR_smooth/angebote/startseite2.png"]templates/IDR_smooth/angebote/startseite2.png[/URL]" width="500" height="250" alt="" class="ausblenden" /></a></li>
                <a><a href="[URL="http://forum.jtl-software.de/view-source:http://www.brettspielversand.de/Denk-und-Logikspiele"]http://www.xxx.de/[/URL]">
                <img src="[URL="http://forum.jtl-software.de/view-source:http://www.brettspielversand.de/templates/IDR_smooth/angebote/startseite3.png"]templates/IDR_smooth/angebote/startseite3.png[/URL]" width="500" height="250" alt="" class="ausblenden" /></a></li>


            </ul>  <!-- END AnythingSlider #1 -->



    </div>




                <div class="seite">
 

Freaky

Sehr aktives Mitglied
7. Mai 2009
1.331
104
AW: Slideshow in Shop 2

Funktioniert innerhalb des {literal} eventuell kein JS?

Mit nem iFrame habe ich es jetzt auch probiert, da scrollen die Bilder zwar durch, nur fehlen mir dann die Bedienelemente. Desweiteren werden die Links im iFrame geladen, was natürlich nicht sein sollte.

Man muss da doch irgendwie JS zum laufen bekommen :confused:
 
Ähnliche Themen
Titel Forum Antworten Datum
Neu Softwarelösung für Visagist inkl. Mini-Shop & Kassa User helfen Usern 14
Neu Dauerhaftes Banner oben am Shop möglich? Allgemeine Fragen zu JTL-Shop 11
Neu Exception bei core.connector.auth: Invalid shop url. https://XYZ.de does not point to a shopware 6 instance. Please check the Shop URL. Shopware-Connector 0
Neu Sortierung Varianten im Shop falsch ? Allgemeine Fragen zu JTL-Shop 0
Eine Artikelnummern pro Shop ? Und einen Hauptartikel ? JTL-Wawi 1.8 2
Neu Sortierung Artikel Wawi - JTL Shop Allgemeine Fragen zu JTL-Shop 1
Neu Fehlerhafter Abgleich nach Update auf Shop Version 5.5 Installation / Updates von JTL-Shop 4
Keine Datenübertragung zum Shop möglich / Kundenkonto migrieren Onlineshop-Anbindung 10
Neu Eigene Felder - Sortierung wird nicht in JTL Shop übernommen - Anzeige im Shop immer unterschiedlich User helfen Usern - Fragen zu JTL-Wawi 0
Neu Kündigen der Shop-Anbindung nicht möglich Onlineshop-Anbindung 1
Neu Shopify Lagerbestandsabgleich einrichten (bei neuem Shop) Shopify-Connector 3
Neu Kindartikel-Name wird im Shop nicht richtig angezeigt Allgemeine Fragen zu JTL-Shop 8
Neu JTL Shop (anderes Template) eigene Felder aus Wawi als TAB im Shop User helfen Usern - Fragen zu JTL-Wawi 12
Neu Mail Bestellbestätigung aus dem Shop Betrieb / Pflege von JTL-Shop 1
Neu Shop-Admin: Versandarten und Zahlungsarten nicht aufrufbar Allgemeine Fragen zu JTL-Shop 11
Neu JTL-Shop Lieferanten Artikelnummer und Suchbegiffe für Onlineshop werden im Shop nicht gefunden Allgemeine Fragen zu JTL-Shop 5
Neu Kunden im Shop Backend anzeigen Allgemeine Fragen zu JTL-Shop 5
Neu Shop zeigt nur Bilder der Kategorien an, nicht der eigentlichen Produkte WooCommerce-Connector 3
Neu Behandlung von JTL Shop Coupons und Retouren in JTL Wawi Arbeitsabläufe in JTL-Wawi 0
Neu Shop-Geschwindigkeit: nicht ausreichend Allgemeine Fragen zu JTL-Shop 10
Nach Update: Shop Lizenz gültig aber mit anderen Kundenkonto verknüpft JTL-Wawi 1.10 1
Neu Welche Alternativen zu JTL-Shop JTL-Shop - Ideen, Lob und Kritik 9
Neu JTL Shop 5.5.1 Lieferland kann bei abweichender Lieferadresse nicht ausgewählt werden JTL-Shop - Fehler und Bugs 9
Neu JTL Shop: Ausblenden von Unterkategorien (In der Mitte) möglich ? Allgemeine Fragen zu JTL-Shop 0
Neu 500er Probleme nach Shop Update Betrieb / Pflege von JTL-Shop 4
Neu JTL Shop 5.5 Tips für bessere Performance? Allgemeine Fragen zu JTL-Shop 5
Neu JTL Debug 2.0.4 und Shop 5.5.2 - Fehler 500 Plugins für JTL-Shop 3
Neu Sprechende URLs & Sprachlogik im JTL-Shop – Wer hat’s schon umgesetzt? Allgemeine Fragen zu JTL-Shop 1
Neu JTL Shop 5.5.2 Startseite Breite ändern Allgemeine Fragen zu JTL-Shop 1
Neu Kundendaten inkl Login Daten auf neuen Shop übertragen inkl Blowfish Key. Fehlerhafte Adressen etc mit Sonderzeichen etc Allgemeine Fragen zu JTL-Shop 1
Neu .php-cs-fixer.php - nicht identisch mit den Dateien der aktuellen Version von JTL-Shop JTL-Shop - Fehler und Bugs 3
Neu JTL-Shop: Anzeige der Artikel aus untergeordneten Kategorien Allgemeine Fragen zu JTL-Shop 2
Warnmeldung JTL-Shop Anbindung nach Update JTL-Wawi 1.10 5
Shop Anzeige Nicht lieferbare Artikel Einrichtung JTL-Shop5 0
Neu Erfahrungen gesucht: Custom Shop (Next.js/React) an JTL-Wawi anbinden Allgemeines zu den JTL-Connectoren 1
Barrierefreiheit mit Upgrade auf JTL-Shop 5.5 erledigt? Einrichtung JTL-Shop5 24
Neu Plugin - Kindartikel in der Artikelübersicht anzeigen - SHOP-475 Plugins für JTL-Shop 7
Neu Wawi-Shop updaten - Welche Version? Onlineshop-Anbindung 4
Beantwortet Kontaktformulare im JTL Shop Betrieb / Pflege von JTL-Shop 1
Neu Große Bilder im Shop (Slider, Blog, Galerie etc.) nachträglich optimieren – wie macht ihr das? Allgemeine Fragen zu JTL-Shop 2
Neu Gleiche Designvorlage für eBay und JTL-Shop mit globalen Textbausteinen nutzen Allgemeine Fragen zu JTL-Shop 0
Neu Dropdownliste Shop 5.5.1 öffnet sich nach oben Allgemeine Fragen zu JTL-Shop 7
Neu Fehlermeldung im Logbuch im Shop: Routing error: Invalid stream provided; must be a string stream identifier or stream resource JTL-Shop - Fehler und Bugs 1
Neu Deaktiviertung eines Var-Kindes löscht den ganzen Artikel im Shop PrestaShop-Connector 0
Neu Guthaben-Funktion in JTL Shop ohne MwSt. buchhalterisch nicht abbildbar JTL-Shop - Ideen, Lob und Kritik 17
Neu Shop 5.5.1: Lieferadresse - Lieferland - bei mir leer? JTL-Shop - Fehler und Bugs 4
Neu JTL Shop 5.5.1 : Lieferzeit wird mit "0 Werktagen" ausgegeben, obwohl Lieferzeiten bei Versandarten hinterlegt sind JTL-Shop - Fehler und Bugs 3
Kein Shop-Abgleich JTL-Wawi 1.10 2
Neu Einen Puffer, dass Artikel im Shop nicht auf "ausverkauft" gehen? JTL-Wawi - Ideen, Lob und Kritik 4
Neu Exportformate liefern nur netto Werte für Versandkosten seit JTL Shop 5.5.0 Betrieb / Pflege von JTL-Shop 6

Ähnliche Themen