Fragen zu : Jquery Tabs ... Views Slideshow und Sticky´s

Eingetragen von SkullSplitter (81)
am 22.05.2008 - 07:06 Uhr in

Moin Moin Allerseits :)

Ich bin, so gesehen, absoluter Newbie ... bin aber bisher gut mit Drupal zurecht gekommen.
Viel haben die User der Drupal Community auch dazu bei getragen.

An dieser Stelle ein Herzliches Dankeschön :)

Ich habe zum Üben und zum Vertraut machen , mir 2 mal auf meinem WebSpace Drupal installiert.
Das eine zum verbraten und rumspielen und das andere wo ich mir ernsthafte gedanken mache, wie ich die Seite aufbau und welche
Module ich einsetzen möchte.

Ich habe jetzt mehrere Tage ge-Googled und gesucht und gesucht aber irgendwie bin ich mit meinen Antworten, die ich gefunden habe, nicht ganz zufrieden. Von daher dachte ich mir, versuchs in der deutschen Community :)

Da zu Drupals Core ja auch JQuery gehört (Drupal-Dir/misc) würde ich das auch gerne nutzen. Ich habe bei Stilbuero.de die Demo mit den Tabs gesehen
und ziemlich weit unten ist der Effekt "Costum Tabs" , dieser welcher mich sehr interessiert.

Ich habe mir das mal genauer angesehen und das kam dabei rum

HTML Datei:

<html>
  <head>
   <link rel="stylesheet" href="customevent.tabs.css" type="text/css" media="screen" title="customevent (Default)" />
        
   <script type="text/javascript" src="jquery-1.2.4b.js"></script>
   <script type="text/javascript" src="ui.core.js"></script>
   <script type="text/javascript" src="ui.tabs.js"></script>   
   </head>
   
 <body class="customevent">
    <h1>Custom event</h1>
        <div id="costumeventtab1">
            <ul>
                <li><a href="#costumeventtext1"><span>One</span></a></li>
                <li><a href="#costumeventtext2"><span>Two</span></a></li>
                <li><a href="#costumeventtext3"><span>Three</span></a></li>
            </ul>
            <div id="costumeventtext1">
                <p>Define mouseover event to switch tabs</p>
                <pre><code>$('#costumeventtab1 > ul').tabs({ event: 'mouseover' });

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

customevent.tabs.css:

.ui-wrapper { border: 1px solid #50A029; }
.ui-wrapper input, .ui-wrapper textarea { border: 0; }

    .ui-tabs-hide {
        display: none;
    }
}

/* Hide useless elements in print layouts... */
@media print {
    .ui-tabs-nav {
        display: none;
    }
}

/* Skin */
.ui-tabs-nav, .ui-tabs-panel {
    font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
    font-size: 12px;
}
.ui-tabs-nav {
    list-style: none;
    margin: 0;
    padding: 0 0 0 3px;
}
.ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
    display: block;
    clear: both;
    content: " ";
}
.ui-tabs-nav li {
    float: left;
    margin: 0 0 0 2px;
    font-weight: bold;
}
.ui-tabs-nav a, .ui-tabs-nav a span {
    float: left; /* fixes dir=ltr problem and other quirks IE */
    padding: 0 12px;
    background: url(tabs.png) no-repeat;
}
.ui-tabs-nav a {
    margin: 5px 0 0; /* position: relative makes opacity fail for disabled tab in IE */
    padding-left: 0;
    background-position: 100% 0;
    text-decoration: none;
    white-space: nowrap; /* @ IE 6 */
    outline: 0; /* @ Firefox, prevent dotted border after click */    
}
.ui-tabs-nav a:link, .ui-tabs-nav a:visited {
    color: #fff;
}
.ui-tabs-nav .ui-tabs-selected a {
    position: relative;
    top: 1px;
    z-index: 2;
    margin-top: 0;
    background-position: 100% -23px;
}
.ui-tabs-nav a span {
    padding-top: 1px;
    padding-right: 0;
    height: 20px;
    background-position: 0 0;
    line-height: 20px;
}
.ui-tabs-nav .ui-tabs-selected a span {
    padding-top: 0;
    height: 27px;
    background-position: 0 -23px;
    line-height: 27px;
}
.ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited,
.ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: text;
}
.ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active,
.ui-tabs-nav .ui-tabs-unselect a:hover, .ui-tabs-nav .ui-tabs-unselect a:focus, .ui-tabs-nav .ui-tabs-unselect a:active { /* @ Opera, we need to be explicit again here now... */
    cursor: pointer;
}
.ui-tabs-disabled {
    opacity: .4;
    filter: alpha(opacity=40);
}
.ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited {
    color: #000;
}
.ui-tabs-panel {
    border: 1px solid #519e2d;
    padding: 10px;
    background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */
}
/*.ui-tabs-loading em {
    padding: 0 0 0 20px;
    background: url(loading.gif) no-repeat 0 50%;
}*/

/* Additional IE specific bug fixes... */
* html .ui-tabs-nav { /* auto clear @ IE 6 & IE 7 Quirks Mode */
    display: inline-block;
}
*:first-child+html .ui-tabs-nav  { /* auto clear @ IE 7 Standards Mode - do not group selectors, otherwise IE 6 will ignore complete rule (because of the unknown + combinator)... */
    display: inline-block;
}

zu dem gehören noch die Files:

jquery-1.2.4b.js
tabs.png
ui.tabs.js
ui.core.js
ui.tabs.html
customevent.tabs.css

die man auf der Stilbuero.de Seite findet.

Da das JQuery ja zum Core gehört, wäre es Quatsch, wenn ich die Datei nochmal irgendwo hochlade.

Wie kann ich es anstellen, das ich auf der Startseite (Front Page Modul ist auch installiert) diese Tabs zu sehen bekomme ?

Dann habe ich mir noch das Modul Views Slideshow installiert und nach einigem Probieren auch ne SlideShow zum laufen gebracht :)
Nach dieser Anleitung (finde das Node nicht wieder):

Here's what I did step-by-step after installing the module to get a slideshow of pictures as a block on the front page of a site (http://sweetwater-organic.org): 1) Installed and configured Image Module, just enabling Image and ImageMagick Advanced Options
2) Create content > Add Image, uploaded each Image one by one (you can possibly use Image Import or Attach, but these didn't play well with my theme for some reason)
3) Site building > Views > Add
4) Under Basic Information, entered a Name for the slideshow (just for reference purposes under Site building > Blocks)
5) Under Block, checked Provide Block, set View Type: to Slideshow List, set Nodes per Block to 10 (?).
6) Under Fields added the Image: Display Image field, set Option to Preview
7) Under Filters, added the Node: Type filter, set Operator to Is One Of and Value to Image, then saved the view
8) Site building > Blocks now displayed the slideshow block with the name given in step 4
9) Set the slideshow block to Content top Region
10) Configured block to Show on only the listed pages, Pages: <front>
11) Edited the /modules/views_slideshow/views_slideshow.module, adding a align='center' to the first div on line 245 to get it centering, then went to bed at 2am.

Ich würde dort gerne einige Banner und Grafiken durchlaufen lassen, allerdings sind diese in verschiedenen grössen.
Kann man das irgendwie so einstellen das er das selber auf eine bestimmte Grösse re-sized ? (Ich weiss, etwas Blöde ausgedrückt)

und als guter letztes die Frage, wie kann ich z.B. diese Slideshow als Sticky (so kenn ich das aus Foren) immer oben als erstes angezeigen lassen ?

Viele viele Fragen, leider

Ich hoffe, der eine oder andere weiss Rat und kann mir ein wenig helfen.

Ich bedanke mich schonmal im voraus

Cheers

Skull

Edit:
Ich seh gerade, dass der HTML-Code nicht komplett angezeigt wird, von daher habe ich das kleine Package mal auf RapidShare hochgeladen
http://rapidshare.com/files/116522936/CustomEventTabs.rar (ca. 40 KB)

Anmelden oder Registrieren um Kommentare zu schreiben

1. Banner/Grafiken könntest

Eingetragen von dawehner (2639)
am 22.05.2008 - 11:17 Uhr

1. Banner/Grafiken könntest du mit der Kombination Imagefield+Imagecache automatisch verkleinern und diese dann mit Slideshow ausgeben. Um diese "Sticky" anzeigen zu lassen, ist es am Besten, wenn du die Views als Block generierst und dann in admin/build/blocks den Block z.B. in den Header verschiebst

2. Für die Tabs kannst du das Module Tabs aus dem Packet http://drupal.org/project/jstools benutzen . Um Inhalt als Tab auszugeben braucht man jedoch Code wie http://www.drupalcenter.de/handbuch/5141
--------------
Blog www.freeblogger.org: Deutscher IRC-Channel: irc.freenode.net #drupal.de ... Jabber-me: dwehner@im.calug.deXING

Anmelden oder Registrieren um Kommentare zu schreiben

wla	9445
stBorchert	6003
quiptime	4972
Tobias Bähr	4019
bv	3924
ronald	3853
md	3717
Thoor	3678
Alexander Langer	3416
Exterior	2903

Fragen zu : Jquery Tabs ... Views Slideshow und Sticky´s

1. Banner/Grafiken könntest

Benutzeranmeldung

Aktive Forenthemen

Neue Kommentare

Statistik

Hauptmenü

Quicklinks I

Quicklinks II

Quicklinks III

RSS & Twitter