Grid View or List View?

Freebie Juli 2012

freebieson Juli 9th, 2012Keine Kommentare

Das monatliche Freebie ist dieses mal eine Template Switcher, der zwischen Grid und List umschaltet. Zudem wurde noch ein Java Script verwendet, was die UL, LI Liste nach Kategorien sortiert. Hierfür wurde dem LI eine class gegeben. Verwendet wurden beim Demo vier Java Scripte. Eines für den Hover oder besser Tooltip der Bilder. Eines für die Controls, also Wechsel zwischen Grid und List und eines für das Framework der Kategorien. Als Basis und damit es überhaupt läuft ist natürlich JQuery 1.2.6 dabei.

Dieses Freebie entstand bei der Arbeit zu www.websitebaker-templates.com , die Showcase Seite für die Free-Templates und Premium-Templates für das Website Baker Content Management System, was derzeit immer noch in Arbeit ist.

Ein LI in der Liste

<li class="creative"><!-- start list - hier beginnt die Liste des Templates, Vorschau, Hover, Meta und Preis -->
					<div class="templates">
					<a  href="#link_to_item"><!-- Fade Overlay --></a>
					<div class="products">
			
		<div class="left">
                    <a href="images/products/indoores-hover.jpg" class="preview" title=""><img src="images/products/indoores-thumb.jpg" alt="Website Baker Template indoores" class="thumb"/></a>
					<h3>indoores</h3>
					<span class="meta"><strong>Product ID:</strong> Free Template</span>
                    <span class="meta"><strong>Lizenz:</strong> Creative Commons Namensnennung 3.0 Unported</span>
                    <span class="meta"><strong>Designer:</strong> Combosa</span>
				</div><!-- end left -->
				
				<div class="right">
					<span class="price">&euro; 00,00</span>
					
					<a href="http://shop.combosa.com/templatedemos/Indoores-html/index.html" class="firstbtn"><img src="images/read-more-btn.png" alt="Read More..."/></a>
					<a href="http://shop.combosa.com/Free-Templates/Indoores::8.html"><img src="images/add-to-cart-btn.png" alt="Add to Cart"/></a>
					
				</div><!-- end right -->
                </div><!-- end products -->
                </div><!-- end templates -->
			</li><!-- end list - hier endet die Liste des Templates, Vorschau, Hover, Meta und Preis -->

Free for personal and commercial use. If you have any questions, feel free to email us at contact@combosa.com

Sie dürfen:
  • Das Werk bzw. den Inhalt vervielfältigen, verbreiten und öffentlich zugänglich machen
  • Abwandlungen und Bearbeitungen des Werkes bzw. Inhaltes anfertigen
  • Das Werk kommerziell nutzen, aber nicht als eigenständiges Produkt weiterverkaufen.

 

 

Demo

Download

 

  • StumbleUpon
  • Digg
  • Delicious
  • Technorati
  • Yahoo! Bookmarks
  • Twitter
  • MySpace
  • Google Bookmarks
  • Facebook
  • E-Mail
Keine Antwort zu “Freebie Juli 2012”

Schreiben Sie einen Kommentar