WordPress.org

Ready to get started?Download WordPress

Forums

Lightbox Plus Colorbox
Lightbox no longer working (17 posts)

  1. WillMitchell
    Member
    Posted 1 year ago #

    I have LBP installed on http://www.startupbros.com - but it seems to not be working after the latest WP update. Any fix to this?

    Thanks a lot,
    Will

    http://wordpress.org/extend/plugins/lightbox-plus/

  2. WillMitchell
    Member
    Posted 1 year ago #

    Still not working, I've been trying what I can find on this forum, but no luck. Any ideas?

    Thanks,
    Will

  3. tzdk
    Member
    Posted 1 year ago #

    Your site is going to hell is why :) And not just because it is a Thesis site.

    Well actually coming plugin update 2.5.6 has fixed some issues for me and you could try that now http://wordpress.org/extend/plugins/lightbox-plus/developers/ but not the only problem, or the most important.

    Too much going on:

    jQuery no. 1
    https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js

    jQuery no. 2
    http://www.startupbros.com/wp-content/thesis/boxes/parallax-slider/js/jquery-1.7.1.min.js?ver=1.2

    jQuery no. 3 (the real one from WP)
    http://www.startupbros.com/wp-includes/js/jquery/jquery.js?ver=1.8.3

    jQuery no. 4
    http://d3brdqgnb3d1f5.cloudfront.net/js/jquery-1.7.min.js

    jQuery no. 5
    http://s3.amazonaws.com/punchtab-static/js/jquery-1.7.min.js
    (Also loads 2 very old Modernizr )

    Then there are some not found/404 images and 2 font files.

    And 11 CSS Style sheets come in from Google Fonts, 11?

    Main issue is overload of jQuery. Sometimes you cant do a thing because lets say a video oembedded fire up an old jQuery internally. Cant do anything about it. Who and why think of that when pasting in a link to SlideShare or what ever? Using plugins, widget scripts, Cloudfront set up wrong, falls back to you. So you fix. If widget is crap find another.

    Another thing is Thesis theme. My details are shaky but unless you have dev. license you cant really update to latest version right? Does it matter if they keep the old one updated with latest fixes? Do they? As with jQuery conflicts it will bite you if ignore. Dont underestimate Thesis de$ire to get you on 2.0 stuff :) That goal is part of "new release" so you probably cant outsmart them forever by staying on old version. When it eventually fails and they wont update or help at all they will link you to 2.0 purchase page. How it works! Nothing of this seem to come directly from theme though but an issue for the future even so.

    I have heard version 2 is most laugable update in history of WordPress premium theme updates but that is another problem. Also and this is only gossip they should have new unique, incompatible, toying with everything, license too ;) Another little thing to check. Do that before paying anything.

  4. tzdk
    Member
    Posted 1 year ago #

    Perhaps more helpful.

    Use a local WordPress install, or online test site/domain.

    Install Thesis, then this plugin. Works or not? If not update to beta 2.5.6 If still not working it wont get better adding more plugins/scripts.

    Chances are it will work. If so you know where to look for troublemaker or you know where not to look. Better than nothing.

    Easy to point fingers at such a conflicting/bloated bundle but difficult to fix - or be 100% sure what cause issue, like with Lightbox not working. Much easier going the other way, start from blank then add 1 layer at a time. Test at each step so you know what should be avoided/fixed/replaced/reported to dev.

  5. WillMitchell
    Member
    Posted 1 year ago #

    @tzdk - You are the man! Thank you SO much for going through and dissecting this issue (and many more) for me! I can't tell you how much I appreciate it!

    Do you have paypal or something so I can tip you for that?!

    I am going to go through your suggestions now and reply in a bit with what I can get done.

    Thanks again so much,
    Will

  6. WillMitchell
    Member
    Posted 1 year ago #

    @tzdk - I spent the last couple hours working on it, and I think I resolved a large amount of the issues.

    If you have the time, I'd love for you to go through and rip me apart again :)

    Thanks so much either way,
    Will

  7. tzdk
    Member
    Posted 1 year ago #

    Looks better, but where did Lightbox Plus go? Was it ever there? Could have missed it. You have this instead http://www.socialgalleryplugin.com/ Marketing gone wrong, heh. There are more than one opinion on Lightboxes in general but Lightboxes with "Social"? No, no. World is not ready for this, humanity is wiser. If you are a step ahead future is dark!

    If forced to buy one I would check out FooBox http://getfoobox.com/ Mainly because dev. is good http://themergency.com/

    Speaking of bars there is a Lightbox_me Lightbox loading but unless wpSqueezebar mess up it should be confined to bar content. But is a minimal Lightbox script http://buckwilson.me/lightboxme/ so that is something to look out for.

    Well not all good:

    Cloudfront still deliver

    http://d3brdqgnb3d1f5.cloudfront.net/js/jquery-1.7.min.js

    but guess you cant do much about it.

    They also load 2 identical files - or almost identical, one is http, the other https. So instead of checking what your site use and require? they just load both?

    http://d3brdqgnb3d1f5.cloudfront.net/js/assets/all.packed.ac0ac397.js
    https://d3brdqgnb3d1f5.cloudfront.net/js/assets/all.packed.ac0ac397.js

    200kb each.

    I assume it comes in from embedded scripts/widgets, is 3rd party so you cant really fix it.

    One thing I am 99% sure you can fix and that is jQuery from Google

    https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js

    I think it comes from your optimizer script - but is hidden. Check this http://visualwebsiteoptimizer.com/knowledge/what-is-the-difference-between-sync-code-and-async-code-of-vwo/

    If you have jQuery version 1.4.2 or later installed on the page then you may set this variable to true. The variable use_existing_jquery tells the VWO tracking code whether it should the jQuery present on the page or it should request the jQuery version of VWO library from our CDN.

    And in your code there is this

    <!-- Start Visual Website Optimizer Asynchronous Code -->
    <script type='text/javascript'>
    var _vwo_code=(function(){
    var account_id=35166,
    settings_tolerance=2000,
    library_tolerance=1500,
    use_existing_jquery=false,

    So you need to change "use_existing_jquery" to "=true" ? I think so.

    Also that service is not the best you can do to optimize a WordPress site. They do other stuff http://visualwebsiteoptimizer.com/features.php but try to come off as also handling dirty file loading. Expect them to have no clue.

    If you look at source code via Firefox you see this in glowing RED

    <?php do_action( 'wpe_gce_head' ); ?>

    means it highly suggest it is wrong.

    Why is because it just sits there in between head tags as if it was pure HTML. Is pure PHP and that wont work. Also do_action http://codex.wordpress.org/Function_Reference/do_action make no sense.

    You should have this in a functions.php file, like

    function wp_gce_head() {
    do_action ( 'wpe_gce_head' );
    }

    And then you can insert that action hook in to header.php or where ever

    <?php wp_gce_head(); ?>

    Will spit out what action you have applied to your newly created hook, also via functions.php or other php file. add_action does this http://codex.wordpress.org/Function_Reference/add_action

    add_action ('wpe_gce_head', 'my_new_function');
    function my_new_function {
    echo 'my_new_function is spit out where wp_gce_head is injected';
    }

    <?php wp_gce_head(); ?> will then echo that line.

    If not correct it is not worse than what you have now ;)

  8. WillMitchell
    Member
    Posted 1 year ago #

    tzdk - youre the man!

    I took off all the lightboxes and installed FooBox as you suggested.

    I also removed the gce_head code, and set the VWO jquery setting to "true"

    Would love to get your further feedback, I think I'm doing alright but I'm sure you'll find something :)

    If not, thank you for everything! You've been a huge help to me!

    Thanks,
    Will

  9. tzdk
    Member
    Posted 1 year ago #

    You are slowest optimizer I have seen in 2013. But yes you can always find something. 2 things I think you should fix:

    In Thesis CSS file http://www.startupbros.com/wp-content/thesis/skins/marketers-delight1/css.css scroll down to line 484 where "/* reset header menu */" starts. This line

    ul.header-menu ul.sub-menu { background: none; border-color: rgba(255, 255, 255, .2); border-width: 0 0 0 1px; margin-left: 24px; padding: 0; position: static; visibility: visible; $remove_shadow; }

    ends with $remove_shadow and is not CSS code. Must be breakage in Thesis machine.

    At line 498 in section below there it is again.

    You dont seem to use this code so do not notice. But you will when you do.

    Then a good one. The cloudflare jquery 1.7 is still there but loads from a script you have hidden in a sidebar widget

    Try this

    #text-9 {
    background: red;
    height: 200px;
    }

    And there it is, red spot under search widget. "Punchtab" must ring a bell?

    <div id="text-9" class="widget widget_text">			<div class="textwidget"><script charset="utf-8" type="text/javascript">
      var _ptq = _ptq || [];
      var _punchtab_settings = {
        key: "684c4022f6ab8d7a0acc6ae67da7ea9a",
        bar: {}
      };
    
      (function() {
        var pt = document.createElement('script'); pt.type = 'text/javascript'; pt.async = true;
        pt.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'static.punchtab.com/js/pt.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(pt, s);
      })();
    </script></div>
    		</div>

    I have no clue what it is. But their code from external site calls no. 4 jQuery from previous post. If you check in Chrome you can see refererer is

    http://www.punchtab.com/mast/connect2?key=684c4022f6ab8d7a0acc6ae67da7ea9a&version=1&language=&xdm_e=http%3A%2F%2Fwww.startupbros.com&xdm_c=default1632&xdm_p=1

    They are not too smart then. Or did you not follow instructions on how to use their stuff on a self-hosted WP site? One or the other.

    Other than this I dont think there is anything weird. Tons of connections to 3rd party sites but it seems fast enough. Gzip is on. Might want to check with Thesis forum/support about non-CSS code in CSS file.

    I was wrong. Your images are not optimized at all. Try run page speed in Chrome. The cat one for example. Is nearly 700kb - almost seem like a jpeg saved in a strange way. In PS go with "Save for web..." or what they call it. There tools and online services for this. JPEGmini, tinyPNG and more. What ever it can be like 50kb, 100kb tops. So you should or could process images offline, try to keep WordPress from resizing them. Make images that fit like a glove - so they are inserted as "full". A bit funky to mess with. Can set "full" to be max width with no sidebar, "large" to max width with sidebar. Get headache about this but it means quite a bit for performance. If 80% perfect or 90% is of no concern but all wrong is crap.

    Image with books

    1.024px × 682px (scaled to 600px × 400px)

    That would annoy me. Should be 600x400. Size for that one not too crazy. This is where you could insert "large" which would be 600x400 = max size with sidebar. Or you can make own image category/format/size. There are plugins for this. Cant just change, nothing will happen. Must regenereat thumbnails, everything not full is a thumbnail. Deal with it :) I never understand that concept.

    http://wordpress.org/extend/plugins/ewww-image-optimizer/ is brilliant and automate much of this. IF it works on your server, test.

  10. tzdk
    Member
    Posted 1 year ago #

    And your logo

    1.177px × 353px (scaled to 347px × 104px)

    Associated text: How To Get the Perfect Logo Designed

    Hmm.

    Especially for static images like logo you should optimize. Almost dumb not to. Logo is now 75kb but if you resize to 357x104 or so - plus run it through tinyPNG it becomes 14.3kb. 72% smaller than my resized image site says. Good deal.

    Static is one time only, normal image handling can be automated - in one way or another. EWWW is really nifty. If on shared server keep finger off better compression levels though. Things can break. I have done it, site does not go down but PHP warnings go crazy (mysql server has gone away...) and such. Default compression is decent, like WP-Smushit I think. High level is spectacular for strong servers not weak shared. Also host can get very annoyed so take it easy.

  11. WillMitchell
    Member
    Posted 1 year ago #

    Hi again tzdk -

    As usual, thanks so much! I can't express enough thanks, really really appreciate the help. It's so hard to get quality advice like you give.

    I went through an slowly implemented everything you talked about here.

    I re-did my logo and brought it from 75kb to 11kb with absolutely no drop in quality. Awesome!

    I took out that line of the css.css file that was off.

    I couldn't get EWWW to work on my server, but I installed Smush.it and ran it on all past photos. I'm also going to work on resizing new photos to correct sizes, and will work on resizing past photos as I can.

    Also completely killed off PunchTab, resulting in an increase in speed and time on site ;)

    If you have the time, do you see anything else that could be improved upon?

    Thanks a ton either way,
    Will

  12. tzdk
    Member
    Posted 1 year ago #

    EWWW is a bit temperamental. I just got it to work with no PHP warnings, or rather dev did. Can try again if you did not test latest version. Smush-it has new dev so guess that does same job.

    Site is ok I think but that button at the top? Is a bit screwed. Check this http://i.imgur.com/TREMk45.png I like that better.

    Is tricky as CSS for button come from plugin using Twitter bootstrap CSS, then adds some stuff of its own and your theme CSS is also part of it.

    This is current code or some of it for "Get it now" button, the element I changed

    #wsb input[type="submit"] {
        font-size: 16px;
        height: 26px;
        line-height: 10px !important;
    }

    And this is what I used for image.

    #wsb input[type="submit"] {
    	font-size: 16px;
    	height: 32px;
    	margin-top: -3px;
    	padding-top: 6px;
    	line-height: 21px; /* For Chrome? */
    }
    
    .btn:hover {
    	background-position: 0 -30px; /* Is now 0 -15px */
    }

    Not sure how they can know value of btn:hover as it will depend on button values. Now only 50% of button get new background on hover. Looks better with 100%. But check image and fiddle.

    Test in all browser, there can be small differences and what I did might now be correct. Need to improve button somehow though.

    Should probably be more specific with the background trick. There is

    .button.red:hover, input[type="submit"]:hover, #cancel-comment-reply-link:hover

    already and it seem to work as well. Can add more in front like "#wsb" so it only works on THAT button. You figure it out...

  13. WillMitchell
    Member
    Posted 1 year ago #

    Awesome, I implemented that. It looks perfect, you rock!

    Would love any other advice you could give, or maybe let me know if you do freelancing for the future :-D

  14. tzdk
    Member
    Posted 1 year ago #

    You should look for best tools/plugins/themes and sources of valid current info. Give and take a bit as this is not exact science.

    All these issues come from you skipping steps not from lack of freelancer. They should only do what you cant possibly do your self, like adv. custom coding of what ever. Not this easy CSS/JS/site optimization stuff. Comes with self-hosting status so dig in :)

  15. WillMitchell
    Member
    Posted 1 year ago #

    Oh I'm not asking for an easy out, I know I need to know these things.

    I was more asking if you were a WordPress Dev. If you don't mind sharing, I'd love to know how to troubleshoot these things on my own. Right now, I'm sitting with a debug log, firebug, and some basic html/css knowledge. Is there any article you could point me to or something?

    Thanks a ton for your help again, I can barely get this type of quality out of people I pay for it! Seriously appreciate it.

    Will

  16. tzdk
    Member
    Posted 1 year ago #

    Well that is plenty to start with.

    No I am far from a WordPress Dev. but I also have standards for what make a dev ;) I have seen a dev. ask "Is it reasonable that I should use Firebug for this???", he was in a hurry, you know "client work". Others are geniuses. I do not know what title mean.

    You can use http://www.webpagetest.org/ for optimization tests. And Chrome Page Speed, Yslow. Pingdom for super fast tests http://tools.pingdom.com/fpt/

    Find some browser tools that can make things faster. View Dependencies for Firefox is one https://addons.mozilla.org/en-US/firefox/addon/view-dependencies/ A bit broken right now as it does not show file sizes but click,click and there you have a list of every file loaded. From images to jQuery. Troubleshooting is to look at screen :)

    Chrome dev. tools can do lots of things http://discover-devtools.codeschool.com/ tells you this is "light" troubleshooting you want to do. Can go much deeper. But then easy becomes debatable.

    Firebug still better for HTML/CSS - will be the case until Firefox build in tools are done. But use either one, or both.

    For CSS you can check these

    http://caniuse.com/
    http://css3please.com/
    http://csslint.net/ (click arrow, uncheck all boxes, then LINT)
    http://css-tricks.com/
    http://www.impressivewebs.com/
    http://www.css3files.com/
    http://webplatformtools.org/
    http://webdevchecklist.com/

    About WordPress just use Codex. If you dont know what hooks/filters are this is good intro

    http://wp.tutsplus.com/tutorials/the-beginners-guide-to-wordpress-actions-and-filters/
    http://www.kathyisawesome.com/455/wordpress-filters-fundamentals/
    http://www.kathyisawesome.com/412/thematic-hooks-and-functions/

    Once you get that rest comes easier. Themes like Thesis will have own termionology so dont get hung up on hook/filter names. You only need to get how it works. Is important because used big time by themes/plugins. Also kind of make it easier to understand how PHP spit out site. Can be big mess of code coming from all directions.

    Also you can look for plugins to help, like

    http://wordpress.org/extend/plugins/error-log-monitor/
    http://wordpress.org/extend/plugins/log-deprecated-notices
    http://wordpress.org/extend/plugins/p3-profiler
    http://www.wordpress.org/extend/plugins/duplicator
    http://www.wordpress.org/extend/plugins/plugin-notes
    http://wordpress.org/extend/plugins/wordpress-database-reset
    http://wordpress.org/extend/plugins/demo-data-creator
    http://wordpress.org/extend/plugins/config-constants/

    There are many more, like Debug Bar + add-ons for it.

    Some is mainly for local test installs, or online for that matter. You should not reset live site! You should also never test on real site. Go crazy on temporary test sites. Take few minutes to set up.

    Always good to have real time view of PHP memory usage and MySql requests

    http://wordpress.org/extend/plugins/info/

    Go for big wins like images. And what about your host? Site seem to run nginx so may be you can tune that a bit. HTML5Boilerplate have "curated" setups for servers like nginx https://github.com/h5bp/server-configs/tree/master/nginx But check with host, they have forum? Then see what people with SAME account type as yours are using with WordPress. May be there are hints about caching pluigns.

    Not much point in optimizing site if it gets dragged down by wrong setup. You should be able to check via host.

    Avoid messing with JS/jQuery like minifying or moving them to footer. Can be done and is also easy but not for you right now :)

    Be very sceptical about plugins. Not only test them but research as much as you can. Often you can find signs that a plugin or plugin dev. is not approved. You can easily run 100 plugins, no benefit in holding back - but they must be good! Ignore top lists, silly stars and download counter, is not necessarily anything to go by.

    Sadly it is not mandatory for devs. to list which JS/jQuery/CSS file plugin loads. I would trade "Review" tab for that any day. I think humanity will win. But not here so you do it. Always check this. Prevent conflicts and make you aware. May be opposite dev. who still use 2 year old version of what ever.

    Not so difficult to throw out links but not always a big help as 1. You need to use them correctly and 2. If output requires interpretation you might get it wrong and then things go to hell. Can happen with something as simple as a HTML validator check. Some think they MUST have no errors. Like some think they must score 100 out of 100 on speed tests. Rarely possible without cheating, but you can and should get close.

    Be careful about micro-optimization though. If you get obsessed with number juggling you probably end up with a site that seems to be made in Notepad. Rip stuff out and numbers improve. Fantastic, just like some fast responsive sites does, heh. Big ass web font though! Very boring and weird logic. But evaluate input vs. output. There are ways to allow many more script to load without actually impacting performance. Look up conditional tags http://codex.wordpress.org/Conditional_Tags. Is another huge part of WordPress you should get. Simple logic, if X is only used on Y page then only load scripts on Y. Win. Some plugins do this already. There is more to this but pretty important to understand idea behind it. Depends on site but as a rule go with intelligent plugins that load scripts conditionally. Then you dont have to mess with things.

  17. WillMitchell
    Member
    Posted 1 year ago #

    Awesome information here, and super helpful. Since reading, I've signed up with Pingdom and started using all those tools above. Through you, I've figured out that my site was having conflicts with the CDN and image optimization (not to mention your great tips on image scaling pre-upload).

    Really valuable, I really can't thank you enough. I definitely owe you a drink!

    I'll respond to this thread as I get things working, but would love to keep in touch with you either way.

    Thanks a ton!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.