jQuery not appending a drag-and-drop to connected folders

jQuery not appending a drag-and-drop to connected folders - javascript

Going for a sort-of Windows explorer-style drag-and-drop folder behavior here. The "// make chapter items droppable" block isn't working - specifically, it's not appending the draggable to the dragged folder's list.
<html>
<head>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<style>
ul
{
margin: 0;
padding: 0;
}
ul#chapter_list
{
background: #fff;
}
#chapter_list li
{
list-style-type: none;
position: relative;
}
#chapter_list li .sortable_handle
{
cursor: move;
padding: 2px .5em 5px 5px;
position: relative;
top: -2px;
left: -5px;
}
span.chapter_title
{
cursor: pointer;
padding-left: 36px !important;
background: url(http://www.openwebgraphics.com/resources/data/2296/22x22_folder_orange_open.png) no-repeat 8px 50%;
}
.comic_chapter div, .comic_page
{
border: 2px solid black;
margin-bottom: 1px;
padding: 3px 5px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
li.comic_chapter ul
{
padding: 2px 2px 2px 1em;
margin: 3px;
}
#chapter_list li.drop_highlight div
{
background: darkBlue;
color: white;
}
.comic_chapter div
{
background: LightBlue;
}
.comic_page
{
background: #fff;
}
.chapter-placeholder
{
border: 2px dashed LightBlue;
margin: 2px;
}
.page-placeholder
{
height: 1.6em;
border: 2px dashed #666;
margin: 2px;
}
</style>
</head>
<body>
<script type="text/javascript" />
var chapter_list = {
0 : {
'chapter_title' : 'Un-Chaptered',
'chapter_pages' : {}
},
1 : {
'chapter_title' : 'Chapter 1',
'chapter_pages' : {
1 : {
'page_title' : 'Page 1'
},
2 : {
'page_title' : 'Page 2'
},
3 : {
'page_title' : 'Page 3'
},
4 : {
'page_title' : 'Page 4'
},
5 : {
'page_title' : 'Page 5'
},
6 : {
'page_title' : 'Page 6'
}
}
},
2 : {
'chapter_title' : 'Chapter 2',
'chapter_pages' : {
7 : {
'page_title' : 'Page 7'
},
8 : {
'page_title' : 'Page 8'
},
9 : {
'page_title' : 'Page 9'
},
10 : {
'page_title' : 'Page 10'
}
}
},
3 : {
'chapter_title' : 'Chapter 3',
'chapter_pages' : {
11 : {
'page_title' : 'Page 11'
},
12 : {
'page_title' : 'Page 12'
}
}
}
};
document.write('<ul id="chapter_list">');
for (i in chapter_list) {
chapter = chapter_list[i];
document.write('<li id="chapter_' + i + '" class="comic_chapter">' +
'<div>' +
'<span class="sortable_handle">||</span>');
if (i > 0) document.write('<input type="checkbox" />');
document.write('<span class="chapter_title">' + chapter.chapter_title + '</span>' +
'</div>' +
'<ul id="chapter_' + i + '_pages">');
for (n in chapter.chapter_pages) {
page = chapter.chapter_pages[n];
document.write('<li id="page_' + n + '" class="comic_page">' +
'<span class="sortable_handle">||</span>' +
'<label for="page_' + n + '_chk">' +
'<input type="checkbox" id="page_' + n + '_chk" />' +
' <span class="page_title">' + page.page_title + '</span>' +
'</label>' +
'</li>');
}
document.write('</ul>' +
'</li>');
}
document.write('</ul>');
</script>
<div id="debug"></div>
<script type="text/javascript">
// hide Chapter contents
$('.comic_chapter ul').hide();
// add onClick => toggle chapter-contents visibility
$('.chapter_title').bind('click', function(e){
$(this).parents('li.comic_chapter').children('ul').toggle();
});
// make Chapters sortable
$('#chapter_list').sortable({
handle: 'div .sortable_handle',
placeholder: 'chapter-placeholder',
forcePlaceholderSize: true
}).disableSelection();
// make Pages sortable
$('.comic_chapter ul').sortable({
handle: '.sortable_handle',
placeholder: 'page-placeholder',
connectWith: '.comic_chapter ul' // allow pages to be dragged between chapters
}).disableSelection();
$('.comic_chapter ul').droppable({
greedy: true
});
// make chapter items droppable
$('#chapter_list').children('li').droppable({
accept: '.comic_page',
hoverClass: 'drop_highlight',
drop: function(e, ui) {
$(this).children('ul').append(ui.draggable);
}
});
</script>
</body>
</html>
Thanks.

I see that you have droppables, but where are the draggables? Droppables accept draggables, not just static html (because, really, nothing is being dropped in that case)

Related

How can I pull in specific number of elements from a JQuery function?

I have a JS function that pulls in all the data based on search results. However, I want to now limit it to the top 6 listings. What is the quickest way to do that? I'm drawing complete blanks on it.
jQuery(document).ready(function ($) {
// Your code here
var $properties = $(".properties");
myvr.properties().then(function (data) {
console.log(data);
data.results.forEach(function (property) {
console.log(property.name);
$properties.append(
'<div class="col-12 col-md-6 col-lg-4">'+
'<div class="min-height-smaller" style="background:url(' +
property.photo.url +
'); background-size:cover; background-position:center;"></div>' +
'<p class="sub-heading">' +
property.name +
"</p>" +
property.headline +
"<br><br>" +
' <a class="primary-btn booking-link" data-property-id="' +
property.key +
'" href="/property/?p=' +
property.slug+"&key="+property.key +
'">Pricing and Details</a> <br><br></div>'
);
});
});
});

You can use index to keep counter and add a condition if(index < 6) it will check if index value is less then 6 then only append values to div properties .
Demo Code :
//demo json datas
var data = {
"results": [{
"name": "something"
}, {
"name": "something1"
}, {
"name": "something3"
}, {
"name": "something4"
}, {
"name": "something5"
}, {
"name": "something6"
}, {
"name": "something7"
}, {
"name": "something8"
}]
}
jQuery(document).ready(function($) {
var $properties = $(".properties");
//add index
data.results.forEach(function(property, index) {
//only append top 6 values
if (index < 6) {
$properties.append(
"<p class='sub-heading'>" +
property.name +
"</p>"
);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="properties"></div>

you can use JQuery.slice():
var $properties = $(".properties").slice(0,6);
$properties.addClass("red");
.red{
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="properties">1</div>
<div class="properties">2</div>
<div class="properties">3</div>
<div class="properties">4</div>
<div class="properties">5</div>
<div class="properties">6</div>
<div class="properties">7</div>
<div class="properties">8</div>
<div class="properties">9</div>
<div class="properties">10</div>

You can do something like this:
const teams = document.querySelectorAll('.standings ol li');
teams.forEach((team, idx) => {
if(idx < 4) {
team.classList.add('champions-league');
}
if(idx == 4) {
team.classList.add('europa-league');
}
const relegationIdxs = Array.from({length: 3}, (_, i) => (teams.length - 1) - i);
if(relegationIdxs.includes(idx)) {
team.classList.add('relegation');
}
});
.standings {
--champions-league: #4285F4;
--europa-league: #FA7B17;
--relegation: #EA4335;
background: #F8F9FA;
padding: 10px;
margin: 5px;
border-radius: 5px;
border: solid 1px #EBEBEB;
}
.champions-league {
color: var(--champions-league);
}
.europa-league {
color: var(--europa-league);
}
.relegation {
color: var(--relegation);
}
.legend span {
display: block;
margin: 1px 3px 0px 0px;
font-size: 14px;
}
span:before {
content: "■";
display: inline-block;
width: 15px;
height: 15px;
margin-right: 5px;
}
span[status="champions-league"]:before {
color: var(--champions-league)
}
span[status="europa-league"]:before {
color: var(--europa-league)
}
span[status="relegation"]:before {
color: var(--relegation)
}
<div class="standings">
<div class="legend">
<span status="champions-league">UEFA Champions League</span>
<span status="europa-league">Europa League</span>
<span status="relegation">Relegation</span>
</div>
<ol>
<li>Real Madrid</li>
<li>Barcelona</li>
<li>Atletico Madrid</li>
<li>Valencia</li>
<li>Real Sociedad</li>
<li>Getafe</li>
<li>Sevilla</li>
<li>Levante</li>
<li>Eibar</li>
<li>Elche</li>
<li>Osasuna</li>
</ol>
</div>

Virtual Keyboard in Odoo

I need to enable Virtual keyboard in Odoo and I made it almost. But the thing is when I click to a particular letter it comes on all the fields like below.
I have to resolve this.The entire code is just below including xml,javascript.
hotel.xml
<?xml version="1.0" encoding="utf-8"?>
<template xml:space="preserve">
<t t-name="HotelRegistrationMenu">
<div class="o_hr_attendance_kiosk_mode_container">
<div class="o_hr_attendance_kiosk_mode">
<h1>Welcome to Hotel California</h1>
<h2>We serve for your happiness</h2>
<button class="o_bi_hotel_button_registration btn btn-primary btn-sm">Book Now</button>
</div>
</div>
</t>
<t t-name="HotelRegistrationKeys">
<div class="o_hr_attendance_kiosk_mode_container">
<form>
<div class="o_form_view">
<table class="o_border" >
<tr>
<td class="col-xs-6 col-xs-offset-2"><label>Customer Name</label></td>
<td width="100"><input class="o_hr_attendance_PINbox" name="customer_name" minlength="1" autofocus="autofocus"/></td>
</tr>
<tr>
<td class="col-xs-6 col-xs-offset-2"><label>Phone Number</label></td>
<td width="100%"><input class="o_hr_attendance_PINbox" name="contact_number" minlength="1"/></td>
</tr>
<tr>
<td class="col-xs-6 col-xs-offset-2"><label>Number Of Persons</label></td>
<td width="100%"><input class="o_hr_attendance_PINbox" name="total_persons" minlength="1"/></td>
</tr>
<tr>
<td class="col-xs-6 col-xs-offset-2"><label>Required Date</label></td>
<td width="100%"><input class="o_hr_attendance_PINbox" name="required_date" minlength="1"/></td>
</tr>
<tr>
<td class="col-xs-6 col-xs-offset-2"><label>Required Time</label></td>
<td width="100%"><input class="o_hr_attendance_PINbox" name="required_time" minlength="1"/></td>
</tr>
</table>
</div>
</form>
<!-- <div class="o_hr_attendance_kiosk_mode"> -->
<div class="row">
<div class="align=center col-sm-8 col-sm-offset-2">
<div class="row" >
<div class="col-xs-4 col-xs-offset-2"></div>
</div>
<div class="row o_hr_attendance_pin_pad">
<t t-foreach="['A','B','C','D','E','F','G','H','I','J','K','L','M',
'N','O','P','Q','R','S','T','U','V','W','X','Y','Z','1','2',
'3','4','5','6','7','8','9','0','-','OK','Del']" t-as="btn_name">
<div class="col-xs-1 o_hr_attendance_pin_pad_border">
<a t-attf-class="btn btn-primary btn-block btn-lg o_hr_attendance_btn-round-corners {{ 'o_hr_attendance_pin_pad_button_' + btn_name }}"><t t-esc="btn_name"/>
</a>
</div>
</t>
</div>
</div>
</div>
</div>
<!-- </div> -->
</t>
</template>
Javascript file
registration.js
odoo.define('bi_hotel.registration', function (require) {
"use strict";
// var BarcodeHandlerMixin = require('barcodes.BarcodeHandlerMixin');
var core = require('web.core');
var Widget = require('web.Widget');
var QWeb = core.qweb;
var _t = core._t;
var registration = Widget.extend({
template:'HotelRegistrationKeys',
events: {
"click .o_bi_hotel_button_registration": function(){
var self = this;
self.$el.html(QWeb.render('HotelRegistrationKeys', {widget: self}));},
'click .o_hr_attendance_pin_pad_button_A': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'A'); },
'click .o_hr_attendance_pin_pad_button_B': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'B'); },
'click .o_hr_attendance_pin_pad_button_C': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'C'); },
'click .o_hr_attendance_pin_pad_button_D': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'D'); },
'click .o_hr_attendance_pin_pad_button_E': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'E'); },
'click .o_hr_attendance_pin_pad_button_F': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'F'); },
'click .o_hr_attendance_pin_pad_button_G': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'G'); },
'click .o_hr_attendance_pin_pad_button_H': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'H'); },
'click .o_hr_attendance_pin_pad_button_I': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'I'); },
'click .o_hr_attendance_pin_pad_button_J': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'J'); },
'click .o_hr_attendance_pin_pad_button_K': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'K'); },
'click .o_hr_attendance_pin_pad_button_L': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'L'); },
'click .o_hr_attendance_pin_pad_button_M': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'M'); },
'click .o_hr_attendance_pin_pad_button_N': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'N'); },
'click .o_hr_attendance_pin_pad_button_O': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'O'); },
'click .o_hr_attendance_pin_pad_button_P': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'P'); },
'click .o_hr_attendance_pin_pad_button_Q': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'Q'); },
'click .o_hr_attendance_pin_pad_button_R': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'R'); },
'click .o_hr_attendance_pin_pad_button_S': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'S'); },
'click .o_hr_attendance_pin_pad_button_T': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'T'); },
'click .o_hr_attendance_pin_pad_button_U': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'U'); },
'click .o_hr_attendance_pin_pad_button_V': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'V'); },
'click .o_hr_attendance_pin_pad_button_W': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'W'); },
'click .o_hr_attendance_pin_pad_button_X': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'X'); },
'click .o_hr_attendance_pin_pad_button_Y': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'Y'); },
'click .o_hr_attendance_pin_pad_button_Z': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 'Z'); },
'click .o_hr_attendance_pin_pad_button_-': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + ' '); },
'click .o_hr_attendance_pin_pad_button_Del': function() { this.$('.o_hr_attendance_PINbox').val(''); },
'click .o_hr_attendance_pin_pad_button_0': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 0); },
'click .o_hr_attendance_pin_pad_button_1': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 1); },
'click .o_hr_attendance_pin_pad_button_2': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 2); },
'click .o_hr_attendance_pin_pad_button_3': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 3); },
'click .o_hr_attendance_pin_pad_button_4': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 4); },
'click .o_hr_attendance_pin_pad_button_5': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 5); },
'click .o_hr_attendance_pin_pad_button_6': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 6); },
'click .o_hr_attendance_pin_pad_button_7': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 7); },
'click .o_hr_attendance_pin_pad_button_8': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 8); },
'click .o_hr_attendance_pin_pad_button_9': function() { this.$('.o_hr_attendance_PINbox').val(this.$('.o_hr_attendance_PINbox').val() + 9); },
},
start: function (){
var self = this;
self.$el.html(QWeb.render('HotelRegistrationMenu', {widget: self}));
},
});
core.action_registry.add('bi_hotel_registration', registration);
return registration;
});
.less file
hotel.less
.o_hr_attendance_btn-round-corners {
border-radius: 10%;
}
.o_hr_attendance_pin_pad_border {
margin: 10px 0px 10px 0px;
}
.o_hr_attendance_PINbox {
background: #AEFF00;
border: 1px solid #d5d5d5;
text-align: left;
margin: 5px 0px 5px 0px;
}
.o_hr_attendance_kiosk_mode_container {
background: black;
.o-flex-display();
.o-flex-flow(column, nowrap);
.o-justify-content(center);
.o-align-items(center);
#media (min-width: #screen-xs-max) {
background: url("../../../../web_enterprise/static/src/img/application-switcher-bg.jpg") no-repeat center center fixed;
background-size: cover;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
.o_hr_attendance_kiosk_mode {
width: 100%;
text-align: center;
position: relative;
background-color: #fff;
padding: 2em;
h1 {
margin: 0 0 2rem 0;
}
.message_demo_barcodes {
font-size: 0.9em;
margin: 0;
}
img {
overflow:hidden; // prevent margins colapsing with h1
margin-top: 3rem;
width: 200px;
}
p {
text-align: left;
margin: 3rem 0;
}
> button {
font-size: 1.2em;
margin-bottom: 2rem;
width: 100%;
}
> button:last-child {
margin-bottom: 0;
}
#media (min-width: #screen-xs-max) {
flex: 0 0 auto;
width: 550px;
border-radius: 10px;
background-color: rgba(255,255,255,0.8);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
font-size: 1.2em;
padding: 3em;
}
}
.o_border{
width: 500px;
height: 450;
text-align: left;
margin: 0 auto;
background : #ECECEC;
font-size: 1.5em;
margin-bottom: 50px;
}
.o_hr_attendance_PINbox_1 {
background: #AEFF00;
border: 1px solid #d5d5d5;
text-align: left;
margin: 5px 0px 5px 0px;
}
These above all are codes to enable the virtual keyboard but the issue is raised above.Can anybody please resolve it ?

Jquery Fancybox How to add extra navigation buttons?

I am using fancybox 2 to display photo galleries on my website. The html has the links to galleries like photography & graphic design and the images are listed in a js-file.
In the picture in this link https://dl.dropboxusercontent.com/u/107031749/fancyboksi/help.JPG is what I have at the moment. I have already styled the navigation. I'm using a customized "simple dotted navigation". I need help with the orange arrows (The green next/previous & close buttons are working great, no problem with them). When clicked on an orange arrow, the next or previous 10 links should be displayed. There can be almost 50 images in one gallery, so I need this feature. (It's showing 19 links now because of the styling. I'll fix that later.)
I don't have much javascript skills, I copy & paste usually. Below is a part from the js code. The lines starting from "var karuselli_next =..." to the line "$("#oikea_btn").attr("title", karuselli_next);" are the ones that need fixing.
function addLinks() {
var list = $("#linksit");
if (!list.length) {
list = $('<ul id="linksit">');
for (var i = 0; i < this.group.length; i++) {
$('<li data-index="' + i + '"><label>' + (i+1) + '</label></li>').click(function() { $.fancybox.jumpto( $(this).data('index'));}).appendTo( list );
}
list.appendTo( 'body' );
$("#linksit").wrap('<div id="karuselli">' + '<div id="navi_linksit">' + '<div class="linksit">'); // Lisää divit + ul#linksit sisällä
$(".linksit").before('<a id="vasen_btn" class="vasen_btn" href="javascript:;" />'); // Lisää nuoli vasemmalle
$(".linksit").before('<a id="oikea_btn" class="oikea_btn" href="javascript:;" />'); // Lisää nuoli oikealle
}
list.find('li').removeClass('active').eq( this.index ).addClass('active');
var karuselli_next = $("#oikea_btn");
var karuselli_prev = $("#vasen_btn");
karuselli_next = $(".fancybox").eq( this.index + 10 ).attr("title");
karuselli_prev = $(".fancybox").eq( this.index - 10 ).attr("title");
$("#vasen_btn").attr("title", karuselli_prev);
$("#oikea_btn").attr("title", karuselli_next);
if (typeof this.title2 != 'undefined') {
this.title = '<span class="finkku"><p class="kieli_gall">Suomi</p>' + this.title + '</span>' + "<br>" + '<span class="enkku"><p class="kieli_gall">English</p>' + this.title2 + '</span>'+ "<br>" + '<span class="img_num">' + (this.index + 1) + '<span class="img_num2">' + '(' + this.group.length + ')' + '</span>' + '</span>';
} else {
this.title = '<span class="finkku">' + this.title + '</span>' + "<br>" + '<span class="img_num">' + (this.index + 1) + '<span class="img_num2">' + '(' + this.group.length + ')' + '</span>' + '</span>';
};
}
function removeLinks() {
$("#linksit").remove();
$("#karuselli").remove();
}
Thank you for the help!
Here's the jsFiddle http://jsfiddle.net/cattimir/gmqw37r3/1/

I haven't used your code at all, because I haven't had more code from you. A working jsFiddle was missing...
I have coded the pagination with simplePagination jQuery plugin.
I've commeted the fancybox (not sure if you really need the fancybox), because I haven't used any feature of the fancybox. Anyway if you need it, it should work like it is in the code.
You can find the demo at jsFiddle. (The code below is identical to the jsFiddle code.)
I think it should be what you are looking for, just add your css styling.
$(document).ready(function () {
var $pagination = $('#container').simplePagination({
previous_content: '<i class="fa fa-arrow-left"></i>', //e.g. '<'
next_content: '<i class="fa fa-arrow-right"></i>', //e.g. '>'
number_of_visible_page_numbers: 6,
items_per_page: 1,
pagination_container: 'ul',
html_prefix: 'simple-pagination',
navigation_element: 'a', //button, span, div, et cetera
});
/*
$.fancybox({
content: $pagination,
prevEffect: 'none',
nextEffect: 'none',
scrolling: 'no',
closeBtn: false,
type: 'image', // required for lorempixel to work
});
$(".fancybox-overlay").unbind(); // disable dismiss if overlay clicked
*/
});
a {
color: #216ed9;
text-decoration: none;
}
a h1 {
padding: 2rem;
color: #216ed9;
text-align: center;
}
a:hover {
text-decoration: underline;
}
/*
a[class^="simple-pagination-navigation-"] + a[class^="simple-pagination-navigation-"] {
margin-right: 0;
}*/
a[class*="simple-pagination-navigation-disabled"] {
color: black;
cursor: default;
}
/*
Styles used to page things look nice :)
*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
body {
font: 1rem/1rem Helvetica, sans-serif;
background-color: #164B1f;
}
#header {
border-radius: .5rem;
}
.my-navigation div {
/*float: left;*/
display: inline-block;
}
.my-navigation {
text-align: center;
}
.nav-wrap {
padding-top: 0.5em;
margin: 0px auto;
}
.simple-pagination-page-numbers a {
width: 2rem;
padding: 0.5em;
text-align: center;
}
.simple-pagination-page-numbers {
}
.simple-pagination-previous, .simple-pagination-next {
padding-bottom: 0.5em;
}
#container {
text-align: center;
}
.gallery {
list-style: none;
margin: 0px auto;
}
.gallery img {
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.25);
}
/*
.simple-pagination-navigation-previous {
float: left;
}
.simple-pagination-navigation-next {
float: right;
}*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/ddenhartog/jquery-simple-pagination/master/jquery-simple-pagination-plugin.js"></script>
<div id="container">
<div class="my-navigation">
<!--<div class="simple-pagination-first"></div>-->
<div class="nav-wrap">
<div class="simple-pagination-previous"></div>
<div class="simple-pagination-page-numbers"></div>
<div class="simple-pagination-next"></div>
<!--<div class="simple-pagination-last"></div>--></div>
</div>
<ul class="gallery">
<li>
<img src="http://farm8.staticflickr.com/7404/12868632153_b0a5718c22_m.jpg" alt="" />
</li>
<li>
<img src="http://farm6.staticflickr.com/5584/15276294205_5a7ffe793c_m.jpg" alt="" />
</li>
<li>
<img src="http://farm8.staticflickr.com/7412/8732133694_0c7e400022_m.jpg" alt="" />
</li>
<li>
<img src="http://farm3.staticflickr.com/2870/8985207189_01ea27882d_m.jpg" alt="" />
</li>
<li>
<img src="http://lorempixel.com/240/160/sports/1/" alt="" />
</li>
<li>
<img src="http://lorempixel.com/240/160/sports/2/" alt="" />
</li>
<li>
<img src="http://lorempixel.com/240/160/sports/3/" alt="" />
</li>
<li>
<img src="http://lorempixel.com/240/160/sports/4/" alt="" />
</li>
<li>
<img src="http://lorempixel.com/240/160/sports/5/" alt="" />
</li>
</ul>
<!-- not needed here <div class="simple-pagination-page-x-of-x"></div>
<div class="simple-pagination-showing-x-of-x"></div>
-->
</div>

Have you found a solution for your code? If not, here is your improved code with the pagination like you wanted it.
Just styling has to be improved but the js code is working now.
I have re-coded a lot that's why my answer comes pretty late.
I've added the function refreshPagination to manage the pagination. I have first tried to get the simplePagination jQuery plugin to work but with-out success.
If you'd like to increase the displayed page links count you'll only have to change the variable pagination_size.
The code could probably be improved by refactoring the pagination feature into a seperate object but it is working like it is.
I've also added that a single image next/prev click will check if the pagination needs to be modified if it's advancing to the next image in the afterLoad method.
That's what all the if conditions are checking before calling the addLinks.bind(this)(curPagination); function.
I'm binding the fancybox object to the addLinks call to have access to the fancybox index etc.
You could also add the addLinks method to the fancybox object, so you could call it with this.addLinks(curPagination) that would be cleaner. Any way, it's also working with binding.
You can find the demo below and here at jsFiddle.
(function($) {
//function galleriaGraafinen(graafinen){
var images = [{
href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title: 'Kuvateksti',
title2: 'Caption'
}, {
href: 'http://fancyapps.com/fancybox/demo/2_b.jpg',
title: 'Kuvateksti',
title2: 'Caption'
}, {
href: 'http://fancyapps.com/fancybox/demo/3_b.jpg',
title: 'Kuvateksti',
title2: 'Caption'
}, {
href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title: 'Kuvateksti',
title2: 'Caption'
}, {
href: 'http://fancyapps.com/fancybox/demo/2_b.jpg',
title: 'Kuvateksti',
title2: 'Caption'
}, {
href: 'http://fancyapps.com/fancybox/demo/3_b.jpg',
title: 'Kuvateksti',
title2: 'Caption'
}, {
href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title: 'Kuvateksti',
title2: 'Caption'
}, {
href: 'http://fancyapps.com/fancybox/demo/2_b.jpg',
title: 'Kuvateksti',
title2: 'Caption'
}, {
href: 'http://fancyapps.com/fancybox/demo/3_b.jpg',
title: 'Kuvateksti',
title2: 'Caption'
}, {
href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title: 'Kuvateksti',
title2: 'Caption'
}, {
href: 'http://fancyapps.com/fancybox/demo/2_b.jpg',
title: 'Kuvateksti',
title2: 'Caption'
}, {
href: 'http://fancyapps.com/fancybox/demo/3_b.jpg',
title: 'Kuvateksti',
title2: 'Caption'
}, {
href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title: 'Kuvateksti',
title2: 'Caption'
}, {
href: 'http://fancyapps.com/fancybox/demo/2_b.jpg',
title: 'Kuvateksti',
title2: 'Caption'
}, {
href: 'http://fancyapps.com/fancybox/demo/3_b.jpg',
title: 'Kuvateksti',
title2: 'Caption'
}, {
href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title: 'Kuvateksti',
title2: 'Caption'
}, {
href: 'http://fancyapps.com/fancybox/demo/2_b.jpg',
title: 'Kuvateksti',
title2: 'Caption'
}, {
href: 'http://fancyapps.com/fancybox/demo/3_b.jpg',
title: 'Kuvateksti',
title2: 'Caption'
}, {
href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title: 'Kuvateksti',
title2: 'Caption'
}, {
href: 'http://fancyapps.com/fancybox/demo/2_b.jpg',
title: 'Kuvateksti',
title2: 'Caption'
}, {
href: 'http://fancyapps.com/fancybox/demo/3_b.jpg',
title: 'Kuvateksti',
title2: 'Caption'
}];
var curPagination = 0, // current pagination position
pagination_size = 5, // constant for pagination
activeIndex = 0,
$listItems = []; // currently visible pagination items
$.fancybox.open(images, {
beforeShow: function () {
/* Disable right click */
$.fancybox.wrap.bind("contextmenu", function (e) {
return true;
});
},
openEffect: 'none',
closeEffect: 'none',
prevEffect: 'none',
nextEffect: 'none',
afterLoad: function (current, previous) {
// curPagination 0 5 10 ...
// index 01234 56789 10...
var lastIndex = (curPagination + pagination_size) - 1; // 4 9 14
//console.log(this.index, 'after load', curPagination, lastIndex);
// find correct pagination
// 0...4 --> pagination = 0
// 5...9 --> pagination = 5
// 10...14 --> pagination = 10
// check if pagination is required?
if (this.index < curPagination || this.index > lastIndex) {
// index is not in current pagination range --> adjust pagination
// increasing from 0
if (this.index > lastIndex) {
// check if we're at the end of the group?
if (curPagination <= this.group.length - 2 * pagination_size) curPagination += pagination_size; //next clicked
else curPagination = this.group.length - pagination_size;
} else {
// back navigation of pagination
if (this.index <= curPagination) {
if (this.index >= pagination_size) {
curPagination -= pagination_size;
} else {
curPagination = 0;
}
}
}
// decreasing from 0 --> roll-over to last element
if (this.index == this.group.length - 1) curPagination = this.group.length - pagination_size;
}
addLinks.bind(this)(curPagination);
},
beforeClose: removeLinks,
margin: [45, 15, 40, 15],
padding: 0,
helpers: {
title: {
type: 'outside'
},
/* thumbs : {
width : 20,
height : 20,
position : 'top'
},*/
overlay: {
locked: true,
closeClick: false
}
}
});
function addLinks(pos) {
var self = this;
curPagination = pos || 0;
activeIndex = this.index; // store currently active image index
function refresh_pagination(pos) {
var itemCount = 0;
$('#linksit').empty();
$listItems = [];
$.each(self.group, function (i, value) {
if (i >= pos && itemCount < pagination_size) {
itemCount++;
$listItems[i] = $('<li/>')
.attr('data-index', i)
.append($('<label/>')
.text(i + 1))
.click(function () {
$.fancybox.jumpto($(this).data('index'));
});
// check if current element is active?
if (i == activeIndex) {
//console.log('found index', i);
$listItems[i].addClass('active');
}
}
});
$('#linksit').html($listItems);
}
refresh_pagination(curPagination);
var $list = $('<ul/>')
.removeClass('active')
.attr('id', 'linksit')
.html($listItems);
//console.log($('#linksit').length);
if (!$('#linksit').length) {
// pagination not in DOM --> add it
$list.appendTo('body');
$("#linksit").wrap('<div id="karuselli">' + '<div id="navi_linksit">' + '<div class="linksit">'); // Lisää divit + ul#linksit sisällä
$(".linksit").before('<a id="vasen_btn" class="vasen_btn" href="javascript:;"></a>'); // Lisää nuoli vasemmalle --> back button
$(".linksit").after('<a id="oikea_btn" class="oikea_btn" href="javascript:;"></a>'); // Lisää nuoli oikealle --> next button
// click handlers for pagination
$('#vasen_btn').click(function () {
//back pagination
//console.log(curPagination);
if (curPagination > pagination_size) curPagination -= pagination_size;
else curPagination = 0;
refresh_pagination(curPagination);
});
$('#oikea_btn').click(function () {
//next pagination
//console.log(curPagination);
if (curPagination <= self.group.length - 2 * pagination_size) curPagination += pagination_size;
else curPagination = self.group.length - pagination_size;
refresh_pagination(curPagination);
});
} else {
// pagination links already in DOM --> update them
$('#linksit').html($listItems);
}
//console.log($listItems);
// add titles
if ( this.title2 ) {
this.title = '<span class="finkku"><p class="kieli_gall">Suomi</p>' + this.title + '</span>' + "<br>" + '<span class="enkku"><p class="kieli_gall">English</p>' + this.title2 + '</span>' + "<br>" + '<span class="img_num">' + (this.index + 1) + '<span class="img_num2">' + '(' + this.group.length + ')' + '</span>' + '</span>';
} else {
this.title = '<span class="finkku">' + this.title + '</span>' + "<br>" + '<span class="img_num">' + (this.index + 1) + '<span class="img_num2">' + '(' + this.group.length + ')' + '</span>' + '</span>';
};
}
function removeLinks() {
$("#linksit").remove();
$("#karuselli").remove();
}
//};
//window.galleriaTridmalli = galleriaGraafinen;
})(jQuery);
#import url(http://fonts.googleapis.com/css?family=Shadows+Into+Light+Two);
.fancybox-title, .fancybox-title a:link, .fancybox-title a:visited {
font-size: 18px !important;
font-family:'Shadows Into Light Two' !important;
color: #303030 !important;
}
.fancybox-title-outside-wrap {
margin-top: 20px !important;
}
.fancybox-wrap {
margin-top: 25px !important;
}
.fancybox-skin {
background-color: #ffffff !important;
padding: 10px !important;
border-radius: 8px !important;
}
.fancybox-overlay {
background: url("http://kaasimir.name/schaibaa/ruutu_bg.jpg") !important;
}
.fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url("http://kaasimir.name/schaibaa/fancybox_sprite_oma.png") !important;
}
.fancybox-close {
top: -5px !important;
right: -93px !important;
width: 75px !important;
height: 50px !important;
}
.fancybox-nav span {
width: 100px !important;
height: 70px !important;
visibility: visible !important;
}
.fancybox-nav {
width: 200px !important;
}
.fancybox-prev {
left: -140px !important;
}
.fancybox-next {
right: -140px !important;
}
.fancybox-prev span {
background-position: 0 -50px !important;
}
.fancybox-next span {
background-position: 0 -128px !important;
}
#karuselli {
display: block;
position: relative;
top: -40px;
width: 40%;
height: auto;
margin: 0 auto;
z-index: 99999 !important;
}
/* added font-awesome icons at the end of css --> image is missing */
#navi_linksit a.vasen_btn {
cursor: pointer;
position: absolute !important;
left: -50px;
z-index: 99999 !important;
display: block !important;
/*width: 44px !important;
height: 22px !important;
content: url("http://kaasimir.name/schaibaa/nuoli_vasen.png") !important;
*/
float: left !important;
}
#navi_linksit a.oikea_btn {
cursor: pointer;
position: absolute !important;
right: -50px;
z-index: 99999 !important;
display: block !important;
/*width: 44px !important;
height: 22px !important;
content: url("http://kaasimir.name/schaibaa/nuoli_oikea.png") !important;
*/
float: right !important;
}
div.linksit {
position: absolute;
width: 80%;
height: 30px;
text-align: center;
z-index: 99991;
overflow: hidden;
padding: 0;
margin: 0;
}
ul#linksit {
position: relative;
overflow: hidden;
list-style: none;
text-align: center;
z-index: 99990;
line-height: 1.2;
padding: 0;
left: 0;
top: 0;
margin: 0;
display: inline-flex;
}
ul#linksit li {
display: inline;
padding: 0 4px !important;
}
ul#linksit li label {
width: 20px;
height: 20px;
border-radius: 100%;
display: inline-block;
background-color: rgba(179, 179, 179, 1);
cursor: pointer;
margin-bottom: 6px;
}
ul#linksit li.active label {
background-color: orange !important;
width: 20px;
height: 20px;
}
/* Caption */
.finkku {
color: #303030;
display: block;
padding-bottom: 5px;
}
.enkku {
color: #303030;
display: block;
}
p.kieli_gall {
color: #aa66aa;
margin: 0 15px 0 0;
display: inline;
}
/* Image number */
.img_num {
color: orange;
font-size: 40px;
position: absolute;
top: -80px;
left: 30px;
}
.img_num2 {
color: orange;
font-size: 20px;
position: absolute;
top: 8px;
right: -40px;
}
/* pagination next/prev link styling */
a.oikea_btn, a.vasen_btn {
width: 10%;
}
a.oikea_btn:link, a.vasen_btn:link {
text-decoration: none;
text-underline: none;
}
.oikea_btn:before {
font-family: FontAwesome;
content:"\f054";
}
.vasen_btn:before {
font-family: FontAwesome;
content:"\f053";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/ddenhartog/jquery-simple-pagination/master/jquery-simple-pagination-plugin.js"></script>
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" rel="stylesheet"/>
<div>Graphic design Link
</div>
<div>Photography Link
</div>
<div>Illustration Link
</div>

How to recover an active div

I try to use the jquery flip to display information on an div flip.
JSFIDDLE
I have a first div called "workListId", under a second div called "workId".
Under the div workId, two another div called "workDataId" and "workFlipId".
Under the div workDataId, two another div called "workDescriptionId" and "workURLId"
I have a problem with the div workDescriptionID.
If I flip the div in the order, I see the description in order too.
But if Iflip the third div(for example), I see the description of the first div.
I think the problem is about this line but I don't know to resolve it :
elt.html($('.workData').html());
So see my code below :
$(function(){
// A - CONSTRUCT THE DIV
for ( var i in works ){
// work div
$('<div/>', {
'id' : 'workId' + i,
'class' : 'work'
}).appendTo("#workListId");
// workFlip div
$('<div/>', {
'id' : 'workFlipId' + i,
'class' : 'workFlip'
}).appendTo("#workId" + i);
// workData div
$('<div/>', {
'id' : 'workDataId' + i,
'class' : 'workData'
}).appendTo("#workId" + i);
// workDescription div
$('<div/>', {
'id' : 'workDescriptionId' + i,
'class' : 'workDescription'
}).appendTo("#workDataId" + i);
// workURL div
$('<div/>', {
'id' : 'workURLId' + i,
'class' : 'workURL'
}).appendTo("#workDataId" + i);
// Insert the content in each div
$("#workFlipId" + i).html(path.pathBegin + works[i].image + path.pathEnd);
$("#workDescriptionId" + i).html('<p>' + works[i].description + '</p>');
$("#workURLId" + i).html('Read more...');
}//End for
// B - CONSTRUCT THE DIV FLIP
/* The code is executed once the DOM is loaded */
$('.work').bind("click",function(){
// $(this) point to the clicked .workFlip element (caching it in elem for speed):
var elt = $(this);
// data('flipped') is a flag we set when we flip the element:
if(elt.data('flipped'))
{
// If the element has already been flipped, use the revertFlip method
// defined by the plug-in to revert to the default state automatically:
elt.revertFlip();
// Setting the flag:
elt.data('flipped',true);
}// End if
else
{
// Using the flip method defined by the plugin:
elt.flip({
direction: params.direction,
color: params.color,
speed: params.speed,
onBefore: function(){
// Insert the contents of the .workData div (hidden from view with display:none)
// into the clicked .workFlip div before the flipping animation starts:
elt.html($('.workFlip').siblings('.workData').html());
}
});// End $this.flip
// Setting the flag:
elt.data('flipped',true);
}// End else
});// End function work
});// End function

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.16.min.js" type="text/javascript"></script>
<script type="text/javascript">
eval(function (p, a, c, k, e, r) { e = function (c) { return (c < a ? '' : e(parseInt(c / a))) + ((c = c % a) > 35 ? String.fromCharCode(c + 29) : c.toString(36)) }; if (!''.replace(/^/, String)) { while (c--) r[e(c)] = k[c] || e(c); k = [function (e) { return r[e] } ]; e = function () { return '\\w+' }; c = 1 }; while (c--) if (k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]); return p } ('(5($){5 H(a){a.1D.1f[a.1E]=1F(a.1G,10)+a.1H}6 j=5(a){1I({1J:"1g.Z.1K 1L 1M",1N:a})};6 k=5(){7(/*#1O!#*/11&&(1P 1Q.1h.1f.1R==="1S"))};6 l={1T:[0,4,4],1U:[1i,4,4],1V:[1j,1j,1W],1X:[0,0,0],1Y:[0,0,4],1Z:[1k,1l,1l],20:[0,4,4],21:[0,0,A],22:[0,A,A],23:[12,12,12],24:[0,13,0],26:[27,28,1m],29:[A,0,A],2a:[2b,1m,2c],2d:[4,1n,0],2e:[2f,2g,2h],2i:[A,0,0],2j:[2k,2l,2m],2n:[2o,0,R],2p:[4,0,4],2q:[4,2r,0],2s:[0,t,0],2t:[2u,0,2v],2w:[1i,1o,1n],2x:[2y,2z,1o],2A:[1p,4,4],2B:[1q,2C,1q],2D:[R,R,R],2E:[4,2F,2G],2H:[4,4,1p],2I:[0,4,0],2J:[4,0,4],2K:[t,0,0],2L:[0,0,t],2M:[t,t,0],2N:[4,1k,0],2O:[4,S,2P],2Q:[t,0,t],2R:[t,0,t],2S:[4,0,0],2T:[S,S,S],2U:[4,4,4],2V:[4,4,0],9:[4,4,4]};6 m=5(a){T(a&&a.1r("#")==-1&&a.1r("(")==-1){7"2W("+l[a].2X()+")"}2Y{7 a}};$.2Z($.30.31,{u:H,v:H,w:H,x:H});$.1s.32=5(){7 U.1t(5(){6 a=$(U);a.Z(a.B(\'1u\'))})};$.1s.Z=5(i){7 U.1t(5(){6 c=$(U),3,$8,C,14,15,16=k();T(c.B(\'V\')){7 11}6 e={I:(5(a){33(a){W"X":7"Y";W"Y":7"X";W"17":7"18";W"18":7"17";34:7"Y"}})(i.I),y:m(i.D)||"#E",D:m(i.y)||c.z("19-D"),1v:c.J(),F:i.F||1w,K:i.K||5(){},L:i.L||5(){},M:i.M||5(){}};c.B(\'1u\',e).B(\'V\',1).B(\'35\',e);3={s:c.s(),n:c.n(),y:m(i.y)||c.z("19-D"),1x:c.z("36-37")||"38",I:i.I||"X",G:m(i.D)||"#E",F:i.F||1w,o:c.1y().o,p:c.1y().p,1z:i.1v||39,9:"9",1a:i.1a||11,K:i.K||5(){},L:i.L||5(){},M:i.M||5(){}};16&&(3.9="#3a");$8=c.z("1b","3b").8(3c).B(\'V\',1).3d("1h").J("").z({1b:"1A",3e:"3f",p:3.p,o:3.o,3g:0,3h:3i});6 f=5(){7{1B:3.9,1x:0,3j:0,u:0,w:0,x:0,v:0,N:3.9,O:3.9,P:3.9,Q:3.9,19:"3k",3l:\'3m\',n:0,s:0}};6 g=5(){6 a=(3.n/13)*25;6 b=f();b.s=3.s;7{"q":b,"1c":{u:0,w:a,x:a,v:0,N:\'#E\',O:\'#E\',o:(3.o+(3.n/2)),p:(3.p-a)},"r":{v:0,u:0,w:0,x:0,N:3.9,O:3.9,o:3.o,p:3.p}}};6 h=5(){6 a=(3.n/13)*25;6 b=f();b.n=3.n;7{"q":b,"1c":{u:a,w:0,x:0,v:a,P:\'#E\',Q:\'#E\',o:3.o-a,p:3.p+(3.s/2)},"r":{u:0,w:0,x:0,v:0,P:3.9,Q:3.9,o:3.o,p:3.p}}};14={"X":5(){6 d=g();d.q.u=3.n;d.q.N=3.y;d.r.v=3.n;d.r.O=3.G;7 d},"Y":5(){6 d=g();d.q.v=3.n;d.q.O=3.y;d.r.u=3.n;d.r.N=3.G;7 d},"17":5(){6 d=h();d.q.w=3.s;d.q.P=3.y;d.r.x=3.s;d.r.Q=3.G;7 d},"18":5(){6 d=h();d.q.x=3.s;d.q.Q=3.y;d.r.w=3.s;d.r.P=3.G;7 d}};C=14[3.I]();16&&(C.q.3n="3o(D="+3.9+")");15=5(){6 a=3.1z;7 a&&a.1g?a.J():a};$8.1d(5(){3.K($8,c);$8.J(\'\').z(C.q);$8.1e()});$8.1C(C.1c,3.F);$8.1d(5(){3.M($8,c);$8.1e()});$8.1C(C.r,3.F);$8.1d(5(){T(!3.1a){c.z({1B:3.G})}c.z({1b:"1A"});6 a=15();T(a){c.J(a)}$8.3p();3.L($8,c);c.3q(\'V\');$8.1e()})})}})(3r);', 62, 214, '|||flipObj|255|function|var|return|clone|transparent||||||||||||||height|top|left|start|second|width|128|borderTopWidth|borderBottomWidth|borderLeftWidth|borderRightWidth|bgColor|css|139|data|dirOption|color|999|speed|toColor|int_prop|direction|html|onBefore|onEnd|onAnimation|borderTopColor|borderBottomColor|borderLeftColor|borderRightColor|211|192|if|this|flipLock|case|tb|bt|flip||false|169|100|dirOptions|newContent|ie6|lr|rl|background|dontChangeColor|visibility|first|queue|dequeue|style|jquery|body|240|245|165|42|107|140|230|224|144|indexOf|fn|each|flipRevertedSettings|content|500|fontSize|offset|target|visible|backgroundColor|animate|elem|prop|parseInt|now|unit|throw|name|js|plugin|error|message|cc_on|typeof|document|maxHeight|undefined|aqua|azure|beige|220|black|blue|brown|cyan|darkblue|darkcyan|darkgrey|darkgreen||darkkhaki|189|183|darkmagenta|darkolivegreen|85|47|darkorange|darkorchid|153|50|204|darkred|darksalmon|233|150|122|darkviolet|148|fuchsia|gold|215|green|indigo|75|130|khaki|lightblue|173|216|lightcyan|lightgreen|238|lightgrey|lightpink|182|193|lightyellow|lime|magenta|maroon|navy|olive|orange|pink|203|purple|violet|red|silver|white|yellow|rgb|toString|else|extend|fx|step|revertFlip|switch|default|flipSettings|font|size|12px|null|123456|hidden|true|appendTo|position|absolute|margin|zIndex|9999|lineHeight|none|borderStyle|solid|filter|chroma|remove|removeData|jQuery'.split('|'), 0, {}))
$(document).ready(function () {
//******************* SETTING THE FLIP ********************//
// direction : Set the direction of the flipped div
// lr : Left to right
// rl : Right to left
// tb : Top to bottom
// bt : Bottom to top
//
// color : Set the color of your div
// speed : Set the time speed to flip (default : 300)
//*********************************************************//
var params = {
direction: 'lr',
color: 'black',
speed: 220
};
//******************* SETTING THE WORKS ********************//
// title : Set the title of your work
// image : Set the image of your work
// description : Set the description of your work
// website : Set the link of your work or your full size image
//
// How to create many works ?
// Simply copy and paste the lines : " title1 : { ... }, "
// after your last works and complete the setting.
//*********************************************************//
var works = {
title1: {
image: 'facebook.png',
description: 'Description One.',
website: 'http://www.facebook.com'
}, // End title1
title2: {
image: 'google.png',
description: 'Description Two.',
website: 'http://www.google.com'
}, // End title2
title3: {
image: 'adobe.png',
description: 'Description Three.',
website: 'http://www.adobe.com'
}// End title3
}; // End var works
//******************* SETTING THE PATH OF WORKS ************//
// pathBegin : Set the path of your works
// pathEnd : DOES NOT CHANGE
//*********************************************************//
var path = {
pathBegin: '<img src="img/works/',
pathEnd: '"/>'
};
// A - CONSTRUCT THE DIV
$.each(works, function (i, work) {
// work div
$('<div/>', {
'id': 'workId' + i,
'class': 'work'
}).appendTo("#workListId");
// workFlip div
$('<div/>', {
'id': 'workFlipId' + i,
'class': 'workFlip'
}).appendTo("#workId" + i);
// workData div
$('<div/>', {
'id': 'workDataId' + i,
'class': 'workData'
}).appendTo("#workId" + i);
// workDescription div
$('<div/>', {
'id': 'workDescriptionId' + i,
'class': 'workDescription'
}).appendTo("#workDataId" + i);
// workURL div
$('<div/>', {
'id': 'workURLId' + i,
'class': 'workURL'
}).appendTo("#workDataId" + i);
// Insert the content in each div
$("#workFlipId" + i).html(path.pathBegin + work.image + path.pathEnd);
$("#workDescriptionId" + i).html('<p>' + work.description + '</p>');
$("#workURLId" + i).html('Read more...');
}); //End foreach
// B - CONSTRUCT THE DIV FLIP
/* The code is executed once the DOM is loaded */
$('.work').bind("click", function () {
// $(this) point to the clicked .workFlip element (caching it in elem for speed):
var elt = $(this);
// data('flipped') is a flag we set when we flip the element:
if (elt.data('flipped')) {
// If the element has already been flipped, use the revertFlip method
// defined by the plug-in to revert to the default state automatically:
elt.revertFlip();
// Unsetting the flag:
elt.data('flipped', true);
} // End if
else {
// Using the flip method defined by the plugin:
elt.flip({
direction: params.direction,
color: params.color,
speed: params.speed,
onBefore: function () {
// Insert the contents of the .workData div (hidden from view with display:none)
// into the clicked .workFlip div before the flipping animation starts:
//elt.html($('.workFlip').siblings('.workData').html()); //This Code Will Take only first div workDescription only.
elt.html(elt.find('.workFlip').siblings('.workData').html());
}
}); // End elt.flip
// Setting the flag:
elt.data('flipped', true);
} // End else
}); // End function work
});
</script>
<style type="text/css">
*
{
/* Resetting the default styles of the page */
margin: 0;
padding: 0;
}
body
{
/* Setting default text color, background and a font stack */
font-size: 0.825em;
color: white;
background-color: #fff;
font-family: Arial, Helvetica, sans-serif;
}
.workList
{
position: relative;
margin: 30px auto;
width: 950px;
}
.work
{
width: 180px;
height: 180px;
float: left;
margin: 5px; /* Giving the work div a relative positioning: */
position: relative;
cursor: pointer;
}
.workFlip
{
/* The work div will be positioned absolutely with respect
to its parent .work div and fill it in entirely */
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 1px solid #ddd;
background: url("../img/background.jpg") no-repeat center center #f9f9f9;
}
.workFlip:hover
{
border: 1px solid #999; /* CSS3 inset shadow: */
-moz-box-shadow: 0 0 30px #999 inset;
-webkit-box-shadow: 0 0 30px #999 inset;
box-shadow: 0 0 30px #999 inset;
}
.workFlip img
{
/* Centering the logo image in the middle of the workFlip div */
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -70px;
}
.workData
{
/* Hiding the .workData div */
display: none;
}
.workDescription
{
font-size: 11px;
padding: 30px 10px 20px 20px;
font-style: italic;
}
.workURL
{
font-size: 10px;
font-weight: bold;
padding-left: 20px;
}
/* The styles below are only necessary for the styling of the demo page: */
#main
{
position: relative;
margin: 0 auto;
width: 100%;
}
h1
{
padding: 30px 0;
text-align: center;
text-shadow: 0 1px 1px white;
margin-bottom: 30px;
background: url("../img/page_bg.gif") repeat-x bottom #f8f8f8;
}
h1, h2
{
font-family: "Myriad Pro" ,Arial,Helvetica,sans-serif;
}
h2
{
font-size: 14px;
font-weight: normal;
text-align: center;
position: absolute;
right: 40px;
top: 40px;
}
a, a:visited
{
color: #0196e3;
text-decoration: none;
outline: none;
}
a:hover
{
text-decoration: underline;
}
a img
{
border: none;
}
</style>
</head>
<body>
<header></header>
<nav></nav>
<!-- BEGIN CONTENT -->
<div id="main">
<!-- Content of portfolio -->
<div id="workListId" class="workList">
</div>
</div>
<!-- End div id main -->
<!-- END CONTENT -->
<footer></footer>
</body>
</html>

jQuery Custom Lightbox issue

I have been writing my own Lightbox script (to learn more about jQuery).
My code for the captions are as follows (the problem is that the captions are the same on every image):
close.click(function(c) {
c.preventDefault();
if (hideScrollbars == "1") {
$('body').css({'overflow' : 'auto'});
}
overlay.add(container).fadeOut('normal');
$('#caption').animate({
opacity: 0.0
}, "5000", function() {
$('div').remove('#caption');
});
});
$(prev.add(next)).click(function(c) {
c.preventDefault();
$('div').remove('#caption')
areThereAlts = "";
var current = parseInt(links.filter('.selected').attr('lb-position'),10);
var to = $(this).is('.prev') ? links.eq(current - 1) : links.eq(current + 1);
if(!to.size()) {
to = $(this).is('.prev') ? links.eq(links.size() - 1) : links.eq(0);
}
if(to.size()) {
to.click();
}
});

So, I found out what was wrong (Cheers Deng!), further down the code I had the following function (I had to add "link" into the remove caption code):
links.each(function(index) {
var link = $(this);
link.click(function(c) {
c.preventDefault();
if (hideScrollbars == "1") {
$('body').css({'overflow' : 'hidden'});
}
open(link.attr('href'));
links.filter('.selected').removeClass('selected');
link.addClass('selected');
var areThereAlts = $(".thumb", link).attr("alt"); //"link" needed to be added here
//alert(areThereAlts);
if (areThereAlts !== "") {
container.append('<div id="caption" style="display: block; font-family: Verdana; background-color: white; padding: 4px 5px 10px 5px; top -10px; width: 100%; height: 25px; vertical-align: middle; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; color: #3f3f3f;"><font color="#3f3f3f">'+areThereAlts+'</font></div>') //caption
}
});
link.attr({'lb-position': index});
});

We Keep Coding

JavaScript is the programming language of the Web.

jQuery not appending a drag-and-drop to connected folders - javascript

I see that you have droppables, but where are the draggables? Droppables accept draggables, not just static html (because, really, nothing is being dropped in that case)

Related

How can I pull in specific number of elements from a JQuery function?

Virtual Keyboard in Odoo

Jquery Fancybox How to add extra navigation buttons?

How to recover an active div

jQuery Custom Lightbox issue

Categories

Resources