HELP WITH BLENDING CODE - Post ID 246387

User 2747726 Photo


Registered User
27 posts

Ya I've been back and forth...not really resolving it.
User 187934 Photo


Senior Advisor
18,836 posts
Online Now

So Matthew what exactly are you after? The zoom works but I see you have two things going. One on hover and one on click. I think that's overkill.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2747726 Photo


Registered User
27 posts

Thanks all,
My main issue is getting the thumbnail image to center align beneath the h3. As you see in the example page I published, the zoom pushes all the way to the left. Yes, the magic zoom itself is working just fine.

User 187934 Photo


Senior Advisor
18,836 posts
Online Now

Line 18 of the magiczoomplus.css
.MagicZoomPlus, .MagicZoomPlus:hover {
cursor: url("graphics/zoomin.cur"), pointer;
direction: ltr;
display: inline-block;
font-size: 0 !important;
line-height: 100% !important;
max-width: 100%;
outline: 0 none !important;
margin-left:18%;// add this
}
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2747726 Photo


Registered User
27 posts

Ok, Thanks, I'm going to try that now.

If I do that, i should probably create a second style sheet so that I retain the original settings? otherwise, it will do the 18% on all other instances of the mz on other pages where I may not want that...is that a reasonable thought?
User 187934 Photo


Senior Advisor
18,836 posts
Online Now

Test it by adding it to just the head of that page below the other style sheets.
<style>
.MagicZoomPlus, .MagicZoomPlus:hover {
margin-left:18%;
}
</style>

I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2747726 Photo


Registered User
27 posts

It seems to work a bit better.
User 187934 Photo


Senior Advisor
18,836 posts
Online Now

Try this instead.
Remove the previous edit and create a custom.css below your other css style sheet links add the below code.
.row .coffee-span-4 {
text-align: center;
}
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2747726 Photo


Registered User
27 posts

I finally figured it out after tinkering around for a LONG while. A second style sheet is not needed.

So here's what it looks like to get a magiczoomplus image to center align within a div using a RLM layout.

<div class="coffee-span-4">
<h3 class="heading-4">Heading Level 3</h3>
<span class="text-element text-4"> <a href="images/BIG.jpg" class="MagicZoomPlus" title="stuff" rel="zoom-width:500px; zoom-height:500px"><img src="images/SML.jpg"></a><span class="text-text-2"><span class="text-text-3"><br>$&nbsp;</span><span class="text-text-4">22.90</span></span>
</span>
</div>

Avoid inserting the code in the h1,h2,h3 directly, add the text element, which you can do in RLM when you're designing it. I really struggled with this for quite a while, man glad that's over.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.