Jump to content


Photo
- - - - -

Adding non WP script to PL


  • Please log in to reply
16 replies to this topic

#1 sheilahoff

sheilahoff

    Advocate

  • Members

  • 464 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 25 April 2014 - 04:35 PM

I'm posting in Off Topic because I understand that PL staff is not here to help with this but I'm hoping someone MIGHT be able to shed light on how to do this....

 

I have a client who is stuck on wanting a flipbook exactly like this one: http://www.leggiadro.com/lookbook. I viewed the source and got to the files necessary here: http://tympanus.net/...t-flip-plugin/ But it’s not a WP plug-in and honestly it feels over my head. I just found that author has updated and has open comments so I have also posted there to ask about a tutorial but it wouldn't be PL specific. http://tympanus.net/...kblock-revised/

 

I spent a ton of time exploring 3d flipbooks an CodeCanyon and found a couple that MIGHT work. I have emails in to them. I’m just not sure it’s worth buying (even at only $30) if it’s not exactly right. Client is VERY particular. Would rather make this one work if I can get help.

 

Here's what I've done so far:

1) uploaded their files to a folder and they can be viewed at http://sheila.wpstag...loads/BookBlock

2) Added 2 sample images to media library

3) added this code to a text block with links to the 2 images per their instructions including added custom CSS class bb-item.

 
<div align="center"><div id="bb-bookblock" class="bb-bookblock" 
    <div class="bb-item">
        <!-- custom content -->
<img src=http://sheila.wpstagecoach.com/wp-content/uploads/2014/04/big-book-Jeanne.jpg>
    </div>
    <div class="bb-item">
    <img src= http://sheila.wpstagecoach.com/wp-content/uploads/2014/04/big-book-Adam.jpg>
    </div>
    <div class="bb-item">
        <!-- ... -->
    </div>
    <div class="bb-item">
        <!-- ... -->
    </div>
    <!-- ... -->
</div></div>

4) I added the functions code to the PL script header area like this:

 
<script>
			var Page = (function() {
				
				var config = {
						$bookBlock : $( '#bb-bookblock' ),
						$navNext : $( '#bb-nav-next' ),
						$navPrev : $( '#bb-nav-prev' ),
						$navFirst : $( '#bb-nav-first' ),
						$navLast : $( '#bb-nav-last' )
					},
					init = function() {
						config.$bookBlock.bookblock( {
							speed : 800,
							shadowSides : 0.8,
							shadowFlip : 0.7
						} );
						initEvents();
					},
					initEvents = function() {
						
						var $slides = config.$bookBlock.children();

						// add navigation events
						config.$navNext.on( 'click touchstart', function() {
							config.$bookBlock.bookblock( 'next' );
							return false;
						} );

						config.$navPrev.on( 'click touchstart', function() {
							config.$bookBlock.bookblock( 'prev' );
							return false;
						} );

						config.$navFirst.on( 'click touchstart', function() {
							config.$bookBlock.bookblock( 'first' );
							return false;
						} );

						config.$navLast.on( 'click touchstart', function() {
							config.$bookBlock.bookblock( 'last' );
							return false;
						} );
						
						// add swipe events
						$slides.on( {
							'swipeleft' : function( event ) {
								config.$bookBlock.bookblock( 'next' );
								return false;
							},
							'swiperight' : function( event ) {
								config.$bookBlock.bookblock( 'prev' );
								return false;
							}
						} );

						// add keyboard events
						$( document ).keydown( function(e) {
							var keyCode = e.keyCode || e.which,
								arrow = {
									left : 37,
									up : 38,
									right : 39,
									down : 40
								};

							switch (keyCode) {
								case arrow.left:
									config.$bookBlock.bookblock( 'prev' );
									break;
								case arrow.right:
									config.$bookBlock.bookblock( 'next' );
									break;
							}
						} );
					};

					return { init : init };

			})();
		</script>

The results are displayed here: http://sheila.wpstag...uccess-stories/

So the images both show up but the script is obviously not being called.

 

I may be very close OR very off-track, having NEVER tried anything like this. If anyone can shed light what to do I'd be eternally grateful.

 

THANKS!

Sheila



#2 batman

batman

    Bat Learning

  • Members

  • 2162 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 25 April 2014 - 05:04 PM

HI @sheilahoff

Perhaps this is not you need, but you can take a look to

http://wordpress.org...ry/screenshots/

This is free

:)



#3 sheilahoff

sheilahoff

    Advocate

  • Members

  • 464 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 25 April 2014 - 07:37 PM

Thanks @batman but I should've mentioned I'd already tried that. It's just not the same. It won't let you start on a double-spread, you have to have a single page cover which she doesn't want. AND it doesn't pop off the page. She doesn't like the page-curl approach at all. As I think I said, she is VERY particular. She wants exactly what is on the example site so I need to learn how to implement it if possible.



#4 GetMeWebDesign

GetMeWebDesign

    Advocate

  • Members

  • 524 posts
  • LocationSurrey, UK
  • Framework Version:developer
  • Country: Country Flag

Posted 26 April 2014 - 12:03 AM

@sheilahoff Just for a start, I wouldnt use a textbox... either media or ideally a PLNextBox, which is far more likely to handle script etc, Textbox really is only for that...text LOL



#5 sheilahoff

sheilahoff

    Advocate

  • Members

  • 464 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 26 April 2014 - 12:22 AM

WOW...never even heard of that before! I just found it in my account and downloaded and installed, replaced the code and class and removed the text box. Of course the result is the same. I'm pretty sure the script isn't being found yet. I don't know where that needs to go. THANKS! Actually, I noticed hooker there too and wonder if that might be what needs to be used?



#6 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 26 April 2014 - 06:31 AM

As far as i know you need to add the reference urls to the script prior to your code starting var page etc.

 

<script src="js/jquerypp.custom.js"></script>
<script src="js/jquery.bookblock.js"></script>
 
 
Check out how they've implemented it here (line 63) - https://github.com/c...ster/index.html

  • batman likes this

#7 batman

batman

    Bat Learning

  • Members

  • 2162 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 26 April 2014 - 11:24 AM

Hi @sheilahoff, @GetMeWebDesign, @James B

I made some test and there are a problem with

 

<script src="https://ajax.googlea.../jquery.min.js"></script>

 

The DMS editor in Chorme don´t load.

:(



#8 sheilahoff

sheilahoff

    Advocate

  • Members

  • 464 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 26 April 2014 - 02:17 PM

Hmmm....Not sure if I caused this with the script and if this is what you guys were talking about but this morning i got up and the site now has a database connection error that didn't fix when I added define('WP_ALLOW_REPAIR', true); to the wpconfig file. So now I can't access it at all. Once I'm back up and running I'll see if I can make sense of what you each have offered. The thing is I've not worked with scripts and js at all so I'm not really understanding even the help you've offered. :-(



#9 sheilahoff

sheilahoff

    Advocate

  • Members

  • 464 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 26 April 2014 - 05:00 PM

Well the "good" news is that the host for the staging site I'm using is having a SQL issue so I did not cause this nor must I fix it. Hopefully they will sometime soon. Then back to figuring this out.



#10 sheilahoff

sheilahoff

    Advocate

  • Members

  • 464 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 26 April 2014 - 07:33 PM

OK so we're back up and running. First things I did was a make a backup! :-)

 

Then I removed the script from the header and replaced it with correct paths to the script and css like this:

 
<link rel="stylesheet" type="text/css" href="http://sheila.wpstagecoach.com/wp-content/uploads/BookBlock/css/bookblock.css" />
<link rel="stylesheet" type="text/css" href="http://sheila.wpstagecoach.com/wp-content/uploads/BookBlock/css/demo1.css" />
<script src="http://sheila.wpstagecoach.com/wp-content/uploads/BookBlock/js/modernizr.custom.js"></script>

Then I tried to add the rest of what was in the github (lines 19 to the end of the script) into the PLNextBox. This seems to have broken the site! I can get into the backend and into the front end except on that page, as Batman said DMS editor in Chrome don´t load now.

 

Now I'm not sure what to do to fix this. Is there a way to remove that section? I guess I can replace the entire page. Too bad. Meanwhile I'm still not clear what I'm doing wrong to get the script working. I feel like it's close but I'm missing some key piece.



#11 sheilahoff

sheilahoff

    Advocate

  • Members

  • 464 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 26 April 2014 - 07:57 PM

I copied the content of the Success Stories to a new post and now the page I'll test out the book on is http://sheila.wpstag....com/book-test/ which comes up in FF but doesn't in Chrome.



#12 sheilahoff

sheilahoff

    Advocate

  • Members

  • 464 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 27 April 2014 - 02:16 AM

It seemed like the jquery was bad since it kept causing DMS to crash. So, I followed the link in the original post jQuery++ by Bitovi and downloaded, extracted and uploaded it to my site and added a link to it in the header instead of the link they provided. Now DMS no longer crashes! It seems like I'm getting closer.

 
I now have the correct image code in place and the correct paths in the script header. But I'm still missing a piece which is likely this:
$(function() {      
    $( '#bb-bookblock' ).bookblock();
});

 

Where/how do I call the script with this code?

I'd give anything to get a step by step to make this work.



#13 Danny

Danny

    Is Awesome!

  • Moderators
  • 16982 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 27 April 2014 - 10:17 AM

You already have a topic regarding this question with that slider, please refrain from creating multiple topics regarding the same question. I also, already mentioned that our staff do not provide support for issues created by third party scripts. If you have troubling implementing a third party script you will need to get assistance from the author of the script.

 

In my opinion, to implement something like that, you shouldn't be using a TextBox (for text only), a MediaBox or NextBox, you should create your own section.



#14 sheilahoff

sheilahoff

    Advocate

  • Members

  • 464 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 27 April 2014 - 02:46 PM

Danny...This is in the section called Off Topic and I started by saying I know you don't support this. The other thread was about something else and this was tacked on. So I started a new one with this topic only in the Off Topic section. And GetMeWebDesign already pointed out to switch to PLNextBox which I've done. I would be clueless how to create my own section. Are you saying this can't be done any other way? I will walk through the tut here http://docs.pageline...per/section-api and see if I can make sense of it.

 

Given how busy you are and what long hours you work, maybe it would help if staff just stayed out of the Off Topic section. Unless I'm mistaken this is a perfectly fine place for me to ask my peers for non PL help. I have local tech help but they do not know PL and my challenge with this is where to put what part of the code in PL. I'm sorry I'm not a coder and don't already KNOW all this stuff.


  • batman likes this

#15 GetMeWebDesign

GetMeWebDesign

    Advocate

  • Members

  • 524 posts
  • LocationSurrey, UK
  • Framework Version:developer
  • Country: Country Flag

Posted 27 April 2014 - 08:26 PM

@sheilahoff. I am not sure you are adding javascript correctly (best practise). Perhaps this article might help you or visit https://codex.wordpr...sing_Javascript. Danny is correct, in that the best way is to build your own section, but if you were to use wp_enqueue_script(), you will need to be developing this site with a child theme. The reason I mention PLNextBox, is that it is a more sure way of adding shortcodes etc, but if the script is going to conflict with other core theme or plugin, then the site will crash, as you have discovered.

 

What is your time frame? 



#16 sheilahoff

sheilahoff

    Advocate

  • Members

  • 464 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 28 April 2014 - 12:05 AM

Morris, I need to tell the client this Weds (at meeting) how we'll proceed, either trying to adapt a plug-in that's so-so and pay $30 to TRY it. Or pay someone $150-300 to try to implement directly in PL creating a section (or not). I have a couple of local folks who think they can do it but neither use PL. The client doesn't need it DONE this week, but by mid-May. But I can't drag it out not knowing if we can accomplish it. PM me if you're interested.



#17 sheilahoff

sheilahoff

    Advocate

  • Members

  • 464 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 03 May 2014 - 09:31 PM

Just to close the loop on this I found someone who would turn this into a PL section for around $300 but the client wouldn't pay it so for me it's a closed case. But good to know we have the option in the future.