Forum

Fun with jQuery
 
Notifications
Clear all

Fun with jQuery

calash
(@calash)
Estimable Member

Been playing with jQuery and various plugins along with eFiction and put together a fairly neet "booklet mode" system for reading stories.  I wanted to share the code incase anybody else is looking to try something like it.

Ignore the cover image parts.  I have a module setup that allows users to set an image from their VB albums as a cover image.  It is very custom and still needs work so I have not posted the code yet.

Plugin : http://builtbywill.com/code/booklet/
Example: http://www.necrotania.com/eFiction/modules/booklet/read.php

Code:


<?php

$current = "guiread";
$pagelen = "1200"; // Number of charactors per page
$linelen = "30";  //Number of lines per page
$charlen = "45";  //Number of charactors per line
unset ($output, $results);
$ci = FALSE;
include ("*******/header.php");

if(file_exists("$skindir/default.tpl")) $tpl = new TemplatePower( "$skindir/default.tpl" );
else $tpl = new TemplatePower(_BASEDIR."default_tpls/default.tpl");
//let TemplatePower do its thing, parsing etc.
$tpl->prepare();
//Start modifying below:


if(isset($_GET['sid']) && isNumber($_GET['sid'])) $sid = $_GET['sid']; // Story ID
if (!$sid)$sid = 1476;  // Test item.

// Load javascript for booklet.  Will be moved to header later
$output = '<script src=""jquery.easing.1.3.js"" type="text/javascript"></script>
          <script src=""jquery.booklet.1.2.0.min.js"" type="text/javascript"></script>
          <link href=""jquery.booklet.1.2.0.css"" type="text/css" rel="stylesheet" media="screen, projection, tv" />';

// Build booklet
// Build book framework


$output .='
<div id="custom-menu"></div>
<div id="mybook">
<div class="b-load">'; // Start Book divs


// Build front cover.  If there is a cover image use that, otherwise use title and author
$results = dbquery("SELECT p.pictureid, p.userid, p.vb_cover_image, a.albumid FROM vb_picture as p, vb_albumpicture as a WHERE a.pictureid = p.pictureid AND p.vb_cover_image = ".$sid." LIMIT 1");


while ($coverimage = dbassoc($results))
{
               if ($coverimage[albumid]) $ci = TRUE;
$cover_full=" http://www.necrotania.com/vb/picture.php?albumid=".$coverimage[albumid]."&pictureid=".$coverimage[pictureid];
$output .="<div><img src="'".$cover_full."'"  alt='' style='width: 270px; height: 570px;' /></div>";
}

if (!$ci)
{
$results_st = dbquery("SELECT s.title, s.sid, s.uid, s.summary, a.username as penname FROM fanfiction_stories as s, vb_user as a WHERE s.sid = ".$sid." AND s.uid = a.userid");

while ($story = dbassoc($results_st))
{
$output .="<div><center><br /><br /><h3>".$story[title]."<br />By: ".author_link($story)."</h3><br /><br />".$story[summary]."</center></div>"; // Front Cover
}

}








$query = "SELECT c.inorder,c.sid, c.storytext, c.title, c.uid, a.username AS penname FROM fanfiction_chapters as c, vb_user as a WHERE sid=".$sid." AND c.uid = a.userid ORDER BY inorder"; // Lookup story for provided sid

$results = dbquery($query);
while ($story_link = dbassoc($results))  // For each chapter build page results
{
$currentpos = 0; // Reset the counter for each chapter
$chaplen = strlen($story_link[storytext]); // Length of the chapter
$pageno = 1; // For counting pages
$br_count = 0; //Reset Line Break Counter
$output .='<div title ="'.$story_link[title].'" rel ="'.$story_link[title].'">';
$output .= '<br /><br /><br /><center><h3>'.$story_link[title];
$output .= "<br /><br /><br />By : ".author_link($story_link)."</h3></center>";
$output .= "</div>"; // Chapter info on first page  More info and formatting will follow

// Testing page formatting via line break method.  
$format_story_temp = format_story(strip_tags($story_link[storytext]));// eliminate some redundant calls
$format_story_break = wordwrap ($format_story_temp, $charlen , "<br/>",0); // Break up text based on number of lines
$br_count = substr_count ($format_story_break, "<br/>"); // Gets number of line breaks  Each counts as an end of line.
$page_count = ceil ($br_count / $linelen); // Gets number of pages, rounding up.
$format_story_broken = explode ("<br/>",$format_story_break); // Break up the story into lines.
unset ($format_story_temp, $format_story_break);


$current_line = 1; // Set current line for page creation
for ($i=1; $i <= $page_count; $i++) //Building page time.  
{
$current_page_end = $i * $linelen; // Sets the current end of page number
$output .= "<div>";
while ($current_line <= $current_page_end)
{

$output .= $format_story_broken[$current_line]; //Add the line to the output buffer

$output .= "<br/>"; // Explode removes line breaks, need to add them back.
$current_line ++; // Increase line counter
}

$output .= "</div>"; // Page is over, close the div
}

if ($i & 1) $output .="<div>$nbsp</div>";

}  // Next chapter loop point.


$output .="<div><h3>Back Cover</h3></div>"; // back Cover

$output .='</div>
</div>'; // End Book divs

// - Booklet start code
$output .= " <script type='text/javascript'>
$(function() {
$('#mybook').booklet({
width:  600,
height: 600,
menu: '#custom-menu',
        chapterSelector: true,
               closed:             true,
closedFrontTitle:   null,
easing:             'easeInOutQuad',                
  easeIn:             'easeInQuad',                  
    easeOut:             'easeOutQuad',
tabs: true,
covers: true,

});
   });
   </script> ";

//Don't modify below this line
$tpl->assign("output", $output);
$tpl->printToScreen();
dbclose( );
?>

The World of Necrotania - Story Writing Community

Quote
Topic starter Posted : 14/04/2011 7:26 pm
babaca
(@babaca)
Member Moderator

Wow. That's cute (I mean that in a good way). Very clever even.

******************************************
Mucking around in eFiction since circa 2001 (ver. 1.0)
Now running v.3

ReplyQuote
Posted : 14/04/2011 11:00 pm
jacci
(@jacci)
Honorable Member

Sweet. That is really awesome, very interested in this mod!!!

Nice work.

why is nothing ever easy?
url: http://www.pretendercentre.com/missingpieces/     
php: 5.2.5  msql: 5.0.45-community
efic version: 3.4.3           latest patches: yes
bridges: none              mods: challenges, displayword, beta-search

ReplyQuote
Posted : 15/04/2011 9:29 am
calash
(@calash)
Estimable Member

Thanks 🙂

I am going to end up having a few resolution sizes so people can choose what fits best on their monitor.  I guess I could fix the font size as well, that would help a bit overall.

My first version of this went by character count and caused timeouts on larger stories.  This version is much more efficient and can easily process a 35 chapter story, one of the largest in my archive.  It also better preserves the formatting, at least for spacing. 

It does need work.  It would not come close to validating due to the javascript being dropped after the header and I need to add line breaks so the source code is readable. 

The code is open to anybody who wants to improve on it. 

The World of Necrotania - Story Writing Community

ReplyQuote
Topic starter Posted : 15/04/2011 5:06 pm
calash
(@calash)
Estimable Member

Using the SimpleModal plugin for jQuery I now have a setup where you can click a link and it will open the booklet in an overlay, keeping you on the same page while giving you a different view of the story.

http://www.ericmmartin.com/projects/simplemodal/

I also tied it into the Wibiya toolbar that I am testing to give a random story or featured story in an overlay from any place on the site.

The base code still needs work.  I have to add the ability to adjust the size so different resolutions can be used.  I also need to add the important checking for warnings and member only viewing areas.

The World of Necrotania - Story Writing Community

ReplyQuote
Topic starter Posted : 19/04/2011 8:28 pm
jacci
(@jacci)
Honorable Member

calash, if you need help debugging this, let me know. I probably can't help you too much with the code side, but if you need a beta testa with a fresh set of eyes from a user viewpoint, love to help out.

why is nothing ever easy?
url: http://www.pretendercentre.com/missingpieces/     
php: 5.2.5  msql: 5.0.45-community
efic version: 3.4.3           latest patches: yes
bridges: none              mods: challenges, displayword, beta-search

ReplyQuote
Posted : 21/04/2011 2:55 am
calash
(@calash)
Estimable Member

Let me see about making the code a bit more standard first.  As it is now it does not account for storing stories as files (I use the Database setup so I tend to write for it first).  It is also tied a bit into my other mods and bridge.

If I get some time during lunch tomorrow I will see what I can do.

The World of Necrotania - Story Writing Community

ReplyQuote
Topic starter Posted : 02/05/2011 9:11 pm
Share: