Zum Inhalt springen

NivoSlider per HTML & Javascript einbauen fehlerhaft

Erstellt am 17. November 2012 · 4 Antworten · letzte Antwort am 6. Dezember 2012

Tags: Frage

jojoschmiddi ·

Ich weiss nicht, ob ich mit dem Thema im richtigen Unterforum bin, aber ich fange mal an:

Ich nutze ein Responsive Website Template (http://www.derby-web-design-agency.co.uk/themes/response/). Dieses Template baue ich gerade mit Typo3 nach. Es soll ein FLUID Template sein. Soweit wird alles, was ich bisher nachgebaut habe, auch dargestellt.

Ich habe die Javscripte und die CSS Dateien wie im Original eingefügt. Doch der NivoSlider wird nicht richtig dargestellt. Bei der Typo3-Seite fehlen die Navigationspfeile und das Bild ragt über den geplanten Rand hinaus. Auch scheint das Javascript nicht zu funktionieren.

Hier erst einmal der HTML-Ausschnitt des Originals:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Responsive - Premium Responsive HTML Template</title>
<meta name="description" content="Response Premium Html Responsive Template" />
<meta name="keywords" content="Responsive Html, Responsive Template, Response" />
<link rel="shortcut icon" href="http://www.derby-web-design-agency.co.uk/themes/response/images/favicon.png" />
<link rel="bookmark icon" href="http://www.derby-web-design-agency.co.uk/themes/response/images/favicon.png" />
<link href="css/main.css" rel="stylesheet" type="text/css">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="grey" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
<script src="js/twitter.js"></script>
<script src="js/custom.js"></script>
<script>
        //// Start Simple Sliders ////
        $(function() {
                setInterval("rotateDiv()", 10000);
        });

                function rotateDiv() {
                var currentDiv=$("#simpleslider div.current");
                var nextDiv= currentDiv.next ();
                if (nextDiv.length ==0)
                        nextDiv=$("#simpleslider div:first");

                currentDiv.removeClass('current').addClass('previous').fadeOut('2000');
                nextDiv.fadeIn('3000').addClass('current',function() {
                        currentDiv.fadeOut('2000', function () {currentDiv.removeClass('previous');});
                });

        }
        //// End Simple Sliders ////
</script>
<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>
</head>

<body>
<div id="header">
            <!-- Start navigation area -->
        <div id="navigation">

                <div id="navigation_wrap">
                  <!-- Start contact info area -->
                <div id="conteactinfo"><strong>Email:</strong> info@domainname.com  |  <strong>Phone:</strong> (+44) 1234 567 890</div>
                <!-- End contact info area -->

                <!-- Start navigation -->
                <div id="navi">

                    <ul>

                        <li><a href="/themes/response/" title="Response Home">Home</a></li>
                        <li><a href="#" title="Response Features">Features</a>
                                <ul>
                                    <li><a href="buttons-buttonshapes.html" title="Response Buttons">Buttons</a></li>
                                <li><a href="columns.html" title="Response Columns">Columns</a></li>
                                <li><a href="icons-and-lists.html" title="Response Icons &amp; Lists">Icons &amp; Lists</a></li>
                                <li><a href="notifications.html" title="Response Notifications">Notifications</a></li>
                                <li><a href="tabs-and-toggles.html" title="Response Tabs &amp; Toggles">Tabs &amp; Toggles</a></li>
                                <li><a href="#" title="Response Other Dropdown">Other</a>
                                        <ul>
                                            <li><a href="#" title="Response Other Dropdown">Demo Tab</a></li>
                                        <li><a href="#" title="Response Other Dropdown">Demo Tab</a></li>
                                        <li><a href="#" title="Response Other Dropdown">Demo Tab</a></li>
                                        <li><a href="#" title="Response Other Dropdown">Demo Tab</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="blog.html" title="Response's Blog">Blog</a>
                                <ul>
                                    <li><a href="blog-left.html" title="Left Column Blog">Left Column Blog</a></li>
                                <li><a href="blog.html" title="Right Column Blog">Right Column Blog</a></li>
                                <li><a href="blog-post.html" title="Blog Post">Post</a>
                                        <ul>
                                        <li><a href="left-blog-post.html" title="Left Column Blog Post">Left Column Post</a></li>
                                    <li><a href="blog-post.html" title="Right Column Blog Post">Right Column Post</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="portfolio.html" title="Respons'se Portfolio">Portfolio</a>
                                <ul>
                                    <li><a href="portfolio-2-column.html" title="2 Column Filtered Portfolio">2 Columns</a></li>
                                <li><a href="portfolio-3-column.html" title="3 Column Filtered Portfolio">3 Columns</a></li>
                                <li><a href="portfolio.html" title="4 Column Filtered Portfolio">4 Columns</a></li>
                            </ul>
                        </li>
                        <li><a href="contact-us.html" title="Contact Response">Contact Us</a></li>

                    </ul>

                </div>
                <!-- End navigation -->

                        </div>

        </div>
        <!-- End navigation area -->
        <div class="clear"></div>
        <!-- Start Social & Logo area -->
        <div id="header_small">


            <!-- Start Logo area -->
            <div id="logo">
              <a href="/themes/response/" title="Response">Response</a>
            </div>
            <!-- End Logo area -->

        </div>
        <!-- End Social & Logo area -->

</div>

<div id="main">

    <!-- Start Slider Wrapping -->
    <div id="sliderwrap">

        <!-- Start Slider -->
        <div id="slider" class="nivoSlider">
            <img src="images/slider-banners/slider01.jpg" alt=""/>
            <img src="images/slider-banners/slider02.jpg" alt=""/>
            <img src="images/slider-banners/slider03.jpg" alt=""/>
        </div>
        <!-- End Slider -->
        <!-- Start Slider HTML Captions -->
        <div id="htmlcaption" class="nivo-html-caption">
            <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
        </div>
        <!-- End Slider HTML Captions -->

    </div>
    <!-- End Slider Wrapping -->

Jetzte der Ausschnitt aus dem Quelltext der lokalen Typo3-Seite:

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<!-- 
	Diese Seite wurde erstellt von:
	        XXXXX
	This website is powered by TYPO3 - inspiring people to share!
	TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
	TYPO3 is copyright 1998-2012 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
	Information and contribution at http://typo3.org/
-->



<title>Home</title>
<meta name="generator" content="TYPO3 6.0 CMS">
<meta name="DESCRIPTION" content="My Site">
<meta name="KEYWORDS" content="nix">

<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_15e32f16ab.css?1352662913" media="all">



<script src="typo3temp/javascript_5fe67b6b66.js?1352474961" type="text/javascript"></script>


<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<link href="fileadmin/responsive/css/main.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="fileadmin/responsive/js/jquery.nivo.slider.js"></script>
<script src="fileadmin/responsive/js/jquery.prettyPhoto.js" type="text/javascript"></script>
<script src="fileadmin/responsive/js/twitter.js"></script>
<script src="fileadmin/responsive/js/custom.js"></script>
<script>
        //// Start Simple Sliders ////
        $(function() {
                setInterval("rotateDiv()", 10000);
        });

                function rotateDiv() {
                var currentDiv=$("#simpleslider div.current");
                var nextDiv= currentDiv.next ();
                if (nextDiv.length ==0)
                        nextDiv=$("#simpleslider div:first");

                currentDiv.removeClass('current').addClass('previous').fadeOut('2000');
                nextDiv.fadeIn('3000').addClass('current',function() {
                        currentDiv.fadeOut('2000', function () {currentDiv.removeClass('previous');});
                });

        }
        //// End Simple Sliders ////
</script>
<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" type="text/css" media="all" />
	<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
</head>
<body>
<div id="header">
            <!-- Start navigation area -->
        <div id="navigation">

                <div id="navigation_wrap">

                <!-- Start contact info area -->
                <div id="conteactinfo"> </div>
                <!-- End contact info area -->
                <!-- Start navigation -->
                <div id="navi">

                    <ul><li><a href="index.php?id=4"  >Home</a></li></ul>

                </div>
                <!-- End navigation -->

                        </div>

        </div>
        <!-- End navigation area -->
        <div class="clear"></div>
        <!-- Start Social & Logo area -->
        <div id="header_small">
                <!-- Start Social area -->
                <div class="social">

                <ul>
                <li><a href="#" class="social-google"></a></li>
                <li><a href="#" class="social-facebook"></a></li>
                <li><a href="#" class="social-twitter"></a></li>
                <li><a href="#" class="social-linkedin"></a></li>
                <li><a href="#" class="social-forrst"></a></li>
                <li><a href="#" class="social-dribbble"></a></li>
                </ul>

            </div>
            <!-- End Socialarea -->

            <!-- Start Logo area -->
            <div id="logo">
              <a href="index.php?id=4&amp;tx__%5Baction%5D=index.php&amp;tx__%5Bcontroller%5D=Standard&amp;cHash=243e4e7f5d5eb30ffc23320fef47db68"> XXXXX </a>
            </div>
            <!-- End Logo area -->

        </div>
        <!-- End Social & Logo area -->

</div>

<div id="main">

    <!-- Start Slider Wrapping -->
    <div id="sliderwrap">

        <!-- Start Slider -->
        <div id="slider" class="nivoSlider">
          <img src="fileadmin/responsive/images/slider-banners/slider01.jpg" alt=""/>
            <img src="fileadmin/responsive/images/slider-banners/slider02.jpg" alt=""/>
            <img src="fileadmin/responsive/images/slider-banners/slider03.jpg" alt=""/>
        </div>
        <!-- End Slider -->
        <!-- Start Slider HTML Captions -->
        <div id="htmlcaption" class="nivo-html-caption">
            <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
        </div>
        <!-- End Slider HTML Captions -->



    </div>
    <!-- End Slider Wrapping -->

Ich nutze lokal schon die Typo3 6.0 Version als RC1!

Nun, ich sehe leider keinen Unterschied in der Ausgabe des Quelltextes vom Slider.

Liegt es evtl. an einem Javascript, dass falsch eingebunden wird? Oder liegt es an einer Typo3 Einstellung?

Hier mal mein TS der ROOT Page:

# Create and configure our site
page = PAGE
page.typeNum = 0
page.meta.DESCRIPTION = My Site
page.meta.KEYWORDS = nix

#div um ctype html entfernen
tt_content.html.prefixComment >
tt_content.stdWrap.innerWrap.override = |
tt_content.stdWrap.innerWrap.override.if {
equals = html
value.field = CType
}

page.headerData.10=TEXT
page.headerData.10.value (         
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
)

### Setup
config {
  doctype = {$doctype}
  xmlprologue = none
  xhtml_cleaning = none
  htmlTag_setParams = none
}


# Make sure that the language of the page is english
  page.config.htmlTag_langKey = de
  config.locale_all = de_DE
  config.language = de
# Define the javascript (used by TYPO3) as an external file
  page.config.removeDefaultJS=external
# Encrypt Mail addresses
  page.config.spamProtectEmailAddresses = 1
# do not allow TYPO3 to write code into the body tag
  page.bodyTag = <body>
# Define the characterset as utf8
  config.metaCharset = utf-8

tt_content.stdWrap.dataWrap >

config.disablePrefixComment = 1

lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class >

 
# Create a Fluid Template
page.10 = FLUIDTEMPLATE
page.10 {
  file = fileadmin/responsive/index.html
  # Set the Template Pathes
  partialRootPath = fileadmin/fluid/partials/
  layoutRootPath = fileadmin/fluid/layouts/
  variables {
    # Assign the main column with our {content}-destination
    content < styles.content.get
    # Assign the left column with our {content_left}-destination
    content_left < styles.content.get
    content_left.select.where = colPos = 1
    # Assign the right column with our {content_right}-destination
    content_right < styles.content.get
    content_right.select.where = colPos = 2
  }
}

# Assign the Template files with the Fluid Backend-Template
page.10.file.stdWrap.cObject = CASE
page.10.file.stdWrap.cObject {
  key.data = levelfield:-1, backend_layout_next_level, slide
  key.override.field = backend_layout

  # Set the default Template, our 3 column Template
  default = TEXT
  default.value = fileadmin/fluid/index.html

  # Set also the first [2] Template, our 3 column Template
  2 = TEXT
  2.value = fileadmin/fluid/index.html

  # Set a second [3] Template, our full size Template
  3 = TEXT
  3.value = fileadmin/fluid/fullSize.html
}

page.headerData.20 = TEXT
page.headerData.20.value (

<link href="fileadmin/responsive/css/main.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="fileadmin/responsive/js/jquery.nivo.slider.js"></script>
<script src="fileadmin/responsive/js/jquery.prettyPhoto.js" type="text/javascript"></script>
<script src="fileadmin/responsive/js/twitter.js"></script>
<script src="fileadmin/responsive/js/custom.js"></script>
<script>
        //// Start Simple Sliders ////
        $(function() {
                setInterval("rotateDiv()", 10000);
        });

                function rotateDiv() {
                var currentDiv=$("#simpleslider div.current");
                var nextDiv= currentDiv.next ();
                if (nextDiv.length ==0)
                        nextDiv=$("#simpleslider div:first");

                currentDiv.removeClass('current').addClass('previous').fadeOut('2000');
                nextDiv.fadeIn('3000').addClass('current',function() {
                        currentDiv.fadeOut('2000', function () {currentDiv.removeClass('previous');});
                });

        }
        //// End Simple Sliders ////
</script>
<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>
)


/GRUNDKONFIGURATION
config  {
    admPanel = 0
    headerComment (
        Diese Seite wurde erstellt von:
       XXXXX
    )
 
    doctype = html5
    htmlTag_langKey = de_DE.utf-8
    xmlprologue = none
    disablePrefixComment = 1
    index_enable = 1
    baseUrl = http://localhost:8504/
    spamProtectEmailAddresses = ascii
    spamProtectEmailAddresses_atSubst = (at)   
    #simulateStaticDocuments = 1
    #simulateStaticDocuments_noTypeIfNoTitle = 1  
    removeDefaultJS = external
    inlineStyle2TempFile = 1     
    noScaleUp = 1    
    meaningfulTempFilePrefix = 50    
    sys_language_uid = 0
    language = de
    locale_all = de_DE
}

//RESPONSIVE DESIGN EINSTELLUNGEN
tt_content.image.20 {
  imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap"> | </div>
  imageColumnStdWrap.dataWrap = <div class="csc-textpic-imagecolumn"> | </div>
}

tt_content.image.20 {
  rendering {
    dl {
      imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow"> | </div>
      imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last"> | </div>
      oneImageStdWrap.dataWrap = <dl class="csc-textpic-image###CLASSES###" > | </dl>
    }
    ul {
      imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow"><ul> | </ul></div>
      imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last"><ul> | </ul></div>
      oneImageStdWrap.dataWrap = <li class="csc-textpic-image###CLASSES###"> | </li>
    }
    div {
      imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow"> | </div>
      imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last"> | </div>
      oneImageStdWrap.dataWrap = <div class="csc-textpic-image###CLASSES###"> | </div>
    }
    simple {
      imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap csc-textpic-single-image"> | </div>
    }
  }
}

// CoolURI aktivieren
config.tx_cooluri_enable = 0
config.redirectOldLinksToNew = 0


page.config.metaCharset = utf-8
page.config.additionalHeaders = Content-Type:text/html;charset=utf-8

//ERWEITERTE BEREINIGUNGEN
lib.stdheader {
    10.1.fontTag = <h2 id="c{field:uid}"{register:headerStyle}{register:headerClass}>|</h2>
    10.2.fontTag = <h3 id="c{field:uid}"{register:headerStyle}{register:headerClass}>|</h3>
    10.3.fontTag = <h4 id="c{field:uid}"{register:headerStyle}{register:headerClass}>|</h4>
    10.4.fontTag = <h5 id="c{field:uid}"{register:headerStyle}{register:headerClass}>|</h5>
    10.5.fontTag = <h6 id="c{field:uid}"{register:headerStyle}{register:headerClass}>|</h6>
    stdWrap.dataWrap = |
}

page.config.disablePrefixComment = true

lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class >

tt_content.stdWrap.prefixComment >
tt_content.header.20.prefixComment >
tt_content.default.prefixComment >
tt_content.text.stdWrap.prefixComment >
tt_content.text.20.prefixComment >
tt_content.textpic.20.stdWrap.prefixComment >
tt_content.table.20.stdWrap.prefixComment >
tt_content.menu.20.stdWrap.prefixComment >
tt_content.image.20.stdWrap.prefixComment >
tt_content.list.20.stdWrap.prefixComment >

lib.stdheader {
  10.1 >
  10.1 = TEXT
  10.1.current = 1
  10.1.fontTag = <h2>|</h2>
  10.2 >
  10.2 < .10.1
  10.2.fontTag = <h3>|</h3>
  10.2.stdWrap.dataWrap >
  10.3 >
  10.3 < .10.1
  10.3.fontTag = <h4>|</h4>
  10.4 >
  10.4 < .10.1
  10.4.fontTag = <h5>|</h5>
  10.5 >
  10.5 < .10.1
  10.5.fontTag = <h6>|</h6>
  stdWrap.dataWrap >
}


content.headerSpace = 0|0
content.space = 0|0
tt_content.textpic.20.spaceBelowAbove = 0
tt_content.image.20.spaceBelowAbove = 0
tt_content.header.stdWrap.space = 0|0
tt_content.stdWrap.space = 0|0
tt_content.stdWrap.spaceBefore = 0
tt_content.stdWrap.spaceAfter = 0
lib.stdheader.stdWrap.space = 0|0

plugin.tx_cssstyledcontent._CSS_DEFAULT_STYLE >
plugin.tt_news._CSS_DEFAULT_STYLE >

tt_content.stdWrap.innerWrap >

# ID der Startseite = 4
lib.logo = COA
lib.logo {
10 = TEXT
10.value = XXXXX
10.typolink {
parameter = 2
wrap = <a href ="">|</a>
}
}
jojoschmiddi ·
superpeng schrieb

hallo jojo,

auf die schnelle vielleicht ein ansatz...
kann es sein dass du dem slider kein theme mitgegeben hast?
selbst gebaut oder eben:
http://nivo.dev7studios.com/themes/

gruss peng

Ich nutze den Origianlquelltext aus der Original-Vorlage meines Designs, dass ich für die Seite ausgewählt habe.

superpeng ·

hast du den nivo slider manuell eingebaut oder mit der extension?

wenn du es manuell eingebaut hast, müsstest du noch ein kleines ts einbauen.

edit: jetzt versteh ich - besser spät als nie! das ganze ist der vorlage entnommen.
vergiss meine frage also 🙂

jojoschmiddi ·
superpeng schrieb

hast du den nivo slider manuell eingebaut oder mit der extension?

wenn du es manuell eingebaut hast, müsstest du noch ein kleines ts einbauen.

edit: jetzt versteh ich - besser spät als nie! das ganze ist der vorlage entnommen.
vergiss meine frage also 🙂

Ja, manuell, ohne Extension. Welches TS meinst Du?

Liegt es evtl. an Typo3 und der Verarbeitung des Javascriptes? Denn ich sehe bei meinem eingefügten dateien immer noch eine längere Zahlenreihe nach der Datei:

<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_f8d7587c0a.css?1354546938" media="all">
<link rel="stylesheet" type="text/css" href="fileadmin/responsive/css/main.css?1350639009" media="all">



<script src="fileadmin/responsive/js/jquery.nivo.slider.js?1323765824" type="text/javascript"></script>
<script src="fileadmin/responsive/js/jquery.prettyPhoto.js?1332923628" type="text/javascript"></script>
<script src="fileadmin/responsive/js/twitter.js?1332171064" type="text/javascript"></script>
<script src="fileadmin/responsive/js/custom.js?1332833956" type="text/javascript"></script>


<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
        //// Start Simple Sliders ////
        $(function() {
                setInterval("rotateDiv()", 10000);
        });

                function rotateDiv() {
                var currentDiv=$("#simpleslider div.current");
                var nextDiv= currentDiv.next ();
                if (nextDiv.length ==0)
                        nextDiv=$("#simpleslider div:first");

                currentDiv.removeClass('current').addClass('previous').fadeOut('2000');
                nextDiv.fadeIn('3000').addClass('current',function() {
                        currentDiv.fadeOut('2000', function () {currentDiv.removeClass('previous');});
                });

        }
        //// End Simple Sliders ////
</script>