EJ-Auto Image Rotator w miejsce logo

wersja skryptu MyBB: 1.6.12
adres forum:mamhopla.com.pl
na czym polega problem (screen, opis, komunikaty, nazwa i wersja wtyczki): Easy Jquery Auto Image Rotator

Chciałbym dodać ten rotator w miejsce logo na stronie głównej i niestety logo nie trzyma się swojego miejsca, jest poza.
Więc o to moje działania:
1. Na samym dole w headerinclude wrzuciłem:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">

function theRotator() {
    //Set the opacity of all images to 0
    jQuery('div.rotator ul li').css({opacity: 0.0});
    
    //Get the first image and display it (gets set to full opacity)
    jQuery('div.rotator ul li:first').css({opacity: 1.0});
        
    //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
    
    setInterval('rotate()',6000);
    
}

function rotate() {    
    //Get the first image
    var current = (jQuery('div.rotator ul li.show')?  jQuery('div.rotator ul li.show') : jQuery('div.rotator ul li:first'));

    if ( current.length == 0 ) current = jQuery('div.rotator ul li:first');

    //Get next image, when it reaches the end, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('show')) ? jQuery('div.rotator ul li:first') :current.next()) : jQuery('div.rotator ul li:first'));
    
    //Un-comment the 3 lines below to get the images in random order
    
    //var sibs = current.siblings();
        //var rndNum = Math.floor(Math.random() * sibs.length );
        //var next = jQuery( sibs[ rndNum ] );
            

    //Set the fade in effect for the next image, the show class has higher z-index
    next.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 1000);

    //Hide the current image
    current.animate({opacity: 0.0}, 1000)
    .removeClass('show');
    
};



jQuery(document).ready(function() {        
    //Load the slideshow
    theRotator();
    jQuery('div.rotator').fadeIn(1000);
    jQuery('div.rotator ul li').fadeIn(1000); // tweek for IE
});

</script>
<script type="text/javascript">jQuery.noConflict();</script>

2. W global.css na dole dodałem:

/* rotator in-page placement */
div.rotator {
    position: relative;
    height: 350px;
    margin-left: 25%;
}

/* rotator css */
div.rotator ul li {
    
    position: absolute;
    list-style: none;
}

div.rotator ul li.show {
    z-index:500;
}

3. Następnie w header zamiast:

<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>

chcę dodać:

<br />
<div class="rotator">
<ul>
<li class="show">
<a href="http://www.mamhopla.com.pl" target="_blank">
<img src="adres obrazka" width="1200" height="350" alt="pic1" />
</a>
</li>
<li>
<a href="http://www.mamhopla.com.pl" target="_blank">
<img src="adres obrazka" width="1200" height="350" alt="pic2" />
</a>
</li>
</ul>
</div>

oczywiście zamiast "nazwy obrazka" podaję link do zdjęcia.
...I wszystko oczywiście działa, ale... nowe logo (slider) nie trzyma się swojego miejsca (jak to przy standardowym logo) tylko jest przesunięte do dołu .
Czy byłby ktoś tak miły i poradził co robię źle?

Matslom napisał 05.02.2014, 18:17:
Przenoszę

Spróbuj na początku dać <div class="logo"> potem kod, a na końcu </div>

@Snake_ dziękuję za zainteresowanie.
Niestety przy tym co zaproponowałeś logo ucieka delikatnie w bok - to raz.
Dwa - slider zrobił się tak jakby podwójny, tzn. pierwsza fota w swoim czasie wyświetla się wyżej, druga w swoim czasie niżej.
Przy standardowym logo miałem zdefiniowane logo 1200x350
a po tym robi się tak jakby 1200x700 i na przemian przeskakują, jedna fota w górnej połowie, potem gaśnie i druga fota w dolnej połowie :/

A możesz to teraz dodać na forum? Bo teraz jest logo i trudno cokolwiek określić. Wolę to zobaczyć online.

dodane wg, Twojej wskazówki, można zerknąć

Pokaż swój szablon header, ponieważ dodałem do siebie i wszystko śmiga.

Poniżej szablon header z dodanym sliderem

<div id="container">
        <a name="top" id="top"></a>
        <div id="header">
            <div class="logo"><br />
<div class="rotator">
<ul>
<li class="show">
<a href="http://www.mamhopla.com.pl" target="_blank">
<img src="http://i1034.photobucket.com/albums/a422/Woytas11/logomh2_zps6247df1e.png" width="1200" height="350" alt="pic1" />
</a>
</li>
<li>
<a href="http://www.mamhopla.com.pl" target="_blank">
<img src="http://i1034.photobucket.com/albums/a422/Woytas11/logomh_zpsf71e5eb5.png" width="1200" height="350" alt="pic2" />
</a>
</li>
</ul>
</div></div>
            <div class="menu">
                <ul>
                    <li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$theme['imgdir']}/toplinks/search.gif" alt="" title="" />{$lang->toplinks_search}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" />{$lang->toplinks_memberlist}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$theme['imgdir']}/toplinks/calendar.gif" alt="" title="" />{$lang->toplinks_calendar}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$theme['imgdir']}/toplinks/help.gif" alt="" title="" />{$lang->toplinks_help}</a></li>
                </ul>
            </div>
            <hr class="hidden" />
            <div id="panel">
                {$welcomeblock}
            </div>
        </div>
        <hr class="hidden" />
        <br class="clear" />
        <div id="content">
            {$pm_notice}
            {$bannedwarning}
            {$bbclosedwarning}
            {$unreadreports}
            {$pending_joinrequests}
            <navigation>
            <br />

Dlaczego w kodzie (global.css) masz:

/* rotator in-page placement */
div.rotator {
    position: relative;
    height: 350px;
    margin-left: 25%;
}

/* rotator css */
div.rotator ul li {    
    position: relative;
    list-style: none;
}

div.rotator ul li.show {
    z-index:500;
} 


A tu dałeś inne?

div.rotator ul li {    
    position: relative;
    list-style: none;
}

Zmień na

div.rotator ul li {    
    position: absolute;
    list-style: none;
} 


i musi działać.

:sciana:

o masz...
@Snake_ wieeelkie dzięki za pomoc.
leci plusik, problem rozwiązany.

Matslom napisał 05.02.2014, 19:59:


Nie pisz zbędnych postów