Often when designing websites static or dynamic, PHP or ASP.Net, Laravel or WordPress, you have to design in a way that if the user hovers an image it gets changed and an alternate image is displayed. This can be easily achieved via simple HTML events. Here is the trick:
<img src="FIRST IMAGE URL GOES HERE"
onmouseover="this.src='SECOND IMAGE URL GOES HERE'"
onmouseout="this.src='FIRST IMAGE URL GOES HERE - AGAIN'" />
It is simple as that.
In my previous article I talked about creating real-time PHP application. That was on the server side and I demonstrated a very very basic client to connect with it. Let’s take that to next step and create a Javascript client with AngularJS.
<html> <head>
css/bootstrap.min.css" rel="stylesheet"> <script src="angular-client.js"></script>
<style>
body { margin-top: 10px; }
input.message { height: 30px; }
</style>
</head>
AppCtrl">
<form class="form-inline">
<button ng-click="connect()" class="btn">Connect</button>
<input type="text" ng-model="text" placeholder="input message to send" class="message"></input>
<button ng-click="send()" class="btn">send</button>
</form>
<table class="table table-striped">
<tr ng-repeat="message in messages">
<td>{{message}}</td>
</tr
</table>
</body>
</html>
var app = angular.module('app', []);
app.factory('ChatService', function() {
var service = {};
service.connect = function() {
if(service.ws) { return; }
var ws = new WebSocket("ws://localhost:8080");
ws.onopen = function() {
service.callback("Succeeded to open a connection");
};
ws.onerror = function() {
service.callback("Failed to open a connection");
}
ws.onmessage = function(message) {
service.callback(message.data);
};
service.ws = ws;
}
service.send = function(message) {
service.ws.send(message);
}
service.subscribe = function(callback) {
service.callback = callback;
}
return service;
});
app.controller('AppCtrl', ['$scope', 'ChatService', function($scope, ChatService) {
$scope.messages = [];
ChatService.subscribe(function(message) {
$scope.messages.push(message);
$scope.$apply();
});
$scope.connect = function() {
ChatService.connect();
}
$scope.send = function() {
ChatService.send($scope.text);
$scope.text = "";
}
}]);
It is pretty straightforward. We created an Angular Service and consumed that in our Angular controller. The only purpose of Angular service is handling communication. It will hand over the message to the subscriber in our case Angular controller and controller can do anything with that message. Here since we demonstrated the chat application so controller displays that message received.
That’s it! so simple.
Note: Both HTML and Javascript files are also available on Gist.Code was referenced from here.
That’s how the osCommerce theme looks by default in version 2.3.1
What we want to do is, to change the light blue of the buttons, infobox headings and breadcrumb line (thats the line just under the header). In other words, we’re going to change the color theme of the store. The whole process won’t take more than some minutes, let’s start
1. Choose a theme from “themeroller”
Just go to the jquery-ui page and pick a new theme from themeroller. You can take one of the ready themes, you can make adjustements to an existing one or even create your own theme.
There are really many themes to choose from. After you are done click “download”. You’ll be transfered to another screen.
Leave all components checked and click “download” again. You’ll get a complete copy of jquery ui to your computer. Unzip the file and open the folder. The folder will look like this
We don’t need all of it’s contents, because jquery ui is already installed in osCommerce. The part we need is marked with orange in the above image. It’s named by the name of the theme we choose. Here we need to do one change, to rename the file jquery-ui-1.8.6.custom.css to jquery-ui-1.8.6.css
2. upload the theme to your server
Use your favorite FTP program to upload the folder “ui-darkness” (the folder name depends on the theme you downloaded from themeroller) to following location
[catalog]/ext/jquery/ui/
3. activate the new theme
Last step is to “tell” to our store to use the new theme. To do this we need to go to file [catalog]/includes/template_top.php and change the path to the theme. This path is set in following line
|
29
|
<link rel="stylesheet" type="text/css" href="ext/jquery/ui/redmond/jquery-ui-1.8.6.css" /> |
This we change to
|
29
|
<link rel="stylesheet" type="text/css" href="ext/jquery/ui/ui-darkness/jquery-ui-1.8.6.css" /> |
Only thing we do is, to change the path to go to folder “ui-darkness” instead of “redmond” which is the default theme. You need ofcourse to set the right name, according to the theme you’re going to use
Lets see how our store looks now
So to get started you’re going to need jQuery and the Orbit plugin (make sure jQuery is attached first).
<script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.orbit.min.js" type="text/javascript"></script>
Now we can quickly hookup the CSS we need:
<link rel="stylesheet" href="css/orbit.css">
And finally, let’s dig into the markup.
Now, just a couple notes before moving on…
All we need to do now is activate the Orbit plugin.
<script type="text/javascript">
$(window).load(function() {
$('#featured').orbit();
});
</script>
And there you have it. Orbit, implemented and ready to rock with all the default settings.
Article resource: http://www.htmldrive.net/items/show/928/Countdown-jQuery-Slick-Image-Slider-Plugin