Lightbox customer interface

Shopify Partner
494 0 2

Eileen, you also didn’t download the correct mootools components. You’ll need go back to http://mootools.net/download again and just to be sure select all components and re-download. Then replace the mootools.js in your store.

Jared Burns, CEO at Getsy (http://get.sy)
0 Likes
Shopify Partner
26 0 0

It looks like the tooltip javascript came with the original dropify theme, but I’ve removed it.

Eileen www.daisyfairbanks.com
0 Likes
Shopify Partner
26 0 0

ok, well that was a big part of the problem – their download page. I didn’t realize one had to go down the blackened list and check each item. not very intuitive. oops. so I have done this, downloaded, deleted and uploaded asset mootools again.

Eileen www.daisyfairbanks.com
0 Likes
Shopify Partner
494 0 2

Look like it’s working! Awesome!

Jared Burns, CEO at Getsy (http://get.sy)
0 Likes
Shopify Partner
26 0 0

Wow! That’s so nice. For some reason it didn’t work the first time I clicked in (after all the changes.) now when I’ve come back, its beautiful!!! Thank you so much Jared for your careful help. You’re the super-best!!

Eileen www.daisyfairbanks.com
0 Likes
Shopify Partner
26 0 0

Somehow I’ve lost the larger image on the product page. is it the if/else statement that I took out of product.liquid?

Eileen www.daisyfairbanks.com
0 Likes
Shopify Partner
494 0 2

Yep, it sure is. Your product page should look something like this:

{% for image in product.images %}
    {% if forloop.first %}
        <a href="{{ image | product_img_url: 'large' }}" rel="lightbox[images]" title="{{ product.title }}">
        <img src="{{ image | product_img_url: 'medium' }}" alt="{{ product.title }}" /></a>
    {% else %}
        <a href="{{ image | product_img_url: 'large' }}" rel="lightbox[images]" title="{{ product.title }}">
        <img src="{{ image | product_img_url: 'small' }}" alt="{{ product.title }}" /></a>
    {% endif %}
{% endfor %}
Jared Burns, CEO at Getsy (http://get.sy)
0 Likes
Shopify Partner
26 0 0

Best ever!!

Eileen www.daisyfairbanks.com
0 Likes
Tourist
21 0 1

Hey guys, I’ve tried implementing the Slimbox as instructed. It works brilliantly in Firefox, but not IE6 or Safari – it just goes into a standard blank page with the large image in the top left hand corner. Could someone help me out?

Here’s the code:


  <div id="product-images">
        {% case product.images.size %}
            {% when 1 %}  
            <div class="pimage">
                <a class="noborder" href="{{ product.featured_image | product_img_url: 'large' }}" rel="lightbox[images]" title="{{ product.title }}">{{ product.featured_image | product_img_url: 'medium' | img_tag }}</a>        
            </div>              
            {% else %}             
            {% for image in product.images %}
                <div id="pimage-{{forloop.index}}" class="pimage" {% if forloop.first %} style="display: block;" {% else %} style="display: none;" {% endif %}>        
                    <a class="noborder" href="{{ image | product_img_url: 'large' }}" rel="lightbox[images]" title="{{ product.title }}">{{ image | product_img_url: 'medium' | img_tag }}</a>        
                </div>   
            {% endfor %}           
            <div id="pimage-select">   
                {% for image in product.images %}
                    <a href="#" onmouseover="displayImage({{ forloop.index }}, 'product-images');">{{ forloop.index }}</a>
                {% endfor %}
            </div>
        {% endcase %}
    </div>                                                                                                        

I believe I’ve followed Jared’s writeup accurately, correctly calling the Javascript and CSS.

Really, this is much appreciated.

-----edit------

Here’s a link to a product page that I am trying to implement this on:
http://succour.myshopify.com/products/succour-issue-3-radio-eye

To view, the password is “SuccourMag123” (case-sensitive). I just want to keep the general public out for the moment, I don’t mind you guys having a sneaky-peek around ;)

0 Likes
Tourist
21 0 1

Interestingly enough, it just doesn’t seem to work through Vision locally – I uploaded everything and it seems to work fine… however it still seems slightly buggy in IE6 - the background isn’t transparent, but a solid black fill meaning the user can’t see the contents of the page behind it. Admittedly this could be caused by my only means of running IE6 is through my Mac via Codeweavers Crossover WINE app. Any ideas?

Somewhat on a tangent: I’m wondering if anyone can think of a way using the Mootools library to get the Next and Previous buttons to fade in when the mouse moves and fade out when the mouse is inactive. Currently this navigation is not that intuitive to new users. I guess I’ll ask on the Slimbox forum.

0 Likes