Magento multi-tab image display on product page with Admin support

This project received 3 bids from talented freelancers with an average bid price of $8045 USD.

Get free quotes for a project like this
Project Budget
$30 - $250 USD
Total Bids
Project Description

Our magento store needs to have an additional feature built for front-end and back-end.

On the back-end, each of our products are tagged as being in Phase 1, 2, or 3, which is a simple attribute we created. It is one product, but goes through 3 phases.

Each phase will have its own set of pictures, so first thing is:


Need to modify the Product images section of Magento Admin page. All images need to be able to be distinguished by Phases. Phase 1, 2, or 3. Then, each image needs to be able to be sorted within its Phase. For example, images for Phase 1 can be sorted as 1, 2, 3, etc. Phase 2 images can be sorted 1, 2, 3, etc.


On the magento product page, need to create a 3 tab block for the images to display. See attached pdf -- it's the green section that we're talking about. The Phases, Image and Thumbs.

I already have a zoom extension that I like that is installed, so can use that for the zoom and thumbnails. When the main image is moused over, a zoom box of the image appears above the right content. When a thumbnail is moused over, the main image is changed to the one moused over. IMPORTANT: All of this is already built-in to the extension that I have.

But, need to modify the code slightly so that when the Phase 1 tab is open, the only images that show are the Phase 1 images. Phase 2 tab would only have Phase 2 images.

The Phase buttons at the top (PHASE 1, PHASE 2, PHASE 3) should have background images that I will create. The Phase that is active will have a different background image to show it is active. The Phase that the product is currently on will also have a different image. For example, if a product is in Phase 3, the Phase 3 button will look different than the others, even if it is not active. So buttons will have the following states:

for each phase (meaning 3x each)

- current phase button active

- current phase button inactive

- non-current phase button active

- non-current phase button inactive

When a non-active Phase button is moused over, the non-active phase tab will be displayed, meaning the tabs are opened from just mouseover of the tab in the top (like Phase 1).

When the product page first loads, it will run through an auto-sequence very very quickly -- showing each Phase starting with Phase 1 until the active Phase is reached at which point it stops. For example, if the Product is in Phase 2, then when the product opens, it will first show Phase 1 as active for a very very brief moment (maybe less than a second, but can adjust time if needed) then Phase 2 and stays on Phase 2 as active. If Phase 3, then it shows Phase 1, then Phase 2, then settles on Phase 3.

Looking to make some money?

  • Set your budget and the timeframe
  • Outline your proposal
  • Get paid for your work

Hire Freelancers who also bid on this project

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online