My Blog

My Writings, Sharing my Knowledge, News

Posts Tagged ‘jQuery’

Integrating Cloud Zoom with WP e-Commerce Gold Cart Gallery

Friday, April 22nd, 2011

Update 30th April, 2011: The WP e-Commerce Gold Cart Plugin got updated to a new version (v2.9.1). They did some changes in the gallery display method. Hence, I had to modify the code I posted earlier, so that it can work with the updated version of the Gold Cart Gallery.:

The Project

This project of mine required a gallery in the single product page and also the Cloud Zoom plugin enabled such that the users can have a zoomed view of the product's main image just by hovering over the image. The Gold Cart plugin for WP e-Commerce enabled the Gallery option but it provides the thickbox feature as the default option for previewing images.

The Problem

Even though the gallery was displaying the thumbnails perfectly well but there was some problem with it because after clicking on the thumbnail of the images in the gallery, the main product image was not being replaced. The Cloud Zoom plugin was activated on the main image of the product and without the option of the image being replaced by the images in the gallery, the whole point of implementing the gallery was pointless.

The Solution

So after doing a bit of research and finding no solution to replace the main image with the image being clicked in the gallery, I was forced to find another solution to the problem. Cloud Zoom is an awesome plugin and luckily it provides an option of implementing a gallery too, by just adding some classes and a complex rel attribute for the hyprlink tags of the images. This can be done in the following manner:

<html>
<head>

<!-- Load the Cloud Zoom CSS file -->
<link href="/styles/cloud-zoom.css" rel="stylesheet" type="text/css" />

<!-- You can load the jQuery library from the Google Content Network.
Probably better than from your own server. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<!-- Load the Cloud Zoom JavaScript file -->
<script type="text/JavaScript" src="/js/cloud-zoom.1.0.2.min.js"></script>

</head>
    <body>

        <!--
        An anchor with class of 'cloud-zoom' should surround the small image.
        The anchor's href should point to the big zoom image.
        Any options can be specified in the rel attribute of the anchor.
        Options should be specified in regular JavaScript object format,
        but without the braces.
        -->

        <a href='/images/zoomengine/bigimage00.jpg' class = 'cloud-zoom' id='zoom1'
            rel="adjustX: 10, adjustY:-4">
            <img src="/images/zoomengine/smallimage.jpg" alt='' title="Optional title display" />
        </a>

        <!--
        You can optionally create a gallery by creating anchors with a class of 'cloud-zoom-gallery'.
        The anchor's href should point to the big zoom image.
        In the rel attribute you must specify the id of the zoom to use (useZoom: 'zoom1'),
        and also the small image to use (smallImage: /images/....)
        -->

        <a href='/images/zoomengine/bigimage00.jpg' class='cloud-zoom-gallery' title='Thumbnail 1'
        	rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage.jpg' ">
        <img src="/images/zoomengine/tinyimage.jpg" alt = "Thumbnail 1"/></a>

        <a href='/images/zoomengine/bigimage01.jpg' class='cloud-zoom-gallery' title='Thumbnail 2'
        	rel="useZoom: 'zoom1', smallImage: ' /images/zoomengine/smallimage-1.jpg'">
        <img src="/images/zoomengine/tinyimage-1.jpg" alt = "Thumbnail 2"/></a>                  

        <a href='/images/zoomengine/bigimage02.jpg' class='cloud-zoom-gallery' title='Thumbnail 3'
        	rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage-2.jpg' ">
        <img src="/images/zoomengine/tinyimage-2.jpg" alt = "Thumbnail 3"/></a>

    </body>
</html>

The details on the arguments for the Cloud Zoom plugin are provided here.

Now from the above example the main points to note are as follows:

  • Class cloud-zoom in the main image's hyperlink tag.
  • The href attribute of the hyperlink tag contains the link to the larger version of the main image.
  • The rel attribute in the main image hyper link which provides the primary arguments for the plugin, which defines how the plugin will work.
  • The hyperlink tag encloses the smaller version of the product main image.
  • The class cloud-zoom-gallery in the hyperlink tag for the gallery thumbnails.
  • The href attribute of the hyperlink tag contains the link to the larger version of the image.
  • The arguments in the rel attribute for the hyperlink tag in the thumbnail gallery. It contains the id of the main image hyperlink, the link to the small version of the image.
  • The gallery hyperlinks enclose the tiny thumbnail images of the gallery.

Hence, we basically need three versions of the images to implement the gallery.

  • Large Version to enable zoom: Provided by the Gold Cart plugin itself.
  • Medium version which is supposed to be the size of the main image for the single product page: We have to fetch from the database.
  • Finally, the small tiny thumbnails for the gallery: Provided by the Gold Cart Plugin itself.

Now I am going to describe how to integrate this with the Gold Cart plugin and the required hack. First of all, after installing the Gold Cart Plugin, make sure that you have uploaded some images for the product and enabled the gallery in the settings. Also disable the lightbox feature.

Gold Cart Presentation Settings for the Gallery

After that make sure that the gallery is being displayed in the single product's page. Now lets do some code modification. Make sure you have backed up everything, specially the gold cart plugin before proceeding. Edit the gold_shopping_cart.php file and search for the function to display the gallery i.e. gold_shpcrt_display_gallery. In this function, go to the section which displays the gallery for versions above 3.8. This should start from the line number 308 (if you haven’t done any modifications to the code already). This is the original version of the code which displays the gallery:

$output = '';
$product_name = get_the_title( $product_id );
$output .= "<div class='wpcart_gallery'>";
$args = array(
	'post_type'      => 'attachment',
	'post_parent'    => $product_id,
	'post_mime_type' => 'image',
	'orderby'        => 'menu_order',
	'order'          => 'ASC',
	'numberposts'    => -1
);
$attachments = get_posts($args);
$featured_img = get_post_meta($product_id, '_thumbnail_id');
$thumbnails = array();
if ($attachments) {
	foreach ($attachments as $post) {
		setup_postdata($post);
		$link = wp_get_attachment_link( $post->ID, 'gold-thumbnails' );
		$size = is_single() ? 'medium-single-product' : 'product-thumbnails';
		$preview_link = wp_get_attachment_image_src( $post->ID, $size);
		$link = str_replace( 'a href' , 'a rev="' . $preview_link[0] . '" class="thickbox" rel="' . $product_name . '" href' , $link );

		// always display the featured thumbnail first
		if ( in_array( $post->ID, $featured_img ) )
			array_unshift( $thumbnails, $link );
		else
			$thumbnails[] = $link;
	}
}
$output .= implode( "\n", $thumbnails );
$output .= "</div>";
wp_reset_query();

Now this is the modified version of the above code:

$output = '';
$product_name = get_the_title( $product_id );
$output .= "<div class='wpcart_gallery'>";
$args = array(
	'post_type'      => 'attachment',
	'post_parent'    => $product_id,
	'post_mime_type' => 'image',
	'orderby'        => 'menu_order',
	'order'          => 'ASC',
	'numberposts'    => -1
);
$attachments = get_posts($args);
$featured_img = get_post_meta($product_id, '_thumbnail_id');
$thumbnails = array();
if ($attachments) {
	foreach ($attachments as $post) {
		setup_postdata($post);
		$link = wp_get_attachment_link( $post->ID, 'gold-thumbnails' );
		$size = is_single() ? 'medium-single-product' : 'product-thumbnails';
		$preview_link = wp_get_attachment_image_src( $post->ID, $size);
		// ORIGNIAL $link to Represent gallery images with thickbox
		//$link = str_replace( 'a href' , 'a rev="' . $preview_link[0] . '" class="thickbox" rel="' . $product_name . '" href' , $link );

		// Fetching Medium Image and modifying $link w.r.t the Cloud Zoom jQuery Plugin options to display gallery
		$link = str_replace('attachment-gold-thumbnails','',$link); // removing the class from the img tag because its causing a conflict with the cloud zoom plugin
		$small_image = wp_get_attachment_image_src( $post->ID, array(337,437)); // returns an array
		$rel_options = "useZoom: 'zoom1', smallImage: '".$small_image[0]."'";
		$link = str_replace( 'a href' , 'a rev="' . $preview_link[0] . '" class="cloud-zoom-gallery" rel="' . $rel_options . '" href' , $link );					

		// always display the featured thumbnail first
		if ( in_array( $post->ID, $featured_img ) )
			array_unshift( $thumbnails, $link );
		else
			$thumbnails[] = $link;
	}
}
$output .= implode( "\n", $thumbnails ); // Imploding Array element as list items
$output .= "</div>"; // Ending list
wp_reset_query();

Now you can see from the above code that all we need to do is fetch a smaller version of the image (to display in the main image section) and modify the rel attributes such that the cloud zoom plugin activates the gallery feature too.

To enable the Cloud Zoom feature, edit the wpsc-single_product.php and modify the code where the image is displayed in a hyerplink tag. You can search it by the class product_image. You need to modify the rel attribute and add an id and a class to the hyperlink enclosing the image.

<a id="zoom1" rel="position: 'inside',smoothMove: 4" class="cloud-zoom" href="<?php echo wpsc_the_product_image(); ?>">
                       <img class="product_image" id="product_image_<?php echo wpsc_the_product_id(); ?>" alt="<?php echo wpsc_the_product_title(); ?>" title="<?php echo wpsc_the_product_title(); ?>" src="<?php echo wpsc_the_product_thumbnail(get_option('product_image_width'),get_option('product_image_height'),'','single'); ?>"/>
</a>

This is all you need to do to integrate the Cloud Zoom jQuery plugin with the WP e-Commerce Gold Cart Plugin's gallery. Also if you want to enable the jCarousel jQuery plugin on the gallery images, then you need to enclose the gallery hyperlink tags in list elements. For this you need to modify the code slightly such that the hyperlink tags are enclosed in an unordered list.

$output = '';
$product_name = get_the_title( $product_id );
$output .= "<ul class='wpcart_gallery jcarousel-skin-tango'><li>"; // Adding li tag to start implode array elements as list items
$args = array(
	'post_type'      => 'attachment',
	'post_parent'    => $product_id,
	'post_mime_type' => 'image',
	'orderby'        => 'menu_order',
	'order'          => 'ASC',
	'numberposts'    => -1
);
$attachments = get_posts($args);
$featured_img = get_post_meta($product_id, '_thumbnail_id');
$thumbnails = array();
if ($attachments) {
	foreach ($attachments as $post) {
		setup_postdata($post);
		$link = wp_get_attachment_link( $post->ID, 'gold-thumbnails' );
		$size = is_single() ? 'medium-single-product' : 'product-thumbnails';
		$preview_link = wp_get_attachment_image_src( $post->ID, $size);
		// ORIGNIAL $link to Represent gallery images with thickbox
		//$link = str_replace( 'a href' , 'a rev="' . $preview_link[0] . '" class="thickbox" rel="' . $product_name . '" href' , $link );

		// Fetching Medium Image and modifying $link w.r.t the Cloud Zoom jQuery Plugin options to display gallery
		$link = str_replace('attachment-gold-thumbnails','',$link); // removing the class from the img tag because its causing a conflict with the cloud zoom plugin
		$small_image = wp_get_attachment_image_src( $post->ID, array(337,437)); // returns an array
		$rel_options = "useZoom: 'zoom1', smallImage: '".$small_image[0]."'";
		$link = str_replace( 'a href' , 'a rev="' . $preview_link[0] . '" class="cloud-zoom-gallery" rel="' . $rel_options . '" href' , $link );					

		// always display the featured thumbnail first
		if ( in_array( $post->ID, $featured_img ) )
			array_unshift( $thumbnails, $link );
		else
			$thumbnails[] = $link;
	}
}
$output .= implode( "</li><li>", $thumbnails ); // Imploding Array element as list items
$output .= "</li></ul>"; // Ending list
wp_reset_query();

Conclusion

This method works pretty well for integrating the Cloud Zoom plugin with the WP e-Commerce Gold Cart gallery. But one drawback is that we are modifying the actual contents of the gold cart plugin and all the changes will be lost the day we update the WP e-Commerce gold cart plugin. Hence, I will try to make a plugin which enables this functionality rather than hard coding it in the plugin files.

Disclaimer: The above tutorial is meant to enable the Cloud Zoom jQuery plugin with the WP e-Commerce Gold Cart Gallery. I am not responsible if anything goes wrong and the shopping cart does not behave in the expected way. Please take proper backups before messing with any code of the theme or the plugin files.

Tags: , , , , ,
Posted in Blog, Tutorials | 31 Comments »

Publishing Gurus

Thursday, February 24th, 2011

PublishingGurus.com provides complete solutions for designing, editing, formatting, publishing and promoting books. The website was completely designed by their very own Sunny Kapoor (the Founder and Creative Director), and we were given the task to develop the site making it fully customizable and implementing many complex features in it. We used wordpress to achieve our task and highly customized it to get a high quality product.

The Challenge

The primary objective of the website was to maintain huge amounts of pages. Other than the content management aspect of the whole website, the two important requirements were implementing a book display store where they could display and promote the featured books and the business card gallery. It also required a Gallery where they could display the designed covers for their books.

Other challenges included implementing various types of forms, each different from the other in many aspects. The business card layouts required to be linked with the forms such that the user can customize and order the printing of the respective cards easily. Also linking the orders with the PayPal payment system was a major feature. Other requirements included implementation of different types of posting ability like news and a dedicated blog.

The Solution

WordPress, as we all know, does a great job in managing the content whether it is in pages or in posts. We enabled customization of all the pages via the admin panel and implemented the ability to post news updates or blog posts.

The book display store was again managed properly using various categories and filtering options. Obviously, the user can easily edit the image and the details of the book. The print service of business card was a bit tricky to implement but we succeeded in it with flying colours. We used jQuery to display the various business card templates in an eye soothing manner. Connected each card template to the details posted by the respective forms and connected the ordering system to PayPal. We also used jQuery based galleries to display the portfolio of designed book covers.

The website as a whole was pretty complex and included many carousels and forms but everything was implemented in a light user friendly way. We even added social networking features to share the website and its content easily to promote growth of the site and advertisement for the books displayed on it.

The site was completely optimized for search engines and additional features were installed like the integration of Google Analytics within the dashboard displaying the statistics about each post and page.

Tags: , , , , , ,
Posted in Portfolio | No Comments »

iPhone Application Template

Saturday, January 29th, 2011

Nowadays, when it comes to iPhone, ‘There is an App for everything’. So we thought of slicing up an iPhone application themed template so that all those budding developers can have an iPhone app site of their own. But this time we went a step ahead. Instead of the regular xHTML/CSS templates, we developed this into a HTML5 template which uses traces of CSS3 and some jQuery magic. The template can be integrated with any existing content management system or web application. So go ahead, unleash the coder in you and develop a great iPhone application. Then use this HTML5/CSS3 web template to share it with the world :D Do let us know if you need any help. After all we are Code-Pal!

Tags: , , , , ,
Posted in Blog, Downloads | 21 Comments »

How to Create a FAQ Page with WordPress and Custom Post Types

Saturday, December 4th, 2010

I wrote a tutorial for NetTuts about how to use the ever popular Blogging/CMS platform WordPress, to create a dedicated FAQ section in the back-end using ‘Custom Post Types’. Then fetch those custom post types and display in the front end in a spiced up manner using jQuery and CSS3.
This is what the end product will look like.

Create a faq page with wordpress and custom post types final

When the user clicks on any of the FAQs, the page will scroll down automatically to the respective answer and highlight it.

Current Faq Section

Check out the complete tutorial on Nettuts and create some cool, interactive FAQs page for your own site. Do share your creations with us :)

Tags: , , , , , ,
Posted in Blog, Tutorials | 1 Comment »

Creating a Neon Blink Effect for your Forms using CSS3 and jQuery

Saturday, July 17th, 2010

Well thanks to the bright new kid on the block, CSS3, spruced up with a bit of jQuery, I will show you how to build a nifty effect to enhance your forms.

Am sure that this cool Neon blink effects in forms are going to be useful for a lot of purposes so don’t miss my tutorial on 1stWebDesigner.com.

neon-blink-effect-final

In this tutorial, we have made use of @-webkit-keyframes which works only in browsers using the Webkit layout engine like Chrome and Safari. For browsers like Firefox and Opera, where there is no alternative, we will have to gracefully degrade the effect, which in this case will be just a box-shadow on focus. Internet Explorer ( till version 8 ) cannot render most of what we will learn here, but IE 9 does seem to be very promising from what I’ve seen in the recent platform preview.

Tags: , , , ,
Posted in Tutorials | 4 Comments »

The ‘Select’ Problem After Using jqTransform and its Solution

Thursday, February 18th, 2010

The Project

In this recent project of mine, I was required to construct a landing page. In this landing page, there would be a list of languages and after the user selects any particular language, the homepage of the site would open automatically in the respective selected language. It was also required to style the select list box in the way it was given in the design of the landing page. So I opted for the jqTransform jQuery plug-in, which I used once to style some forms. jqTransform is very nice plug-in to customize the forms in a very easy way and the end product is no doubt beautiful. But in this case, it became a minor speed breaker to my progress.

The Problem

The drop down list control of the html form contains the ‘select’ tags which enclose the various ‘option’ tags. Here is a form which I am using in this tutorial to explain the problem:

<form>
	<h4>Select Box Without jqTransform</h4>
	<div id="box-city" class="select-menus">
		<label>City</label>
		<br/>
		<select name="select-country">
  		        <option>Gotham</option>
			<option>New York City</option>
			<option>Smallville</option>
		</select>
		<div class="clear"></div>
	</div>
</form>

What jqTransform does is, it scans the whole ‘select’ tag and creates an unordered list containing hyper-links of the options in the drop-down-list. It then hides the original ‘select’ tag and its content.

<form class="jqtransform jqtransformdone">
	<h4>Select box with jqTransform and normal select change method</h4>
	<div class="select-menus" id="box-name">
		<label style="cursor: pointer;">Name</label>
		<div class="jqTransformSelectWrapper" style="z-index: 10; width: 150px;">
			<div>
				<span style="width: 119px;">Batman</span>
				<a class="jqTransformSelectOpen" href="#"></a>
			</div>
                        <ul style="width: 148px; display: none; visibility: visible; height: 100px; overflow: hidden;">
				<li><a index="0" href="#" class="selected">Batman</a></li>
				<li><a index="1" href="#">Robin</a></li>
				<li><a index="2" href="#">Superman</a></li>
				<li><a index="3" href="#">Spiderman</a></li>
			</ul>
			<select name="select-country" class="jqTransformHidden" style="">
	 				<option>Batman</option>
					<option>Robin</option>
					<option>Superman</option>
					<option>Spiderman</option>
			</select>
		</div>
		<div class="clear"></div>
	</div>
</form>

This does not create a problem when we use the ‘select’ tag generally for selecting a particular value and then performing the form submission by using a submit button. It creates a problem when we want to perform some function when the value of the drop down list is changed.

This is normally achieved in javascript by using the ‘change’ method of the select control. The ‘change’ method captures the value-change event and we can access the value selected by the user in the following manner.

// Capturing the change event of the Non-Transformed Select Box.
$("#box-city select").change(function(){
	var value= $(this).val();
    alert("Value Selected = "+value);
});

But after using the jqTransform plugin, the ‘select’ tag is no more there to apply the change method on.

The Solution

The solution to this, is a very simple one. We can simulate the change event for the jqTransformed drop down list by applying a click function to the hyper-link element within the unordered list. Then we can have the selected value by accessing the text of the span tag where the selected element is set or displayed.

// Capturing the change event of the Transformed Select Box using the modified method of capturing the value change event.
$("#box-age div.jqTransformSelectWrapper ul li a").click(function(){
	var value= $("#box-age div.jqTransformSelectWrapper span").text()
	alert("Value Selected = "+value);
	return false; //prevent default browser action
});

Conclusion

This is one way of simulating the change function for drop-down-list boxes after using jqTransform to customize them. The other option is to modify the jqTransform plugin itself to properly access the onChange event of the ‘Select’ boxes. I hope the jqTransform plug-in developers can fix this problem in their next release of the plug-in. Though this is not a very important or common bug but I do hope that this was of some help.

Tags: , , ,
Posted in Tutorials | 73 Comments »

  • Graphic River Are My Sites Up? Theme Forest

  • Browse

  • Tag Cloud