• Shane

    (@shaneoriordan)


    Sorry, see I was supposed to post this here!

    Hi there,

    How can I add an Imagetrail effect to NextGen Gallery?

    I have seen this effect several places, i.e.,
    http://cars.donedeal.ie/find/cars/for-sale/Ireland/
    however none are WordPress installations.

    Is it possible/easy in incorporate?
    I have downloaded the JS script for this effect and the mouseover codes for this effect. Where would I add in NextGen Gallery?

    Many thanks

    Shane

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter Shane

    (@shaneoriordan)

    My site is http://www.dinahdesigns.com

    Here is my script

    in gallery.php added
    <textarea rows=”2″ cols=”40″>
    <script type=”text/javascript” src=”http://www.dinahdesigns.com/wp-content/plugins/nextgen-gallery/js/imagetrail.js”></script&gt;
    </textarea>
    and changed image attributes as follows

    <textarea rows=”5″ cols=”40″>
    <img title=”<?php echo $image->alttext ?>” alt=”<?php echo $image->alttext ?>” src=”<?php echo $image->thumbnailURL ?>” <?php echo $image->size ?> onmouseover=”showtrail(‘<?php echo $image->imageURL ?>”,'<?php echo $image->alttext ?>’,'<?php echo $image->alttext ?>’,’3.0000′,’0′,’1′,180);”
    onmouseout=”hidetrail();” />
    </textarea>

    here is the imagetrail.js
    <textarea rows=”25″ cols=”40″>
    /*
    Simple Image Trail script- By JavaScriptKit.com
    Visit http://www.javascriptkit.com for this script and more
    This notice must stay intact
    */

    var offsetfrommouse=[25,-150] //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
    var displayduration=0 //duration in seconds image should remain visible. 0 for always.

    function gettrailobj(){
    if (document.getElementById)
    return document.getElementById(“trailimageid”).style
    else if (document.all)
    return document.all.trailimagid.style
    }

    function getadobj(){
    if (document.getElementById) {
    if (document.getElementById(“rightcolads”)) {
    return document.getElementById(“rightcolads”).style
    }
    } else if (document.all) {
    if(document.all.rightcolads) {
    return document.all.rightcolads.style
    }
    }
    }

    function getadobj2(){
    if (document.getElementById) {
    if (document.getElementById(“rectanglead”)) {
    return document.getElementById(“rectanglead”).style
    }
    } else if (document.all) {
    if(document.all.rectanglead) {
    return document.all.rectanglead.style
    }
    }
    }

    function getadobj3(){
    if (document.getElementById) {
    if (document.getElementById(“halfbannerad”)) {
    return document.getElementById(“halfbannerad”).style
    }
    } else if (document.all) {
    if(document.all.halfbannerad) {
    return document.all.halfbannerad.style
    }
    }
    }

    function gettrailobjnostyle(){
    if (document.getElementById)
    return document.getElementById(“trailimageid”)
    else if (document.all)
    return document.all.trailimagid
    }
    function truebody(){
    return (!window.opera && document.compatMode && document.compatMode!=”BackCompat”)? document.documentElement : document.body
    }

    function hidetrail(){
    gettrailobj().innerHTML = ” “;
    gettrailobj().display=”none”;
    document.onmousemove=””;
    gettrailobj().left=”-800px”;

    var righthandads = getadobj();
    if(righthandads) {
    righthandads.visibility=”visible”;
    }

    var ad2 = getadobj2();
    if(ad2) {
    ad2.visibility=”visible”;
    }

    var ad3 = getadobj3();
    if(ad3) {
    ad3.visibility=”visible”;
    }
    }

    function followmouse(e){
    var xcoord=offsetfrommouse[0]
    var ycoord=offsetfrommouse[1]
    if (typeof e != “undefined”){
    xcoord+=e.pageX
    ycoord+=e.pageY
    }
    else if (typeof window.event !=”undefined”){
    xcoord+=truebody().scrollLeft+event.clientX
    ycoord+=truebody().scrollTop+event.clientY
    }
    var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
    var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)

    gettrailobj().left=xcoord+”px”
    gettrailobj().top=ycoord+”px”
    }
    function showtrail(imagename,title){

    var trailobj = gettrailobjnostyle();
    if (trailobj == null){
    var divTag = document.createElement(‘div’);
    divTag.id = ‘trailimageid’;
    document.body.appendChild(divTag);
    }

    var righthandads = getadobj();
    if(righthandads) {
    righthandads.visibility=”hidden”;
    }

    var ad2 = getadobj2();
    if(ad2) {
    ad2.visibility=”hidden”;
    }

    var ad3 = getadobj3();
    if(ad3) {
    ad3.visibility=”hidden”;
    }

    document.onmousemove=followmouse;

    newHTML = ‘<div style=”padding: 0px 5px 5px 5px; background-color: #FFF; border: 1px solid #888;”>’;
    if (title == undefined)
    {
    title = ‘Full Size Photo’;
    }
    newHTML = newHTML + ‘<h2>’ + title + ‘</h2>’;
    newHTML = newHTML + ‘<div align=”center” style=”padding: 2px;” class=”photo”>’;
    newHTML = newHTML + ‘<img src=”‘ + imagename + ‘” border=”0″/></div>’;

    newHTML = newHTML + ‘</div>’;
    gettrailobjnostyle().innerHTML = newHTML;
    gettrailobj().display=”inline”;
    document.onclick=hidetrail;
    }
    </textarea>

    Thread Starter Shane

    (@shaneoriordan)

    Bump

    Ho about a custom jQuery function to find all <a> tags whose parent div have the class .ngg-gallery-thumbnail and append the appropriate mouseover/mouseout functions to those tags?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Imagetrail effect for NextGen Gallery’ is closed to new replies.