WordPress.org

Ready to get started?Download WordPress

Forums

WP Supersized
Request: toggle thumb tray on hover (2 posts)

  1. memelab
    Member
    Posted 2 years ago #

    I love your plugin! thanks :)

    I'd love to achieve something like this: http://magethemes.net/themes/mgu/ with it.

    in particular, I'm keen to have the thumbs tray revealed when I hover over its region, rather than use the toggle tray button, whilst hiding the caption, play button, tray toggle, progress bar. I've found a post which might help in a comment but I haven't cracked it yet :)

    I can hide the unwanted elements, but the hover has me stumped!

    any suggestions welcome! TIA, Tim

    http://wordpress.org/extend/plugins/wp-supersized/

  2. memelab
    Member
    Posted 2 years ago #

    hokay.. i figured it out (more or less!)..

    step one: download the pre-minified code from https://github.com/buildinternet/supersized
    place the file supersized.shutter.js next to the other wp-supersized/theme files

    in WPSupersized.php:

    1. register the new file as WPSupersized_theme_original_js around line 77
    2. enqueue it around line 175 (i'm only using the slideshow option)

    jump into supersized.shutter.js

    1. enter the following under /* Thumbnail Tray line 35
    $(vars.thumb_trigger).fadeTo('slow', 0 );
    
    $(vars.thumb_trigger).hover(
    	function(){ //mouse over
    		var $this=jQuery(this);
    		$this.stop().fadeTo("slow", 1);
    },
    function(){ //mouse out
    	var $this=jQuery(this);
    	$this.stop().fadeTo("slow", 0 );
    	}
    );

    in WPSupersize.php
    wrap the #thumb-tray with another div:

    <div id="thumb-trigger">
    	<div id="thumb-tray" class="load-item">
        </div>
    </div>

    in the css:
    #controls-wrapper {display: none}
    replace #thumb-tray with:

    #thumb-trigger{ position:fixed; z-index:3; bottom:0; left:0;  height: 145px; width:100%; overflow:hidden; text-align:center; }
    #thumb-tray{ background: rgba(0,0,0,0.8);/*url(../img/bg-black.png);*/ -moz-box-shadow: 0px 0px 4px #000; -webkit-box-shadow: 0px 0px 4px #000; box-shadow: 0px 0px 4px #000; }

    more or less.. hope thats a trail to sniff around :)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic