Author Topic: Lightbox + more images hack 1.0.11 - IMPROVED!  (Read 259206 times)

macallf

  • Hero Member
  • *****
  • Posts: 2411
    • Mark Callf Design
Lightbox + more images hack 1.0.11 - IMPROVED!
« on: April 27, 2007, 12:14:14 pm »
Hello,

I have seen requests for this and another post that has a lot of questions, how to's on this subject. Thanks to Nirmoy, who commissioned this mod, who has agreed to release it to the community.

This mod has only 1 modified file and needs no alterations to your sites template file, it also includes the relevant js files. Which are mootools and slimbox.

You can see the mod working here and this should explain what it does. It allows you to have swappable images and lightbox functionality.

Full instructions and download can be found on my site.

http://design.markcallf.co.uk/VirtueMart-1.0.x/Lightbox/menu-id-1.html



[attachment cleanup by admin]
Mark
All of My old mods are now available on my website.
Mark Callf Designs

If you like the work I've done for VM please fell free to Donate

Please Note: I am no longer actively developing or involved with VM development.

room5

  • Beginner
  • *
  • Posts: 4
Re: Lightbox + more images hack 1.0.10
« Reply #1 on: April 28, 2007, 08:00:44 am »
Nop it didn't work

macallf

  • Hero Member
  • *****
  • Posts: 2411
    • Mark Callf Design
Re: Lightbox + more images hack 1.0.10
« Reply #2 on: April 28, 2007, 10:47:52 am »
I can assure you it does work and it is working on at least 3 sites!

Perhaps a little more info and a link to your site.

Did you follow my instructions?

Mark
Mark
All of My old mods are now available on my website.
Mark Callf Designs

If you like the work I've done for VM please fell free to Donate

Please Note: I am no longer actively developing or involved with VM development.

sandro

  • Beginner
  • *
  • Posts: 12
Re: Lightbox + more images hack 1.0.10
« Reply #3 on: April 29, 2007, 14:25:46 pm »
I have unloaded the packet and I have inserted in my server, then I have opened the file flypage.php and I have replaced this lace :

<td rowspan="4" valign="top" style="text-align:center;"><br/>{product_image}<br/><br/>{more_images}</td>

with this :

<a href="{zoom_image}" name="{product_name}" id="product_image_link" title='{product_name}' alt='{product_name}' rel="lightbox[]"><img name="product_image" alt='{product_name}' src="{full_image}" height="90" border="0"/></a>

then I have opened the file shop.css and I have added this :

img.vm_more_image {
   height: 90px;
   width: 90px;
}

I now have 2 problems, the first one is that I don't have the effect of opening image, and according to, I have not understood as the other images they are added .

I wanted something type this :
http://www.orbit-movies.com/movie/movie/abschied-in-der-nacht.html

and someone has recommended to me to read this 3D .

The link of the site where I am performing this hack, it is the following :

http://www.abaubiglass.com

Thanks

macallf

  • Hero Member
  • *****
  • Posts: 2411
    • Mark Callf Design
Re: Lightbox + more images hack 1.0.10
« Reply #4 on: April 29, 2007, 14:49:25 pm »
It seems as though in your template file that you have another link to mootools and slimbox + you are using a lot of scripts!

15 To be precise + you are using jquery. This can sometimes interfere with mootools.

The only thing I can suggest is to remove the links to mootools and slimbox from your templates index.php file

Mark
Mark
All of My old mods are now available on my website.
Mark Callf Designs

If you like the work I've done for VM please fell free to Donate

Please Note: I am no longer actively developing or involved with VM development.

sandro

  • Beginner
  • *
  • Posts: 12
Re: Lightbox + more images hack 1.0.10
« Reply #5 on: April 29, 2007, 16:04:05 pm »
 ;) ok, has followed its suggestions, now the effect works, but I has not understood as I have to add the additional images in her description of the products...
In attends him of an answer, I thank it for the help.

macallf

  • Hero Member
  • *****
  • Posts: 2411
    • Mark Callf Design
Re: Lightbox + more images hack 1.0.10
« Reply #6 on: April 29, 2007, 16:12:03 pm »
If I understand you correctly, forgive me if I am wrong

To add more images to a product, (You will need the tag {more_images} in your flypage)

VM admin, select products from menu, select file manager. This gives a list of products and allow you to add more image files to a product. Just click [add image/file] for each product you wish more images for.

Mark
Mark
All of My old mods are now available on my website.
Mark Callf Designs

If you like the work I've done for VM please fell free to Donate

Please Note: I am no longer actively developing or involved with VM development.

sandro

  • Beginner
  • *
  • Posts: 12
Re: Lightbox + more images hack 1.0.10
« Reply #7 on: April 29, 2007, 16:18:02 pm »
this is the flypage.php

how do I have to add the tag more_images?
Code: [Select]
{navigation_pathway}
<br/>
<table border="0" style="width: 100%;">
  <tbody>
<tr>
  <a href="{zoom_image}" name="{product_name}" id="product_image_link" title='{product_name}' alt='{product_name}' rel="lightbox[]"><img name="product_image" alt='{product_name}' src="{full_image}" height="90" border="0"/></a>
  <td rowspan="1" colspan="2">
  <h1>{product_name} {edit_link}</h1>
  </td>
</tr>
<tr>
  <td rowspan="1" colspan="2">{manufacturer_link}<br /></td>
</tr>
<tr>
      <td width="33%" valign="top" align="left">{product_price}<br /></td>
      <td valign="top">{product_packaging}<br /></td>
</tr>
<tr style="font-style: italic;">
  <td rowspan="1" colspan="2"><hr />{product_description}<br/><span style="font-style: italic;">{file_list}</span></td>
</tr>
<tr>
  <td>{product_availability}<br /></td>
  <td colspan="2"><br />{addtocart}</td>
</tr>
<tr>
  <td colspan="3">{product_type}</td>
</tr>
<tr>
  <td colspan="3"><hr />{product_reviews}</td>
</tr>
<tr>
  <td colspan="3">{product_reviewform}<br /></td>
</tr>
<tr>
  <td colspan="3">{related_products}<br /></td>
</tr>
<tr>
  <td colspan="3"><div style="text-align: center;">{vendor_link}<br /></div><br /></td>
</tr>
  </tbody>
</table>
{navigation_childlist}<br style="clear:both"/>

macallf

  • Hero Member
  • *****
  • Posts: 2411
    • Mark Callf Design
Re: Lightbox + more images hack 1.0.10
« Reply #8 on: April 29, 2007, 16:27:44 pm »
<tr>
<td rowspan="4" valign="top" style="text-align:center;"><br/>
     <a href="{zoom_image}" name="{product_name}" id="product_image_link" title='{product_name}' alt='{product_name}' rel="lightbox[]"><img name="product_image" alt='{product_name}' src="{full_image}" height="90" border="0"/></a>
<br/><br/>{more_images}</td>
     <td rowspan="1" colspan="2">
     <h1>{product_name} {edit_link}</h1>
     </td>
   </tr>

This is how the first part of your file should look with the parts in red added. According to your earlier post you had deleted these!

Mark
Mark
All of My old mods are now available on my website.
Mark Callf Designs

If you like the work I've done for VM please fell free to Donate

Please Note: I am no longer actively developing or involved with VM development.

sandro

  • Beginner
  • *
  • Posts: 12
Re: Lightbox + more images hack 1.0.10
« Reply #9 on: April 29, 2007, 17:35:20 pm »
I have corrected the flypage.php :

Code: [Select]
{navigation_pathway}
<br/>
<table border="0" style="width: 100%;">
 <tbody>
<tr>
       <td rowspan="4" valign="top" style="text-align:center;"><br/>
  <a href="{zoom_image}" name="{product_name}" id="product_image_link" title='{product_name}' alt='{product_name}' rel="lightbox[]"><img name="product_image" alt='{product_name}' src="{full_image}" height="90" border="0"/></a>
       <br/><br/>{more_images}</td>
  <td rowspan="1" colspan="2">
  <h1>{product_name} {edit_link}</h1>
  </td>
</tr>

But continuous to see the additional images without effect thumb... and then, I see the text it has to be to the left, but this adding :

Code: [Select]
<td rowspan="4" valign="top" style="text-align:center;"><br/>he is seen badly.

http://www.abaubiglass.com/index.php?page=shop.product_details&flypage=&product_id=127&category_id=16&manufacturer_id=0&option=com_virtuemart&Itemid=1

macallf

  • Hero Member
  • *****
  • Posts: 2411
    • Mark Callf Design
Re: Lightbox + more images hack 1.0.10
« Reply #10 on: April 29, 2007, 17:42:11 pm »

To add more images to a product,

VM admin, select products from menu, select file manager. This gives a list of products and allow you to add more image files to a product. Just click [add image/file] for each product you wish more images for.

Mark

I don't think you have done this step, you can not show more images if you have not added them to the product!

Formatting of the flypage I will leave to you, but in a previous post you said you had replaced

Quote
I have replaced this lace :
<td rowspan="4" valign="top" style="text-align:center;"><br/>{product_image}<br/><br/>{more_images}</td>

with this :

<a href="{zoom_image}" name="{product_name}" id="product_image_link" title='{product_name}' alt='{product_name}' rel="lightbox[]"><img name="product_image" alt='{product_name}' src="{full_image}" height="90" border="0"/></a>

Which means you had taken out the table formatting, I just put it back in!

Mark
Mark
All of My old mods are now available on my website.
Mark Callf Designs

If you like the work I've done for VM please fell free to Donate

Please Note: I am no longer actively developing or involved with VM development.

sandro

  • Beginner
  • *
  • Posts: 12
Re: Lightbox + more images hack 1.0.10
« Reply #11 on: April 29, 2007, 18:01:49 pm »
 ;) ok, had understood badly the operation of this hack, I apologize...

But if I want to create a thing as shown in this site, as I have to do?
http://www.orbit-movies.com/movie/movie/abschied-in-der-nacht.html
That in Screenshot film ....
I thank for your availability

macallf

  • Hero Member
  • *****
  • Posts: 2411
    • Mark Callf Design
Re: Lightbox + more images hack 1.0.10
« Reply #12 on: April 29, 2007, 18:10:06 pm »
My hack Doesn't Work quite like that, it works like this http://www.cofit.co.uk/index.php?option=com_virtuemart&page=shop.product_details&flypage=shop.flypage_modern&product_id=18&Itemid=48&Itemid=48

As you can see slightly different, but you have to add the extra images as I have stated.

Mark
Mark
All of My old mods are now available on my website.
Mark Callf Designs

If you like the work I've done for VM please fell free to Donate

Please Note: I am no longer actively developing or involved with VM development.

huub

  • Jr. Member
  • **
  • Posts: 62
Re: Lightbox + more images hack 1.0.10
« Reply #13 on: April 29, 2007, 23:30:05 pm »
Thank you for a wonderful hack. It is simple to implement and works fantastic .... there is just this one thing.

When I click to open the 'slimbox'image it does appear, but behind my text. It seems a z-index matter, but where do I have to change this?

Thanks in advance for any help.

macallf

  • Hero Member
  • *****
  • Posts: 2411
    • Mark Callf Design
Re: Lightbox + more images hack 1.0.10
« Reply #14 on: April 29, 2007, 23:54:23 pm »
All I can say is check your templates css file. Lower any z-index's in your template file till slimbox works.

In most cases though you would not need z-index's in your css file, but every site is different!

Mark
Mark
All of My old mods are now available on my website.
Mark Callf Designs

If you like the work I've done for VM please fell free to Donate

Please Note: I am no longer actively developing or involved with VM development.