You can click the following link to enhance the reading of this article: Reading Blinds.

Continuing where we left off…

Once again, here is our final result.

Home Page

In review of part 1, here is what we’ve completed already:

1. Built the basic html pages on our web  server with the Stiqr script
2. Registered the service with our domain so we can drop the script into any page and call it up
3. Sliced out Photoshop design and saved the appropriate images
4. Logged in for the first time and uploaded our images to the Stiqr cloud
5. Set our site background image, color and positioning
6. “Stuck” our sponsor logo and social sharing images with links

Moving on with Part 2 comes the more advanced stuff…

Step 4. – Formatting and uploading the images for the jQuery Slideshow (Novice 5 min)

Ok, so when I created my slideshow border that we uploaded I had already figured out the size I wanted for my slideshow images.  I wanted a wide-screen format but just a tad small than usual so I have more room to add content around it.

I chose 800X350 don’t ask me why but it looked good when cropping from my photos!  I also want this to load fairly quickly so the file size will be fairly small (approx 40-60k per image)

Rider Image

Finish preparing all the “slide” images, go back to your site, log into Stiqr and upload the images to your My Images.  Alternatively, you can host the photos anywhere but you’ll need the full URL of each one for our slideshow application. I’ll admit, finding the full URL for uploaded Stiqr images is not very easy yet.  One quick way without too much effort is to use the background option in the admin panel, browse for the image as if you’re going to make it your site’s background and copy the URL it presents after clicking ok.  Don’t actually apply the background, we’ve already completed that task in Part 1.  Just select and copy the entire URL to your clipboard. Open a text editor like notepad and paste the URL, we will use this “list” for our slideshow input later.  Do this for each image you uploaded. If your images are hosted elsewhere, then skip all this stuff and just know the full URL of each image.

background admin

Now let’s do the same thing for our “previous” and “next” images we uploaded.  We need those full URL’s as well.  Paste them somewhere, remember them, write them down, whatever, we need the following info before proceeding to the actual application step.

1. Full URL of each slideshow image
2. Full URL of each navigation image
3. Dimensions or our images (in this case 800×350)
4. Per image/photo caption/info/html we may want to also display with each image slide

Step 5. – Adding our jFlow Content Slider Application (Novice 5 min)

Now, from the Stiqr admin, choose apps and then choose Free Apps and then choose jFlow – Content Slider

jFlow content slider

Some default stuff will be pulled up that we will need to change of course.  First, let’s replace/add all our image URL’s one by one making sure to enclose each with an opening and closing divs.  Next, let’s specify the size our our slideshow.  You can change the speed of the transition if you like.  Lastly, input the full URL of each of the custom “previous” and “next” button images.  Click Save.

Initially when I built mine, I did not see the slideshow images until I saved and refreshed my page.  I then logged back in and dragged it to the appropriate position.  My navigation buttons were not placed exactly where I wanted them so I positioned them using the CSS tab from the right-click edit menu.

Navigation Button Positioning with CSS

Above is the CSS styling I used to position the buttons where I wanted them.  You will just have to play with this until you are satisfied.

We are now complete with our slideshow application.  Currently there is no way to update the code and add or remove images so if you want to change the slider you’ll have to recreate it from scratch.  I am confident this is only a limitation of the beta.

jFlow Slider Complete

Step 6. Adding jQuery Hover Effects to our Sponsor Links

Let’s add some flash to our links.  Stiqr allows you to add custom jQuery to any element.  We’re going to add a fade-in fade-out effect when the cursor passes over the linked images.  We do this by accessing the right-click menu from each sponsor logo image.

Navigate to the JS tab and click the example code on-hover under events.

JS Hover

This will give us our base code.  Now we need to tell it what to do when the hover event is triggered.

jQuery(‘#stiqr-id-48418′).hover(function(){

jQuery(this).fadeOut(100);jQuery(this).fadeIn(500);

});

Click save and do this for each image you want to add the hover effect, keeping in mind of course to make sure the stiqr-id is correct.

Don’t forget to click save on the main admin bar too.

Step 7. – Adding CSS Style Hover event to Social Icon images  (Novice 15 min)

CSS Hover Background Image

We are going to do a similar type effect but rather than use JS and fade the image, we will use CSS to change the positioning and call a background image as an indication of the impending link.

Back in Photoshop I created a 20X20 orange filled elipse and saved it as a PNG24 image to preserve transparency.  For the sake of another way of calling images into our design, instead of uploading to Stiqr, I uploaded the image to my web host noting where it was located from the site root (http://mywebsite.com/).

Next, after some playing around I realized that a Stiqr image element will not display a hover event that calls a background image.  I did find a work around however…

Since my social icon images are uploaded to Stiqr in My Images, I can get their full URL by using the right-click edit menu, under the Path field on the General tab.  I copy this link and then use the html option from the Stiqr admin panel and paste the following code.

<a href=”http://twitter.com/motomontage” rel=”" target=”_self”>

<img width=”32px” height=”32px” border=”0″ src=”http://load.stiqr.com/public/marketplace/698/stickers/twitter.png”>

</a>

This includes the link and the actual image URL.  So now we click the “Stick It” button.

The element is a bit different.  Let’s see what the HTML tab from the right-click edit menu looks like.

Social HTML Code

I’ll use the right-click edit menu on the original social icon image to get the positioning details from the Display tab and then delete the element altogether.  Since I now have a newer html version, I’ll access the right-click edit menu on that element and use the positioning data from the previous element I deleted.  If I were to save and refresh the page it would be completely transparent and look the same as before.  However, I can now add the CSS background styling I desire via the hover pseudo class.

Accessing the right-click menu again we go straight to the CSS tab and add the following code.

#stiqr-id-48813:hover {

Let’s save our work.

Stay tuned for Part 3 where we will be adding our  background switcher and create our additional page.  We will also specify which elements will be visibale on all pages that match a specific criteria.

If you enjoyed this post, make sure you subscribe to my RSS feed! You can also subscribe by Email and have new posts sent directly to your inbox. When you feel bored, follow me on Twitter.