- Details
- Category: JConnect News
Have you seen websites where photos of the staff members flip over? You hover your mouse over the picture of the staff member and the image flips over to reveal the staff member's name.
Sounds difficult? Thanks to the jQuery Flip plugin and a bit of CSS, this effect is easy to achieve.
To create a flip animation with HTML, you need to create two containers: the front (visible) and the back (hidden), then apply a little CSS and Javascript.
Step #1. Download jQuery Flip plugin
Go to jQuery Flip plugin's repository[1] and click the "Download ZIP" button.
- Decompress the file.
- Look for the jquery.flip.min.js file.
- Upload the file to your site.
Step #2. The HTML
Use the example code below:
<div class="flip">
<div class="front">
<img class="xt-lazy-img" src="/path/to/image.jpg" alt="" />
</div>
<div class="back">
<h3>Some Text in the Back!</h3>
</div>
</div>
In the code above we defined these elements:
- flip container class. The class that we will call later in step 4.
- front container class. The image to display by default.
- back container class. The content to display when the flip happens.
Step #3. The CSS
Add the following CSS code to your site, in order to create up the end result:
.flip {
height: 199px;
width: 300px;
margin: 0 auto;
}
.flip img {
width: 300px;
height: auto;
}
.flip .back {
background: #2184cd;
color: #fff;
text-align: center;
}
Set custom width and height properties depending to your image size.
Step #4. The Javascript
Inside the head tag, load the code below in exactly the order below. Any such CMS such as WordPress, Joomla or Drupal will have plugins or modules that allow you to load additional scripts in the head of your page, often a page-specific basis.
jQuery:
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
jQuery Flip plugin:
<script src="https://d1zflb13a857us.cloudfront.net/path/to/jquery.flip.min.js"></script>
Execute the plugin by giving a 'hover' value to the trigger option:
<script>
$(function(){
$(".flip").flip({
trigger: 'hover'
});
});
</script>
Open your site in a browser to see the end result. Put the cursor over the image to preview the horizontal flip effect.
To get a vertical flip effect, change the axis option to have an 'x' value.
<script>
$(function(){
$(".flip").flip({
trigger: 'hover',
axis: 'x'
});
});
</script>
To make the flip effect with a click, instead of a hover event, set the trigger values to 'click'.
Step #5. The end result
Check out the demo here[2]
About the author
Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in our support forum.
References
- Details
- Category: JConnect News
If you use Joomla, then you may have encountered problems with embeds.
Before the launch of the OSEmbed extension, it was difficult to reliably embed any outside sources into your Joomla articles.
In this tutorial, I'm going to show you how easy it is to use OSEmbed to include SoundCloud audio files in Joomla content.
About the author
Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. He was a teacher for many years before starting OSTraining. Steve wrote the best-selling Drupal and Joomla books.
- Details
- Category: JConnect News
Read more https://www.corephp.com/blog/handpicked-joomla-themes-part-seven/
- Details
- Category: JConnect News
It is very common that large Joomla templates with many features are over 2 MB in size. This can make these templates hard to install in the standard way.
Luckily, Joomla provides an alternative for those cases - the "Discover" feature.
In this tutorial, I'm going to show you how to install a large template by uploading it through cPanel and installing with Joomla Discover.
Step #1. Find the template's name
- To know the template's name, open templateDetails.xml with a code editor. The file is inside the template installer.
- Look for the value in the "name" tag.
In this example, the template's name is fx_ganbate.
<name>fx_ganbate</name>
Step #2. Upload the template installer
- Through cPanel, open File manager:
- Navigate to /templates/ and create a new folder:
- Type the name of the template from step 1. In my example the name is "fx_ganbate".
- Click "Create new folder".
- This is my current progress, the new folder is at the same level as "protostar".
- Double click over the new folder.
- Click "Upload".
Browse the template installer (zip file), and wait until the upload process ends. In the right-bottom corner, you can see the status.
Step #3. Decompress the template installer
- In the File manager, go to templates/your-new-template/ folder.
- Right-click over the installer.
- Click Extract.
- Click "Extract file(s)" button.
- Close when it's done.
- Then, click "Reload" button to see the extracted files.
Now you can delete the zip file, since it is s no longer required. Right-click and choose "delete".
Step #4. Discover template and install
Login to your Joomla backend and...
- Go to Extensions
- Manage
- Discover
- Click in "Discover" button.
- Check the template from results.
- Install.
If everything is correct, a success message will appear.
Step #5. Set the new template as default
- Go to Extensions > Templates.
- Set the new template as default by clicking the star icon.
About the author
Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in our support forum.
- Details
- Category: JConnect News
There has always been a confusion for a developer on how to use dates in Joomla, specially when all the time zones have to be taken into consideration.
Let’s make this Crystal Clear!
As you can see in the Image below, the date selected is 2015-08-26 05:30:00, This is the user’s timezone date and time.
If we save the same date in our database it would mismatch for the person who is sitting on the other corner of the world.
Hence, a better way to do this is to save the date in UTC format.
For Instance
If the user is in India and the time in here is 2015-08-26 05:30:00, as India is +5.30GMT save the time as 2015-08-26 00:00:00 in your database. Which is the selected time ( 05.30).
While displaying the date you need to make sure that you convert the UTC date to the user’s local timezone.
This way you make sure that wherever the user is, the time shown to him is accurate.
For Instance
UserA is India and creating an event with start date 2015-12-01 17:30:00 which is 1st Dec 2015 at 5.30pm
UserB is in London (GMT +1:0)
UserC is in New York (GMT -5:0)
UserD is in Australia (GMT +10:00)
Here are the dates shown for different user
Date saved in database - 2015-12-01 12:00:00 (This is the UTC time)
Date shown for UserB - 2015-12-01 13:00:00 (This is GMT +1:00)
Date shown for UserC - 2015-12-01 07:00:00 (This is GMT -5:00)
Date shown for UserD - 2015-12-01 22:00:00 (This is GMT +10:00)
Hope this Blog clears all the confusion and now you will be able to use dates efficiently in Joomla!
