Matthijs van Roon, navigation update (fancybox + jcarousel = inline)

05-08-2009 14:15:50 1020concepts

For a new client of my, Matthijs van Roon, an Amsterdam based commercial photographer, I did an update on his website navigation. Before he loaded the every image on a new page. He wanted them to load without a page refresh.

The new navigation is a combination of Fancybox and jCarousel. The photos are loaded inside the page without a refresh, no AJAX as fancybox use image preloader and doesn't use a http request. Normaly fancybox uses an overlay to present the the photo's. I changed the javascript so I could append the photo's to an element inside the website. Cleared all the extra markup for title's, overlay and shadows.

At the bottom of every portfolio page there was a carousel with all the images presented in a category. This should move when a new image is loaded. I used jCarousel and implented it inside the code of fancybox. Now I can connect a group of images to an list and mark the list to be a carousel. On selecting a image in the list, the image loads and the carsousel moves the image to the front of the carousel.

Download the full code: Fancy-carousel.0.1.zip
View a live demo: Demo

Implementation

<link rel="stylesheet" type="text/css" href="css/fancybox.css" media="screen"  />

//Make sure you set the width of the ul list with images for the carousel.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src="js/fancybox-carrousel.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $.fn.fancybox.build('#elementID');
  $('a.fancybox').fancybox({
    padding: 0, //see fancybox documentation
    container: '#elementID', // append fancybox to element
    carousel: true, // create a carrousel
    carouselElement: '.carouselClass', // class of the div with list (ul) with all images
    carouselVisible: 6, // items to show in carousel
    carouselScroll:	1, // scroll carrousel 
  });
  $("li.first a").trigger("click"); // load fancybox on page load
});
</script>
<div id="elementID"> (here loads the image) </div>
<div class="carousel">
  <ul>
    <li class="first">
      <a rel="group" href="01.jpg" class="fancybox" title="group - 01.jpg">
        <img src="thumbs/01.jpg" class="thumbimg" alt="01.jpg" width="115" height="51"/>
      </a>
    </li>
    <li class="">
      <a rel="group" href="02.jpg" class="fancybox" title="group - 02.jpg">
        <img src="thumbs/02.jpg" class="thumbimg" alt="02.jpg" width="115" height="51"/>
      </a>
    </li>
    <li class="">
      <a rel="group" href="03.jpg" class="fancybox" title="group - 03.jpg">
        <img src="thumbs/03.jpg" class="thumbimg" alt="03.jpg" width="115" height="51"/>
      </a>
    </li>
  </ul>
</div>

reacties (0) permanente link

URL specifications for mobile websites

12-01-2009 16:13:48 Minor, 1020concepts, Artikelen, Afstudeerstage

Mobile websites are getting more and more interesting. I'm trying to create a clear view for me and my clients on how to approach this upcoming market. So while surfing the web on my desktop and creating small mobile websites I was wondering what would be the best way to direct a user to your mobile website. A subdomain or a extra extension, like .mobi. Automatic redirection, a link to your mobile website. No redirections or anything at all, only different stylesheets depending on screen-size or user-agent.

There are a few options if you optimize your website for mobile devices when it comes to url specifications.

1. a domain specific site. sitename.mobi This is a common solution if you are mainly focused on mobile users. But should you visit it on a desktop, should it be desktop optimized?
2. a subdomain mobi.sitename.com, there a many variations on the subdomain, the most common is m. others i've seen are mmm. mobile. mob.
3. a request url such as sitename.com/m/ and again with very different requests as m / mobile / mob etc.
4. a plain domain sitename.com, most of the time you will find these load different stylesheets.
5. all of the above, never missing anyone.

For all five, and there are probably more, there are pro's and con's. I was wondering if there is a w3c standard for domain specifications if you are creating a mobile version of your website. There is nothing i could find that is directed towards mobile specifications. Only the following 2 comments:

1. [URIS] Keep the URIs of site entry points short.
   
   "5.2.1.1 What it means: Typing URIs on mobile devices can be difficult, and it is expected that users will prefer to use alternative methods of obtaining URIs when available - such as following a hyperlink (from an e-mail, SMS or other Web page), WAP Push, 2D bar code, color bar code, RFID tag and Bluetooth. However, typing a URI may in some cases be the only option available. By keeping site entry point URIs short it is possible to reduce the chance of error and provide a more satisfactory user experience."
   [URIS - http://www.w3.org/TR/mobile-bp/#URIS]
2. a quote saying that domain URI's shouldn't have aliases if they are presenting the same resources.
   
   "A URI owner SHOULD NOT associate arbitrarily different URIs with the same resource." -from Architecture of the Word Wide Web, Volume One [ WEBARCH - http://www.w3.org/TR/2004/REC-webarch-20041215/#uri-aliases]

To be continued

reacties (0) permanente link

Schut-av.nl

29-01-2008 00:58:37 1020concepts, Persoonlijk

Bezig met het ontwerpen van de nieuwe website voor Schut-av.nl. De oude website heb ik een jaar of 4 geleden ontworpen. Er moet nog heel wat gebeuren, maar hier alvast een voorproefje.

reacties (0) permanente link

Petervandijk.net

29-01-2008 00:55:58 1020concepts, Persoonlijk

Een goede vriend van mij is al enige tijd bezig met zijn studie fotografie in Rotterdam en heeft daarbij al een aardig portfolio opgebouwd. Enige tijd geleden vroeg hij mij of ik misschien tijd had om zijn website en misschien een huisstijl te ontwikkelen voor hem. De website heb ik even een avondje op gezeten, de huisstijl komt later.

reacties (0) permanente link

Solid Corrosion Protection Europe, Nieuw design

17-12-2007 01:26:52 1020concepts

Mijn vader is al een tijdje bezig met het opzetten van een nieuw bedrijf. Dit gaat de goede kant op en na dat ik in de begin fase een simpele website met cms had ontworpen, wordt het nu tijd dat er is een ander ontwerp en een verbeterd cms aan de site kan worden gekoppeld. Vandaag heb ik een begin gemaakt aan een nieuw ontwerp. Hierbij rekening houdend met de belangrijkste element, de producten die ze verkopen en de adviezen die ze geven.

reacties (0) permanente link

Schut-av

04-11-2007 18:15:35 1020concepts

Afgelopen maandag bespreking gehad met Tim over de schut-av.nl website. Deze heeft 1020concepts een 2/3 jaar geleden ontworpen en ontwikkeld. Het is tijd voor verandering. Dan niet zo zeer de structuur als wel de vormgeving. 1020concepts gaat een nieuwe vormgeving ontwikkelen en het nieuwe 1020cms zal worden toegepast. Hiermee zal het bijhouden van de website wat gemakkelijker verlopen. Meerdere afbeeldingen tegelijk uploaden.

reacties (1) permanente link

Advance-events

21-09-2007 11:54:24 1020concepts

Advance-events is een evenementen organisatie die sinds een goed jaar bezig is. Samen met Focus is er website + cms gerealiseerd door 1020concepts. Lees meer »

reacties (0) permanente link