soophie's posterous

equalWidths jQuery Plugin by Andy Ford

Hier findest Du die Tastenkombinationen aller Sonderzeichen, die über die deutsche Tastatur erreichbar sind. Ich habe die Zeichen in sinnvolle Gruppen gegliedert und die gebräuchlichsten an den Anfang gestellt.
Zur Eingabe vieler Sonderzeichen auf Windows ist die umständliche Eingabe eines Codes nötig (z.B. Gedankenstrich = alt 0150). Dazu mußt Du die alt-Taste gedrückt halten und den Code über den Ziffernblock der Tastatur eingeben. Eine detaillierte Anleitung findest Du im Workshop Sonderzeichen einfügen.

Klicke auf eine Überschrift, um die zugehörige Gruppe aufzuklappen!

Anführungszeichen

Zeichen	Name	Windows-Kürzel	Mac-Kürzel
„	Deutsch öffnend	alt 0132	alt ^
“	Deutsch schließend / Englisch öffnend	alt 0147	alt 2
‚	Deutsch einfach öffnend	alt 0130	alt s
‘	Deutsch einfach schließend / Englisch einfach öffnend	alt 0145	alt #
»	Deutsch öffnend (elegant)	alt 0187	shift alt q
«	Deutsch schließend (elegant)	alt 0171	alt q
›	Deutsch einfach öffnend (elegant)	alt 0155	shift alt n
‹	Deutsch einfach schließend (elegant)	alt 0139	shift alt b
”	Englisch schließend	alt 0148	shift alt 2
’	Apostroph / Englisch einfach schließend	alt 0146	shift alt #

Interpunktion (Satzzeichen)

Zeichen	Name	Windows-Kürzel	Mac-Kürzel
-	Bindestrich	-	-
–	Gedankenstrich	alt 0150	alt -
—	Geviertstrich	alt 0151	shift alt -
…	Auslassungspunkte (»Ellipse«)	alt 0133	alt .
’	Apostroph	alt 0146	shift alt #
·	Zentrierter Punkt	alt 0183	shift alt 9
•	Fetter zentrierter Punkt	alt 0149	alt ü
¡	Spanisches öffnendes Ausrufezeichen	alt 0161	alt 1
!	Ausrufezeichen	shift 1	shift 1
¿	Spanisches öffnendes Fragezeichen	alt 0191	alt ß
?	Fragezeichen	shift ß	shift ß
(	Öffnende runde Klammer	shift 8	shift 8
)	Schließende runde Klammer	shift 9	shift 9
[	Öffnende eckige Klammer	alt gr 8	alt 5
]	Schließende eckige Klammer	alt gr 9	alt 6
{	Öffnende geschweifte Klammer	alt gr 7	alt 8
}	Schließende geschweifte Klammer	alt gr 0	alt 9
/	Schrägstrich	shift 7	shift 7
\	Umgekehrter Schrägstrich (»Backslash«)	alt gr 8	shift alt 7
|	Senkrechter Strich	alt gr	alt 7

Währungszeichen

Zeichen	Name	Windows-Kürzel	Mac-Kürzel
€	Euro	alt gr e	alt e
$	Dollar	shift 4	shift 4
¥	Yen	alt 0165	alt y
£	Pfund	alt 0163	shift alt 4
¢	Cent	alt 0162	alt 4
ƒ	Florin	alt 0131	alt f
¤	Platzhalter für Währungszeichen	alt 0164	—

Sonstige Sonderzeichen

Zeichen	Name	Windows-Kürzel	Mac-Kürzel
@	at-Zeichen (»Klammeraffe«)	alt gr q	alt l
&	Et-Zeichen (»Kaufmanns-Und«)	shift 6	shift 6
fi	fi-Ligatur	—	shift alt 5
fl	fl-Ligatur	—	shift alt l
§	Paragraphzeichen	shift 3	shift 3
%	Prozentzeichen	shift 5	shift 5
‰	Promillezeichen	alt 0137	shift alt e
¶	Absatzzeichen (»Alinea«)	alt 0182	alt 3
™	Trademark	alt 0153	shift alt d
©	Copyright	alt 0169	alt g
®	Registered	alt 0174	alt r
*	Sternchen (»Asterisk«)	shift	shift
†	Kreuz	alt 0134	alt t
‡	Lothringer Kreuz	alt 0135	shift alt y
°	Gradzeichen	shift ^	shift ^
'	(Fuß, Minuten)	shift #	shift #
"	(Zoll, Sekunden)	shift 2	shift 2
ª	Ordinalzeichen (feminin)	alt 0170	alt h
º	Ordinalzeichen (maskulin)	alt 0186	alt j

Diakritische Zeichen (»Akzentbuchstaben«)

Andere als die hier gezeigten Akzentbuchstaben sind über die deutsche Tastatur leider nicht erreichbar. Mit TypeIt lassen sich online auch andere Sprachen bequem tippen; Alle anderen Zeichen kannst Du wie im Workshop Sonderzeichen einfügen beschrieben erreichen.
Außerdem gibte es im Artikel »Schöner Twittern« die wichtigsten lateinischen Akzentbuchstaben zum Kopieren und Einfügen.

Zeichen	Name	Windows-Kürzel	Mac-Kürzel
À	A mit Gravis	alt 0192	shift ´ shift A
à	a mit Gravis	alt 0224	shift ´ a
Á	A mit Akut	alt 0193	´ shift a
á	a mit Akut	alt 0225	´ a
Â	A mit Zirkumflex	alt 0194	^ shift a
â	a mit Zirkumflex	alt 0226	^ a
Ã	A mit Tilde	alt 0195	alt n shift a
ã	a mit Tilde	alt 0227	alt n a
Ä	A mit Trema	shift ä	shift ä
ä	a mit Trema	ä	ä
Å	A mit Ring	alt 0197	shift alt a
å	a mit Ring	alt 0229	alt a
Æ	AE-Ligatur	alt 0198	shift alt ä
æ	ae-Ligatur	alt 0230	alt ä
Ç	C mit Zedille	alt 0199	shift alt c
ç	c mit Zedille	alt 0231	alt c
È	E mit Gravis	alt 0200	shift ´ shift e
è	e mit Gravis	alt 0232	shift ´ e
É	E mit Akut	alt 0201	´ shift e
é	e mit Akut	alt 0233	´ e
Ê	E mit Zirkumflex	alt 0202	^ shift e
ê	e mit Zirkumflex	alt 0234	^ e
Ë	E mit Trema	alt 0203	alt u shift e
ë	e mit Trema	alt 0235	alt u e
Ì	I mit Gravis	alt 0204	shift alt g
ì	i mit Gravis	alt 0236	shift ´ i
Í	i mit Akut	alt 0205	shift alt s
í	i mit Akut	alt 0237	´ i
Î	I mit Zirkumflex	alt 0206	^ shift i
î	i mit Zirkumflex	alt 0238	^ i
Ï	I mit Trema	alt 0207	shift alt f
ï	i mit Trema	alt 0239	alt u i
ı	i ohne Punkt	—	shift alt j
Ñ	N mit Tilde	alt 0209	alt n shift n
ñ	n mit tilde	alt 0241	alt n n
Ò	O mit Gravis	alt 0210	shift ´ shift o
ò	o mit Gravis	alt 0242	shift ´ o
Ó	O mit Akut	alt 0211	shift alt h
ó	o mit Akut	alt 0243	´ o
Ô	O mit Zirkumflex	alt 0212	^ shift o
ô	o mit Zirkumflex	alt 0244	^ o
Õ	O mit Tilde	alt 0213	alt n shift o
õ	o mit Tilde	alt 0245	alt n o
Ö	O mit Trema	shift ö	shift ö
ö	o mit Trema	ö	ö
Ø	O mit Schrägstrich	alt 0216	shift alt o
ø	o mit Schrägstrich	alt 0248	alt o
Œ	OE-Ligatur	alt 0140	shift alt ö
œ	oe-Ligatur	alt 0156	alt ö
Š	S mit Hatschek	alt 0138	–
š	s mit Hatschek	alt 0154	–
ß	Scharfes s	ß	ß
Ù	U mit Gravis	alt 0217	shift alt x
ù	u mit Gravis	alt 0249	shift ´ u
Ú	U mit Akut	alt 0218	´ shift u
ú	u mit Akut	alt 0250	´ u
Û	U mit Zirkumflex	alt 0219	shift alt i
û	u mit Zirkumflex	alt 0251	^ u
Ü	U mit Trema	shift ü	shift ü
ü	u mit Trema	ü	ü
Ý	Y mit Akut	alt 0221	–
ý	y mit Akut	alt 0253	–
Ÿ	Y mit Trema	alt 0159	alt u shift y
ÿ	y mit Trema	alt 0255	alt u y
Ž	Z mit Hatschek	alt 0142	–
ž	z mit Hatschek	alt 0158	–
Ð	Eth (Isländisch)	alt 0208	–
ð	eth (Isländisch)	alt 0240	–
Þ	Thorn (Isländisch)	alt 0222	–
þ	thorn (Isländisch)	alt 0254	–
`	Gravis (Grave)	shift ´	shift ´
´	Akut	´	´
ˆ	Zirkumflex (≠ ^, siehe mathematische Zeichen)	alt 0192	shift alt k
˜	Tilde (≠ ~, siehe mathematische Zeichen)	alt 0192	shift alt 8
¨	Trema (Dieresis, Diärese, Umlaut)	alt 0192	alt u
˚	Ring-Akzent (≠ Gradzeichen °)	alt 0000	shift alt ´
ˇ	Hatschek (Caron, Häkchen)	alt 0192	shift alt z
˝	Doppelakut (Hungarumlaut)	alt 0192	shift alt t
˙	Punkt-Akzent	alt 0192	shift alt ß
¯	Makron	alt 0192	shift alt 0
˘	Breve	alt 0192	shift alt m
¸	Zedille (Cedilla)	alt 0192	shift alt r
˛	Ogonek	alt 0192	shift alt ,

Mathematische Zeichen etc.

Zeichen	Name	Windows-Kürzel	Mac-Kürzel
	Plus
×	Malzeichen	alt 0215	—
÷	Geteiltzeichen	alt 0247	shift alt .
=	Gleichheitszeichen	shift 0	shift 0
≈	Fast gleich	—	alt x
≠	Ungleich	—	alt 0
	Kleiner als
>	Größer als	shift	shift
≤	Kleiner gleich	—	alt
≥	Größer gleich	—	shift alt
±	Plusminus	alt 0177	alt
¦	Unterbrochener senkrechter Strich	alt 0166	—
^	Ascii-Zirkumflex	alt 94	shift alt 6
~	Ascii-Tilde	alt gr	alt n
¬	Logisches Nicht	alt 0172	shift alt 1
µ	Mikrozeichen (mu)	alt gr m	alt m
Ω	Ohmzeichen (Omega)	—	alt z
∆	Differenz/Größenzuwachs (Delta)	—	alt k
π	pi	—	alt p
∂	Partielles Differential	—	alt d
∏	Produkt	—	shift alt p
∑	Summe	—	alt w
√	Wurzel	—	alt v
∞	Unendlich	—	alt ,
∫	Integral	—	shift alt b
◊	Raute	—	shift alt v
⁄	Bruchstrich	—	alt i
¹	Hochgestellte 1	alt 0185	—
²	Hochgestellte 2	alt gr 2	—
³	Hochgestellte 3	alt gr 3	—
¼	Ein Viertel	alt 0188	—
½	Einhalb	alt 0189	—
¾	Drei Viertel	alt 0190	—

Tip: Du kannst die Zeichen aus den Tabellen auch einfach kopieren und in Deinen Text einfügen! (Das funktioniert auch mit Zeichen, die nicht per Tastatur erreichbar, aber im Font enthalten sind, z.B. Ω auf Windows.)

Bücher zum Thema

Friedrich Forssman & Ralf de Jong
Detailtypografie
S. 373 ff.

Handlich		Gewichtig
Fokussiert		Umfassend

FontShop/Fünfwerken/Römerturm
apfel i – Die rechte Maustaste

Handlich		Gewichtig
Fokussiert		Umfassend

Ralf Herrmann
Zeichen setzen

Handlich		Gewichtig
Fokussiert		Umfassend

Webseiten zum Thema

Wikipedia: Sonderzeichen

Wikipedia: Diakritisches Zeichen

Fontblog: handlicher Typo-Spickzettel

Fontblog: Mousepads als Spickzettel

E-Workers: Alles über Unicode

praegnanz.de – Ein (Sonder-)Zeichen setzen

Decode Unicode

Typowiki: Sonderzeichen eingeben

Copy Paste Character

U&lc: InDesign Shortcuts

U&lc: Glyph Palettes

Sonderzeichen und ihre Namen

HTML 4.0 Entities und References

TypeIt – Online Fremdsprachen eingeben

Meta

Permalink

Erstellt: 07.03.2009
Aktualisiert: 29.03.2010

Social Bookmark Script Version 2.5 - http://www.social-bookmark-script.de/ - Copyright (C) 2006-2009 by Alexander Hadj Hassine - All rights reserved
-->
Bookmarken:

Galleriffic

A jQuery plugin for rendering rich, fast-performing photo galleries

Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth. I am not so great at spelling, and it was much later that I realized that the more appropriate spellings would be Gallerific or Gallerrific, but is too late now for a name change, so Galleriffic remains.

Features

• Smart image preloading after the page is loaded
• Thumbnail navigation (with pagination)
• jQuery.history plugin integration to support bookmark-friendly URLs per-image
• Slideshow (with optional auto-updating url bookmarks)
• Keyboard navigation
• Events that allow for adding your own custom transition effects
• API for controlling the gallery with custom controls
• Support for image captions
• Flexible configuration
• Graceful degradation when javascript is not available
• Support for multiple galleries per page

Examples

• Minimal implementation
• Thumbnail rollover effects and slideshow crossfades
• Integration with history plugin
• Insert and remove images after initialization
• Alternate layout using custom previous/next page controls

Usage

1. Download the latest version of Galleriffic below and jQuery 1.3.2 or later (use other versions of jQuery at your own risk)
2. Setup the script references in the header:

   head>    ...    script type="text/javascript" src="js/jquery-1.3.2.js">/script>    script type="text/javascript" src="js/jquery.galleriffic.js">/script>     Optionally include jquery.history.js for history support -->    script type="text/javascript" src="js/jquery.history.js">/script>    script type="text/javascript" src="js/jquery.opacityrollover.js">/script>    .../head>                       

3. Add container elements to your page. All container elements are optional, so you may choose to not include an area (such as the loading or caption container elements). Here is an example of all the elements needed for a full-featured setup:

   div id="controls">/div>div id="loading">/div>div id="slideshow">/div>div id="caption">/div>div id="thumbs">    ... graceful degrading list of thumbnails (specific format specified below) .../div>                       

4. Within the thumbnails container element, build your graceful degrading unordered list of thumbnails linking to the image slides as such:

   div id="thumbs">    ul class="thumbs noscript">        li>            a class="thumb" name="optionalCustomIdentifier" href="path/to/slide" title="your image title">                img src="path/to/thumbnail" alt="your image title again for graceful degradation" />            /a>            div class="caption">                (Any html can go here)            /div>        /li>        ... (repeat for every image in the gallery)    /ul>/div>                       

   It is important to specify the 'thumb' class for the link that should serve as the thumbnail and the 'caption' class for the element that should serve as the caption. When an image is selected for display in the slideshow, any elements with the 'caption' class will be rendered within the specified caption container element above.
5. Initialize the gallery by calling the galleriffic initialization function on the thumbnails container, passing in optional settings. The following example shows the default options:

   jQuery(document).ready(function($) {    var gallery = $('#thumbs').galleriffic({        delay:                     3000, // in milliseconds        numThumbs:                 20, // The number of thumbnails to show page        preloadAhead:              40, // Set to -1 to preload all images        enableTopPager:            false,        enableBottomPager:         true,        maxPagesToShow:            7,  // The maximum number of pages to display in either the top or bottom pager        imageContainerSel:         '', // The CSS selector for the element within which the main slideshow image should be rendered        controlsContainerSel:      '', // The CSS selector for the element within which the slideshow controls should be rendered        captionContainerSel:       '', // The CSS selector for the element within which the captions should be rendered        loadingContainerSel:       '', // The CSS selector for the element within which should be shown when an image is loading        renderSSControls:          true, // Specifies whether the slideshow's Play and Pause links should be rendered        renderNavControls:         true, // Specifies whether the slideshow's Next and Previous links should be rendered        playLinkText:              'Play',        pauseLinkText:             'Pause',        prevLinkText:              'Previous',        nextLinkText:              'Next',        nextPageLinkText:          'Next ›',        prevPageLinkText:          '‹ Prev',        enableHistory:             false, // Specifies whether the url's hash and the browser's history cache should update when the current slideshow image changes        enableKeyboardNavigation:  true, // Specifies whether keyboard navigation is enabled        autoStart:                 false, // Specifies whether the slideshow should be playing or paused when the page first loads        syncTransitions:           false, // Specifies whether the out and in transitions occur simultaneously or distinctly        defaultTransitionDuration: 1000, // If using the default transitions, specifies the duration of the transitions        onSlideChange:             undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { ... }        onTransitionOut:           undefined, // accepts a delegate like such: function(slide, caption, isSync, callback) { ... }        onTransitionIn:            undefined, // accepts a delegate like such: function(slide, caption, isSync) { ... }        onPageTransitionOut:       undefined, // accepts a delegate like such: function(callback) { ... }        onPageTransitionIn:        undefined, // accepts a delegate like such: function() { ... }        onImageAdded:              undefined, // accepts a delegate like such: function(imageData, $li) { ... }        onImageRemoved:            undefined  // accepts a delegate like such: function(imageData, $li) { ... }    });});                       

FAQ

Will Galleriffic generate the slide and thumbnail images automatically?

I have been asked a lot if Galleriffic automatically generates the thumbnails and slides. Galleriffic by itself does not do any image processiong or generation; however, there is a great tool that does: jAlbum. I have created a jAlbum skin that I use myself for creating my personal galleries. After installing jAlbum and the Galleriffic jAlbum skin, simply choose your source image directory and an output directory, click "Make Album", and wallah, you now have a complete html gallery with 3 different size versions of each image.

How can I change the number of thumbnail columns?

With the stylesheet used in these examples, each thumbnail is floated left, and thus as many thumbnails that will fit in the width of the column will be displayed. If you want fewer or more columns, make the width of the navigation panel smaller or larger. In all but the last example, I am setting the width using javascript with the following lines in the html page:

   $('div.navigation').css({'width' : '300px', 'float' : 'left'});    $('div.content').css('display', 'block');

Download

Download latest (release 2.0):

• Examples: galleriffic-2.0.zip ( ~135 kb )
• Script only: jquery.galleriffic.js ( ~32 kb )

Extras

I put together a jAlbum skin to make building static albums a breeze. Check it out here.

Source Code

The SVN repo is located at Google Code

Feedback

For general feedback, please leave a comment here.

If you feel you have encountered a legitimate issue or have a valuable enhancement request, you are welcome to add it to the issues list which I am working off of for future releases.

I'd also like to keep a list of sites making use of Galleriffic, so if this is you, please email me (trent [at] twospy.com) your Web site's URL and indicate whether or not I may list it publicly.

Donate

If you find Galleriffic useful and would sleep better knowing you gave something back, feel free to make a donation!

saved my weekend!

chr chr

geil!

Following enthusiastic demand for T-shirts, first I followed the path of least resistance and opened a CafePress-powered store. Other possibilities and deals were mooted, but nothing ever materialized. I've finally arrived at Spreadshirt, which allows me to offer shirts at lower prices and with a much wider variety of designs than before. I saw the new shirts set beside the old shirts, and there is no comparison: the new, Spreadshirt-printed shirts are full of WIN.

The Store now features new designs, bolder, brighter printing, lower prices on black shirts, many more women's (and juniors') products, glow-in-the-dark designs, budget t-shirts, and color customization.

der kleine spaß zum wochenende
KTHXBAI