Larger Image Popup For Boonex Photos

This will popup a larger image when hovering on a photo thumbnail.  This makes use of the built in float_info function of Dolphin 7.  These two files are replaced, and I highly recommend renaming them before uploading the new files, instead of just overwriting them.  In the unlikely event you have these two files in a custom template, you'll need to replace those as well.  In the case of these files existing within a custom template, I would highly recommend you pay close attention to any file differences between your template's version and standard D 7.0.9 files.

Files replaced, and included in the attached zip file:

modules/boonex/photos/templates/base/thumb.html

templates/base/scripts/BxBaseSearchResultSharedMedia.php

Rename them to something like this before uploading the new files:

modules/boonex/photos/templates/base/thumb.html.D709

templates/base/scripts/BxBaseSearchResultSharedMedia.php.D709

Please note, that according to an incredibly astute observation by another member of this site, overwriting the changed files during a future update, will cause this modification to cease to function.  That is something you'll just have to deal with.

This seems to work in Firefox, IE, Chrome, Opera, and Safari. 

Note about thumb.html:

This code in thumb.html <img style="display:none;" src="__pic__"/> serves no other purpose, but to preload all the larger images, at the sacrifice of a somewhat slower page load.

Preloading the images will allow the larger photo to popup almost instantly.  Removing, or commenting out this line of code, will allow for a faster page load, at the expense of load times of the larger image popup.

Until I get tired of looking at it, a demo can be observed HERE.

DISCLAIMER:

As always, use this at your own risk.  I do not expect that these changes will cause your entire site to be sucked into a black hole, but you just never know with Dolphin.

Code Changes inBxBaseSearchResultSharedMedia.php  If you have a custom version of this file, you can make this change manually.... just add the code in red.

    function _getSharedThumb ($iId, $sFileLink, $sHash = '') {
        $sIdent = strlen($sHash) > 0 ? $sHash : $iId;
        $aUnit = array(
            'imgUrl' => $this->getImgUrl($sIdent),
            'spacer' => getTemplateIcon('spacer.gif'),
'pic' => BX_DOL_URL_ROOT . 'm/photos/get_image/file/' . $sHash . '.jpg',
'photo' => '<img '.'src="'. BX_DOL_URL_ROOT . 'm/photos/get_image/file/' . $sHash . '.jpg'.' "/>',
            'fileLink' => $sFileLink,
            'bx_if:admin' => array(
                'condition' => $this->bAdminMode,
                'content' => array('id' => $iId)
            )
        );
        return $this->oModule->_oTemplate->parseHtmlByName('thumb.html', $aUnit);
    }

Existing code in thumb:

<div class="sys_file_search_pic bx_photos_file_search_pic" style="background-image: url('__imgUrl__');">

    <bx_if:admin>

        <div class="bx_sys_unit_checkbox">

            <input type="checkbox" name="entry[]" value="__id__"/>

        </div>

    </bx_if:admin>

    <a class="preview" href="__fileLink__" rel="__pic__"><img src="__spacer__" alt="Click to leave comments and vote on this photo"></a>
</div>

New code:

<div  class="sys_file_search_pic bx_photos_file_search_pic"  style="background-image: url('__imgUrl__');">
<img style="display:none;" src="__pic__"/>
    <bx_if:admin>

        <div class="bx_sys_unit_checkbox">

            <input type="checkbox" name="entry[]" value="__id__"/>

        </div>

    </bx_if:admin>

    <a class="preview" href="__fileLink__"><img src="__spacer__" float_info='__photo__' ></a>
<style>
#float_info img {
width:480px !important;
display:block;
}

#float_info {
max-width: 500px;
}

</style>
</div>

Alternate version of thumb.html with css that limits both the width and height of the popup image.  You may alter the css to suit your needs

<div  class="sys_file_search_pic bx_photos_file_search_pic"  style="background-image: url('__imgUrl__');">
<img style="display:none;" src="__pic__"/>
    <bx_if:admin>

        <div class="bx_sys_unit_checkbox">

            <input type="checkbox" name="entry[]" value="__id__"/>

        </div>

    </bx_if:admin>

    <a class="preview" href="__fileLink__"><img src="__spacer__" float_info='__photo__' ></a>
<style>
#float_info img {
max-width:480px !important;
max-height:360px !important;

display:block;
}

#float_info {
max-width: 500px;
}

</style>
</div>

nice one HL! ... but it is better do not edit files inside the "templates/base" folders ...

 RE:

 Yeah... I know, but  that way I don't have to change every single template, and I keep a good record of my changes.

For those of you that agree with misterpooper

In your templates/tmpl_xxxx/scripts/BxTemplSearchResultSharedMedia.php

<?php

require_once( BX_DIRECTORY_PATH_BASE . 'scripts/BxBaseSearchResultSharedMedia.php' );

class BxTemplSearchResultSharedMedia extends BxBaseSearchResultSharedMedia {
    function BxTemplSearchResultSharedMedia ($sModuleClass = '') {
        parent::BxBaseSearchResultSharedMedia($sModuleClass);
    }

    function _getSharedThumb ($iId, $sFileLink, $sHash = '') {
        $sIdent = strlen($sHash) > 0 ? $sHash : $iId;
        $aUnit = array(
            'imgUrl' => $this->getImgUrl($sIdent),
            'spacer' => getTemplateIcon('spacer.gif'),
            'pic' => BX_DOL_URL_ROOT . 'm/photos/get_image/file/' . $sHash . '.jpg',
            'photo' => '<img '.'src="'. BX_DOL_URL_ROOT . 'm/photos/get_image/file/' . $sHash . '.jpg'.' "/>',
            'fileLink' => $sFileLink,
            'bx_if:admin' => array(
                'condition' => $this->bAdminMode,
                'content' => array('id' => $iId)
            )
        );
        return $this->oModule->_oTemplate->parseHtmlByName('thumb.html', $aUnit);
    }
}

?>

Add the code in red. You'll have to do this for every template.  You may also put a copy of thumb.html in modules/boonex/photos/templates/tmpl_xxxx, if you are squeamish about replacing core files.  You will also have to do this for every template you use.

Nice share.  Is this the same modification you had a while ago?.

No.... the last one used a separate jquery plugin, and had some js conflicts that I just couldn't resolve.  There were also a few nagging issues with image sizing.  This one uses a jquery plugin that is already used throughout Dolphin, albeit only for help text, and is really light weight.... if you don't count preloading images, that is.  It would probably look a little better with image fade-in transitions on hover, but then you'd have to modify the float_info.js plugin.

I tried to do this by only modifying thumb.html, but you would need an img tag inside a parent img tag, and that just didn't want to parse correctly.... hence the changes to BxBaseSearchResultSharedMedia.php

Noticed it after downloading lol, somehow mine doesn't show the text
alt="Click to leave comments and vote on this photo

The files I uploaded here don't have that.  It's in thumb.html like this:

float_info='__photo__ Some text here'

This is great....thanks for sharing! A fading transition would be perfect. I've tired a few different things, so far no luck.

got it 10/4 lol what's holding you back from adding some fancy fade-in-out effects? you can include the float_info.js to the thumb.html file  that way the changes won't be side wide

 RE:

 You can't call jquery.float_info.js from thumb.html, else you'll be calling it for every thumbnail on the page.... besides, it's called once already.  You can add a fade in transition to inc/js/jquery.float_info.js, but it will affect the way the help tips pop up site-wide. Nevertheless, a fade in of 500 milliseconds seems tolerable

in the file:

inc/js/jquery.float_info.js

change .show();  to .fadeIn(500); as shown below in red

/*
* Floating description plugin.
* Just add float_info attribute to your element.
*/

$(document).ready(function() {
   
    // if float_info element doesn't exist
    if (!$('#float_info').length) {
       
        //create the element in the root of body
        $('body').prepend(
            $('<div id="float_info"></div>').css({
                display: 'none',
                position: 'absolute',
                zIndex: 1010
            })
        );
    }
   
    var $tip = $('#float_info');
   
    // passive listen of mouse moves
    $('body').mousemove(function(e) {
        var $t = $(e.target);
       
        if ($t.attr('float_info')) {
            var p = getPositionData($tip[0], e);
           
            $tip
                .css({
                    left: p.posX,
                    top:  p.posY
                })
                .html($t.attr('float_info'))
                .fadeIn(500);
        } else
            $tip.hide();
    });
});

Thanks Houston .. works a treat .. any idea how to apply this to the small thumb nails in the profile photos scroll unit ?

happy thoughts

Thank you a lot. However, I decided to limit only the height, and also, if I use height/width together, some photos are resized and look weird (distorted).

Also, I've noticed the smaller pic (150x150) is not resized upwards on your Photos Home. It is enlarging mine. Grrr? :)

 RE:

 Sounds like you are using the 'height' selector in your css.  You need to use 'max-height'.

Yes, that was it. How embarrassing. 

For some reason Google Chrome is not pre-loading the pics. Firefox does...

Great enhancement and it is very much what I was looking for.

One issue is that the floating image is often too high to see it's top. Can that be fixed?

Rob

That's why I used max-height instead of max-width, lol.