I'm using this lightbox plugin: http://s.codepen.io/schadeck/pen/gjbqr
I would like to know if there is any way to add a simple description attribute in my current code.
What I want to achieve is a description text on the bottom of the image in the lightbox. I've looked for a solution, but nothing seems to apply for the lightbox.js script I'm using.
Here is the code:
jQuery(document).ready(function($) {
// global variables for script
var current, size;
$('.lightboxTrigger').click(function(e) {
// prevent default click event
e.preventDefault();
// grab href from clicked element
var image_href = $(this).attr("href");
// determine the index of clicked trigger
var slideNum = $('.lightboxTrigger').index(this);
// find out if #lightbox exists
if ($('#lightbox').length > 0) {
// #lightbox exists
$('#lightbox').fadeIn(300);
// #lightbox does not exist - create and insert (runs 1st time only)
} else {
// create HTML markup for lightbox window
var lightbox =
'<div id="lightbox">' +
'<p>Clique para fechar</p>' +
'<div id="slideshow">' +
'<ul></ul>' +
'<div class="nav">' +
'Anterior' +
'Proxima' +
'</div>' +
'</div>' +
'</div>';
//insert lightbox HTML into page
$('body').append(lightbox);
// fill lightbox with .lightboxTrigger hrefs in #imageSet
$('#imageSet').find('.lightboxTrigger').each(function() {
var $href = $(this).attr('href');
$('#slideshow ul').append(
'<li>' +
'<img src="' + $href + '">' +
'</li>'
);
});
}
// setting size based on number of objects in slideshow
size = $('#slideshow ul > li').length;
// hide all slide, then show the selected slide
$('#slideshow ul > li').hide();
$('#slideshow ul > li:eq(' + slideNum + ')').show();
// set current to selected slide
current = slideNum;
});
//Click anywhere on the page to get rid of lightbox window
$('body').on('click', '#lightbox', function() { // using .on() instead of .live(). more modern, and fixes event bubbling issues
$('#lightbox').fadeOut(300);
});
// show/hide navigation when hovering over #slideshow
$('body').on(
{ mouseenter: function() {
$('.nav').fadeIn(300);
}, mouseleave: function() {
$('.nav').fadeOut(300);
}
},'#slideshow');
// navigation prev/next
$('body').on('click', '.slide-nav', function(e) {
// prevent default click event, and prevent event bubbling to prevent lightbox from closing
e.preventDefault();
e.stopPropagation();
var $this = $(this);
var dest;
// looking for .prev
if ($this.hasClass('prev')) {
dest = current - 1;
if (dest < 0) {
dest = size - 1;
}
} else {
// in absence of .prev, assume .next
dest = current + 1;
if (dest > size - 1) {
dest = 0;
}
}
// fadeOut curent slide, FadeIn next/prev slide
$('#slideshow ul > li:eq(' + current + ')').fadeOut(750);
$('#slideshow ul > li:eq(' + dest + ')').fadeIn(750);
// update current slide
current = dest;
});
});
HTML:
<ul id="imageSet">
<li><img src="" title=""></li>
</ul>
I haven't looked at the script but you could try this:
var desc = ['some description title', 'another description title', 'etc'];
$('body').append(lightbox);
// fill lightbox with .lightboxTrigger hrefs in #imageSet
$('#imageSet').find('.lightboxTrigger').each(function(index) {
var $href = $(this).attr('href');
$('#slideshow ul').append(
'<li>' +
'<img src="' + $href + '">' +
'<span>' + desc[index] + '</span>' +
'</li>'
);
});
Related
PROBLEM
I've tried adding a link to the navigational tooltips and, based on html, it should be working. However, no matter which tooltip I click, I am taken to the second section - even though the address indicated is correct and should be taking me across all sections.
for (var i = 0; i < $(SECTION_SEL).length; i++) {
var link = '';
if (options.anchors.length) {
link = options.anchors[i];
}
var li = '<li><span></span>';
// Only add tooltip if needed (defined by user)
var tooltip = options.navigationTooltips[i];
if (typeof tooltip !== 'undefined' && tooltip !== '') {
li += '<div class="' + SECTION_NAV_TOOLTIP + ' ' + options.navigationPosition + '">' + '' + tooltip + '</div>';
}
li += '</li>';
nav.find('ul').append(li);
}
I've tried putting the links into the init file as well, but that has the exact same effect.
Fullpage.js will ignore your link.
See line 1694
function sectionBulletHandler(e){
e.preventDefault();
var index = $(this).parent().index();
scrollPage($(SECTION_SEL).eq(index));
}
And line 567:
.on('click touchstart', SECTION_NAV_SEL + ' a', sectionBulletHandler)
I have pagination like this
this is javascript code for my webpage
var pagingList = $('<ul>', {class: 'pagination list-unstyled list-inline'});
$('.page_container').append($('<div>', {class:"text-center"}).append(pagingList));
if (startPage > 10) {
var prev_page = $('<li>').append($('<a>', {href: '/bjcam/' + boardname + '/' + (startPage - 1)}).text('prev'));
pagingList.append(prev_page);
}
for (var i = startPage; i <= endPage; i++) {
if (i > maxPage) break;
var current_page = $('<li>').append($('<a>', {href: '/bjcam/' + boardname + '/' + i}).text(i));
pagingList.append(current_page);
}
if (maxPage > endPage) {
var next_page = $('<li>').append($('<a>', {href: '/bjcam/' + boardname + '/' + (startPage + 10)}).text('next'));
pagingList.append(next_page);
}
I want to make <li> actived when this paginations is clicked
Now, below is my code I'm trying to do
$('.pagination li').click(function() {
$('.pagination li').addClass("active")
})
How can I make <li> tag actived when it is clicked?
$('.pagination li').click(function(e) {
$('.navbar li.active').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
});
Try like this...
Inside your click event (when clicking upon li) add this code.
$(this).addClass('active');
My modal images seems to be working only under Chrome. In Firefox and Internet Expoler modal images generate code with errors:
<img src="" http:="" localhost="" ceramikakornak="" images="" realizacje="" klasyczne="" 3.jpg""="" class="img-responsive">
In Chrome modal windows is ok and looks:
<img src="images/realizacje/1.jpg" class="img-responsive">
JavaScript which i use to generate Modal Window:
$(document).ready(function() {
$('.realizacje-fota').each(function(){
var checkClass = $(this);
var image_url = checkClass.css('background-image'),
image;
// Remove url() or in case of Chrome url("")
image_url = image_url.match(/^url\("?(.+?)"?\)$/);
if (image_url[1]) {
image_url = image_url[1];
image = new Image();
// just in case it is not already loaded
$(image).load(function () {
// alert(image.width + 'x' + image.height);
var ratio = image.width/image.height;
if (ratio > 1) {
checkClass.addClass("realizacje-fota-pion");
}
else if (ratio <= 1) {
checkClass.addClass("realizacje-fota-poziom");
}
});
image.src = image_url;
}
});
});
$(document).ready(function(){
$('.lazy div').on('click',function(){
var src = $(this).css('background-image');
var src = src.substring(4, src.length);
var src = src.substring(0, src.length - 1);
var img = '<img src="' + src + '" class="img-responsive"/>';
var index = $(this).parent('div').index();
var html = '';
html += img;
html += '<div style="clear:both;display:block;">';
html += '<a class="controls next" href="'+ (index+1) + '">next »</a>';
html += '<a class="controls previous" href="' + (index) + '">« prev</a>'
html += '</div>';
$('#myModal').modal();
$('#myModal').on('shown.bs.modal', function(){
$('#myModal .modal-body').html(html);
//new code
$('a.controls').trigger('click');
})
$('#myModal').on('hidden.bs.modal', function(){
$('#myModal .modal-body').html('');
});
});
})
$(document).on('click', 'a.controls', function(){
var index = $(this).attr('href');
var src = $('.row div:nth-child('+ index +') img').attr('src');
$('.modal-body div').str('scr', src);
var newPrevIndex = parseInt(index) - 1;
var newNextIndex = parseInt(newPrevIndex) + 2;
if($(this).hasClass('previous')){
$(this).attr('href', newPrevIndex);
$('a.next').attr('href', newNextIndex);
}else{
$(this).attr('href', newNextIndex);
$('a.previous').attr('href', newPrevIndex);
}
var total = $('.row div').length + 1;
//hide next button
if(total === newNextIndex){
$('a.next').hide();
}else{
$('a.next').show()
}
//hide previous button
if(newPrevIndex === 0){
$('a.previous').hide();
}else{
$('a.previous').show()
}
return false;
});
can you please tell me how to show two div one at time ?
Actually I make one demo where I scroll to top it create one div and prepend to main div.But I want only two div show at one time.Now it will create new divs whenever user goes to top.I want user remove below div.
Example on starting : it show On div id="page_5"
when user scroll up it create div id="page_4" .It is fine
But when user scroll again it create div id="page_3" but that time I need user delete that div id="page_5" from below.again user go up it remove div id="page_4".
if user come down it remove upper div and show below div .remove remove div id="page_1" or remove div id="page_2" and show div id="page_5" or div id="page_4"
http://jsfiddle.net/Gbd3z/2/
var pages = [page_1, page_2, page_3, page_4,page_5];
var totalPage = "page_" + pages.length;
$("<div id='" + totalPage + "'>" + pages.pop() + "</div>").prependTo($("#fullContainer"));
$("#fullContainer").scroll(function () {
// top
if ($(this).scrollTop() === 0 && pages.length) {
console.log("up");
var stringLoad = "page_" + pages.length;
$("<div id='" + stringLoad + "'>" + pages.pop() + "</div>").prependTo($("#fullContainer"));
}
if ($(this).scrollTop() >= $(this)[0].scrollHeight - document.body.offsetHeight) {
console.log("down");
}
});
Try
$("#fullContainer").scroll(function () {
// top
if ($(this).scrollTop() === 0 && pages.length) {
console.log("up");
var stringLoad = "page_" + pages.length;
$("<div id='" + stringLoad + "'>" + pages.pop() + "</div>").prependTo($("#fullContainer"));
//remove element at 2nd index
$('#fullContainer').children().slice(2).remove()
}
if ($(this).scrollTop() >= $(this)[0].scrollHeight - document.body.offsetHeight) {
console.log("down");
}
});
Demo: Fiddle
This is my all script, I know this is long, but just one line is important and I add all it for insurance:
//Add new Addable div
$('.AddNewE').click(function () {
var RemoveAddableButton = $('<input type="button" class="RemoveE button red" value="remove" />');
$(RemoveAddableButton).click(function () {
$(this).closest('.Addable').remove();
});
var TargetId = $(this).attr('id');
TargetId = TargetId.substring(3);
var Target = $('.Addable#' + TargetId + ':first');
var Count = $('.Addable#' + TargetId).size();
var CloneTarget = $(Target).clone();
CloneTarget.find('input').val('');
CloneTarget.insertAfter('.Addable#' + TargetId + ':last'); // ***importantOne
var TargetName = $(Target).find('input').attr('name');
if (Count == 1) {
var CloneName = TargetName + '[1]';
TargetName = TargetName + '[0]';
$(Target).find('input').attr('name', TargetName);
$(Target).find('span[class*="field-validation"]').attr('data-valmsg-for', TargetName);
$(CloneTarget).find('input').attr('name', CloneName);
$(CloneTarget).append($(RemoveAddableButton));
if ($(CloneTarget).find('span[class*="field-validation"]').size() > 0) {
$(CloneTarget).find('span[class*="field-validation"]').remove();
$(CloneTarget).append(
$('<span class="field-validation-valid invalid-side-note" data-valmsg-replace="true" data-valmsg-for="' + CloneName + '"></span>')
);
}
} else {
var indx = TargetName.length - 3;
var CloneTargetName = TargetName.substring(0, indx);
CloneTargetName = CloneTargetName + '[' + Count + ']';
$(CloneTarget).find('input').attr('name', CloneTargetName);
$(CloneTarget).append($(RemoveAddableButton));
if ($(CloneTarget).find('span[class*="field-validation"]').size() > 0) {
$(CloneTarget).find('span[class*="field-validation"]').remove();
$(CloneTarget).append(
$('<span class="field-validation-valid invalid-side-note" data-valmsg-replace="true" data-valmsg-for="' + CloneTargetName + '"></span>')
);
}
}
(function ($) {
$.fn.updateValidation = function () {
var form = this.closest("form").removeData("validator").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse(form);
return this;
};
})(jQuery);
$(Target).updateValidation();
$(CloneTarget).updateValidation();
});
If I click the .AddNewE button then a new div added, but as my script I want to add this new div to the end of the divs so I use
CloneTarget.insertAfter('.Addable#' + TargetId + ':last');
but always the new div added as a second div it means always the :first and :last div is same and is first one also I checked by:
$('.Addable#' + TargetId).css('border', '');
$('.Addable#' + TargetId + ':last').css('border', '3px dotted green');
$('.Addable#' + TargetId + ':first').css('border', '3px dotted red');
So where is the problem? why the jQuery can't recognize last div ?
The problem is in the jQuery selector: $('.Addable#' + TargetId + ':last')
It is not valid HTML when you have multiple elements with the same id (#TargetId). ID is unique and you're not supposed to have more than 1 element with the same ID.
The jQuery selector assumes you use valid correct HTML markups, so it doesn't bother to collect all your elements with that ID. As soon as jQuery found the first element in the DOM with that ID, it stops and appends your new element right after that.
Try updating your jQuery selectors to simply: $('.Addable:first') and $('.Addable:last') and see if it works.