Joomla Templates Club 406,261 posts

[vibedigital Friend vibedigitalJoin date: December 2013Posts: 38Downloads:0Uploads:1 Thanks: 8 Thanked: 6 times in 1 posts]

#194076

I’d like to know if it is possible to assign URLs to the boxes in the grids… For example, You’ll see the CD cover on this grid, upon rollover it flips around and says “purchase album” but of course it’s currently linked to an article. I’d like the ability to send it to the item in the store.

I know I can use a banner for this, but the banner doesn’t have the animation. For example, the box with the logo/text for “Now I Play Along Too” I’d like that to have the roll over effect as well- but if I make it an article allowing the effect it won’t be linkable to an external URL.

Please advise!

Thank you so much in advance!

Craig

[Css Magician Friend Css MagicianJoin date: October 2014Posts: 741Downloads:43Uploads:53 Thanks: 114 Thanked: 366 times in 263 posts]

#519985

@vibedigital,

You should create a custom html module (add a shop link in it) or use a module in this list and assign to “home-1” position

[vibedigital Friend vibedigitalJoin date: December 2013Posts: 38Downloads:0Uploads:1 Thanks: 8 Thanked: 6 times in 1 posts]

#520079

@Css Magician,

I would like it to have the animation that the article boxes have.

Your suggestion just creates a static image. Any other suggestions? I really need the “Rotate-Y” or “Rotate-X” animation effect. I’d also like to be able to link it to other pages on the website, like the “tour” page.

I appreciate your help!

[Css Magician Friend Css MagicianJoin date: October 2014Posts: 741Downloads:43Uploads:53 Thanks: 114 Thanked: 366 times in 263 posts]

#520147

@vibedigital,

I can’t login with your account, so I could not create a custom html module for you.
Please follow steps below to have animation effect:

1) Go to Module Manager -> create new Custom Html Module, assign the module to “home-1” position.
2) Insert following code block into Custom output and save:

<div class="item-image-wrap flipper">
<div class="item-image front">
<a title="Purchase Album" href="http://67.43.7.17/~melodime/dev/index.php/shop-all" class="article-link">
<img alt="Purchase Album" src="http://67.43.7.17/~melodime/dev/images/joomlart/demo/photo/sns-thumb.jpg" title="Purchase Album">
</a>
</div>

<div class="item-desc back">
<h2 class="article-title">
<a href="/~melodime/dev/index.php/101-homepage-content/72-purchase-album" class="article-link"> Purchase Album</a>
</h2>
<section class="article-intro clearfix">
<p>When you buy Melodime's new album, you're helping a child achieve his or her dream of playing an instrument.</p> </section>
</div>
</div>


3) Go to front end, you should see the module as per my screen short:

To have effect like “Rotate-Y” or “Rotate-X”, please add the module class suffix: ” rotateX image” or ” rotateX image” (make sure to leave a blank before suffix text).

Note: if my suggestion above does not come up to your expectation, you should hire a developer to handle this for you. Actually, JA Fixel does not support such effect with module, it supports such with Item article only.

---

Attachments:

1. 

4 users say Thank You to Css Magician for this useful post

1. vibedigital
2. uformia
3. mkisite
4. ssrrn

[vibedigital Friend vibedigitalJoin date: December 2013Posts: 38Downloads:0Uploads:1 Thanks: 8 Thanked: 6 times in 1 posts]

#520277

That actually works quite well! I am satisfied! Thank you so much for your help.

I do have a programmer that works for my company, but he is not on staff full-time, so it would have cost me to have to hire him for an hour to make that happen if CSS didn’t do the trick.

Thank you again!!!

Craig

[uformia Friend uformiaJoin date: August 2013Posts: 9Downloads:0Uploads:0 Thanks: 5 Thanked: 5 times in 1 posts]

#520351

This is really great to know, – thanks!

If I would like to have the ‘moving up’ effect (like the flower on right side of demo page: http://www.joomlart.com/demo/#ja_fixel), -which module class suffix do I have to add?

THANKS!

[uformia Friend uformiaJoin date: August 2013Posts: 9Downloads:0Uploads:0 Thanks: 5 Thanked: 5 times in 1 posts]

#520499

Ah, figured it out myself – the module class suffix is ‘none image’.

Thanks anyway!

4 users say Thank You to uformia for this useful post

1. vibedigital
2. JA Developer
3. mkisite
4. ssrrn

[ssrrn Friend ssrrnJoin date: October 2008Posts: 4Downloads:3Uploads:0 Thanks: 4]

#533504

Hi, Many thanks for the workaround. One quick question, is it possible to make a link to load up to one of the page in the site other than having a popup?

Thanks in advance.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#533804

@ssrrn, If you wish to do that, please try my workaround and follow the solution suggested by @Css Magician:

Change

<a title="Purchase Album" href="http://67.43.7.17/~melodime/dev/index.php/shop-all" class="article-link">

To


<a title="Purchase Album" href="javascript:window.open("http://67.43.7.17/~melodime/dev/index.php/shop-all", "_blank", "toolbar=yes, scrollbars=yes, resizable=yes, top=500, left=500, width=400, height=400")" class="article-link">

Hope it helps.

1 user says Thank You to Ninja Lead for this useful post

1. ssrrn

[rclpris Friend rclprisJoin date: November 2010Posts: 258Downloads:0Uploads:95 Thanks: 8]

#533872

Hi,

I think I’m facing a very similar problem.

I created the block with a flipping effect however, it is leading me to a different page (temp1.jpg) in which I want to link it to temp2.jpg.

Could someone please kindly give me a hand? 🙂 Thanks.

---

Attachments:

1. 
2. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#533941

@rclpris,

Which link did you add to the ‘custom output’ of that custom html module (as per the solution suggested by @Css Magician)? Please try to change to the link of page as in your 2nd screenshot.

You can post your site’s URL here so that we can have a look.

[rclpris Friend rclprisJoin date: November 2010Posts: 258Downloads:0Uploads:95 Thanks: 8]

#534580

Hi Ninja Lead,

http://orangybun.com/

I will pm you the credentials.

1. The links on my products page are actually dynamically generated in a loop. I thought of hard coding it but it’s at no use unfortunately. Please help to perfectify such beautiful template.

2. I also need to add a social media link besides the rest of the social media links on all pages. It is called weibo. http://hk.weibo.com/ It is very similar to facebook and you need to direct people to enter their credentials as well. Anyway to do it so that they can have the same theme as the rest of the buttons? Right now, I tried with a third party application which looks aweful and ruins the whole template 🙁

Thanks and looking forward to your reply.

---

Attachments:

1. 
2. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#534793

I’m afraid I’m not quite getting what you mentioned above. It would be awesome if you can possibly include screenshot and explanation on what you would like to achieve. It would help to understand the issues and give you specific answers.

[rclpris Friend rclprisJoin date: November 2010Posts: 258Downloads:0Uploads:95 Thanks: 8]

#535043

@ninja Lead,

1:

Scenario 1:

When hover on the “Product” link and a drop down would be shown as in picture 1. Click onto “Burmester” and it will lead you to picture 2. This is the perfect outcome.

Scenario 2:

When I click onto the “product” page, it will lead me to picture 3. Find Burmester and do a single click on it, it will lead you to picture 4. This is not the outcome I want to see, I want to see picture 2.

————————————————————————————————

2. Please see picture 4 where I circled the weibo symbol. I am trying to add a button for weibo, one of the social media just like facebook. However, I want it to share the same theme/button style as the rest of the social media buttons in this template. Anyway to achieve that? The second part which I want to see the weibo button is when an article is shown. Please see picture 5.

Thanks.

---

Attachments:

1. 
2. 
3. 
4. 
5. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#535250

I hope my explanation below would help.

#1: Product menu item uses Menu Item Type: List All Categories which shows the list of categories. When you click item category, it will show all articles in such category, not the detail article as your request.

#2: The social icons on your site are handled by Content – JA Bookmark plugin, you can turn it off if you don’t want to use. About weibo button, our plugin does not support at the moment, and also I am not sure about its API to work with it. If you are familiar with programming, you can add Weibo button into detail article, here is link to source code: templates/ja_fixel/html/com_content/article/default.php and default_detail.php files.

Anyway, I am afraid both cases you mentioned above are beyond scope of JA support.

[Author]

Posts