# Bookshelf example's ### Okay, got it. But how about multiple magazines on one page? You only have to create the Yumpu object once and then create as much magazines out of as as you want. But don't forget to provide enough \
containers: ```javascript var myYumpu = new Yumpu(); document.addEventListener("DOMContentLoaded", function() { myYumpu.create_player("#myMagazineContainerNo1", "55929647", { startpage: 2 }); myYumpu.create_player("#myMagazineContainerNo2", "55929647", { startpage: 3 }); myYumpu.create_player("#myMagazineContainerNo3", "55929647", { startpage: 4 }); }); ``` #### I'm kinda lazy, isn't there something less complex? Some kind of 1-liner? Yes, there is! You can add a magazine, or even an embed code you previously created ith one line. Just add some parameters to the \ ... ``` #### (2) Create a magazine and set width and height Simply create a magazine in a given container. Add ***id="yumpuMagazineScript", data-yumpu-player-container="myMagazineContainer", data-yumpu-width="600", data-yumpu-height="450"*** and ***data-yumpu-magazine-id="35285631"** (in this example "35285631" is the magazine ID and of course you can change the values of width and height as well)*to the \ ... ``` #### (3) Create a magazine with an embed hash Simply create a magazine in a given container. Add ***id="yumpuMagazineScript", data-yumpu-player-container="myMagazineContainer"*** and ***data-yumpu-embed-id="mimE5EX021a2pQDR"** (in this example "mimE5EX021a2pQDR" is the embed hash - replace with yours)*to the \ ... ``` ## Bookshelf example #1 ```markup ... ...
... ``` **Result:** You should see a bookshelf in a \
with a dimension of 600 x 260 px. The background color can be set in the style attributes of the \
. ### Bookshelf example #2 ```javascript var myYumpu = new Yumpu(); document.addEventListener("DOMContentLoaded", function() { myYumpu.create_bookshelf("#myBookshelfContainer", "nQaYDBZhLPUjRzsy", "myYumpuUsername", { fullscreenLinkingActivated: "on", yumpu_bookshelf_flip_btn_color: "dark", title_font_color: "442222" }); }); ``` **Result:** You should see a bookshelf in a \
with a light red background and a dimension of 600 x 260 px. As we have a \
with a light background color, we want dark arrows, which we achieve with the parameter **yumpu\_bookshelf\_flip\_btn\_color** setting to **"dark"**. With setting **fullscreenLinkingActivated** to **on**, the bookshelf tries to open the magazine a user clicked on directly in fullscreen mode. Note that some browsers might not support this feature. Setting **title\_font\_color** to **442222** (HEX color) will show the section titles in a dark gray'ish red. ### Additional parameters | fullscreenLinkingActivated | default: "on" | when clicking a cover, the magazine tries to open it directly in fullscreen mode (if browser supports this feature). Set "off" to deactivate it. | | ------------------------------------------ | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | yumpu\_bookshelf\_section\_titles\_on | default: "on" | set "on" to show the (clickable) titles, set "off" to hide them | | yumpu\_bookshelf\_flip\_btn\_color | default: "light" | set "light" to display white flip buttons, set "dark" to display them in dark gray (choose whatever fits best to the given background color) | | yumpu\_bookshelf\_flip\_throught\_sections | default: "on" | set "on" to flip through section. At the end of a section the flip buttons will be shown. Set "off" to hide them - then you only can jump from section to section with the section titles below | | yumpu\_bookshelf\_align | default: "center" | set "center" to align to center, set "left" to change the alignment to left | | title\_font\_color | default: "FFFFFF" | set any hex color for the section titles | | | | | | yumpu\_logo\_on\_or\_off | default: "on" | set "on" to show the yumpu.com logo, set "off" to hide it | | usedFontFamily | default: "Open Sans" | set the font family you want the section titles to be shown with | | usedFontFamilyWebFontTitle | default: "Open+Sans::latin" |

This is a more advanced feature, to setup a custom google webfont in bookshelfs. Here's how to get this value:

  1. goto [www.google.com/fonts](http://www.google.com/fonts) and add your desired font (e.g."Roboto") with add to collection
  2. click Use in bottom right corner
  3. then, in the section 3 click on the tab Javascript
  4. you should see something like WebFontConfig = { google: { families: \[ 'Roboto::latin' ] } }; ... copy the marked text Roboto::latin and use it as this parameter
| ### Tidy up - disposing mags/bookshelfs at runtime You can either dispose all frontends with .dispose\_all() or you can only dispose a single container with .dispose\_ontainer("#myContainer"). E.g.: ```javascript myYumpu.dispose_all(); // disposing all container filled with magazines/bookshelfs myYumpu.dispose_container("#magazineContainer"); // disposing container #magazineContainer only ``` ### Example for advanced users: Loading magazine directly in fullscreen mode with a single click on a button In this example you can see how to open a magazine in a DIV tag with a simple click on a button. Everything will be loaded on demand. No iFrames will be used. And, when leaving fullscreen mode, everything get's disposed and cleaned up. The code should be self-explanatory to advanced users who have experience with Javascript: ```markup Example - loads Yumpu magazine directly to fullscreen by a simple click on a button
```