Hi, I'm trying to style the 'enlarge image' link for viewing the giant image on product detail page. It has brackets around it which seem to be added in the code, I can't find anywhere to remove them in language file. I want to style the link to look like a button, so the brackets look odd. I had got around this by setting the colour of the span in css to match the button background colour, then a contrasting colour for the link. However, some of the products have multiple images so this is causing an issue with the span elements which show '1 of 3' etc.

Please could the brackets either be removed or additional CSS classes be added to target the '1 of 3' elements?

Currently, the class 'extraimage' is shared by the giant image link, and the '1 of 3' elements. The class 'extraimagenum' is on the '1' but not 'of 3'. I think if it could be added to the second part of the image numbers, this would solve the problem.

Or if there is another way to do this, suggestions welcome!

Thank you
Ellen

Hi Ellen,
Why not use the Magic Thumb plugin? - https://www.ecommercetemplates.com/help/magictoolbox.asp#magicthumb

Example here - http://www.ectdemostore.com/magic-thumb.asp



* Database Migrations and Conversions*
* ASP to PHP Cart Conversions*
*Contact Us*
*Buy The PHP Capture Card Plugin*
*Rate Our Services/View Our Feedback*

Hi Phil,

Thanks, I did look at Magic Thumb as what I ideally wanted was for the giant image to pop up in a lightbox style. It didn't look as though that was one of the options, though I'm very happy to be corrected if it is?

I did try $giantimageinpopup=TRUE; but the styling was not really like a popup window, and it didn't work well with the sticky menu on my site.

I can achieve what I need with the CSS classes just being made slightly more precise so I can target the elements. It doesn't make sense to me that in an example with 3 images, the class 'extraimagenum' is on the '1' but not on 'of 3'.

Thanks
Ellen

quote:

---

Thanks, I did look at Magic Thumb as what I ideally wanted was for the giant image to pop up in a lightbox style.

---

Hi Ellen,
That's exactly what it does as per the demo link I posted, so I would check your installation and make sure you have the call to the css line added in your proddetail.php file



* Database Migrations and Conversions*
* ASP to PHP Cart Conversions*
*Contact Us*
*Buy The PHP Capture Card Plugin*
*Rate Our Services/View Our Feedback*

You might want to look at this thread https://www.ecommercetemplates.com/support/topic.asp?TOPIC_ID=111836

Marshall
CENLYT Productions - ms designs
Affordable Web Design
Custom Ecommerce Designs
Responsive Websites
Cenlyt.com

Ellen, to display Giant Images, Magic Slideshow is the very best option you will find : https://www.magictoolbox.com/magicslideshow/
The integration into Ecommerce Templates is easy-peezy : https://www.ecommercetemplates.com/help%2Fmagictoolbox.asp#magicslideshow
Quite cheap, a one time buy, good support, money well spent.

Here is the code I add to includes.php

// Activate Magic Slideshow on proddetail.php pages
$magictoolbox="MagicSlideshow";
$magictooloptions='data-options="preload:false; slide-duration:6000; effect:dissolve; effect-speed:600; selectors-style:bullets; selectors:bottom; fullscreen:true"';

Gary

Thank you very much for the suggestions guys. Not sure how I missed the lightbox style in the MagicThumb demo!

I stand by my point that the implementation of the 'extraimagenum' class is inconsistent though. I think it should be on both the '1' and the ' of 3' text as these would always be formatted the same, and it is missing from the latter of these. Current code:



and I think it should be:



I also don't see why the 'Enlarge Image' giant image link text has brackets hard coded around it, when none of the other ECT links have this. They can't be removed by using xxEnlrge paramter because the brackets are hard coded around the parameter in incproddetail.php. I would like to see these tidied up if possible.

I tried Gary's code from the thread https://www.ecommercetemplates.com/support/topic.asp?TOPIC_ID=111836 and it works great for the prev/next buttons, but what I'm trying to do is format the giant image link into a button and remove the brackets from around it.

Many thanks
Ellen

Ellen, I have the CSS to do all that. Will post it for you tomorrow.

Gary

The topic "detailimagenavigator colored PREV - NEXT buttons" has now been updated.
View here: https://www.ecommercetemplates.com/support/topic.asp?TOPIC_ID=111836

Ellen, the (Enlarge) and (Back to product) links are surrounded by brackets since, at present, they are deliberately coded to appear as plain text, not buttons.
I did try CSS that made them a button, but they just looked (yuck) with brackets.

Gary

Hi Ellen
I think you are absolutely right and for v7.2 I've added a new class as you suggested and set the brackets in CSS so they can be changed or removed...

span.extraimgnumof::before{
content:"(";
}
span.extraimgnumof::after{
content:")";
}

The v7.2 updater isn't officially released yet but there are very few changes in the necessary files...
vsadmin/inc/incproddetail.php
css/ectcart.css

And you can get a copy here...
https://www.ecommercetemplates.com/downloads.asp

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

Many thanks Vince & Gary, great result! I'm not in too much of a rush so might wait for the 7.2 official version. Thank you both for your help with this :)

Hi Vince,

I have now updated to the 7.2 version and great to see I can now remove the brackets from the 'enlarge image' link via CSS. However, when you click the link to view the larger image, the 'Back to product' link still has the brackets hard coded.

<span class="giantimgback">(<a class="ectlink" href="/Product" onclick="return hidegiantimage();">Back to product</a>)</span>

Any chance these could be converted to CSS as well please?

Thank you
Ellen

Hi Ellen
Good point and I've made that change now and it will be in the next updater.

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

Thanks very much Vince, much appreciated

Hi Ellen
These changes along with the changes for Royal Mail tracking have been uploaded with the v7.2 updater.

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater