diff --git a/pgwslider.css b/pgwslider.css index db8d477..39c3d20 100644 --- a/pgwslider.css +++ b/pgwslider.css @@ -7,7 +7,7 @@ * Released under the GNU GPLv3 license - http://opensource.org/licenses/gpl-3.0 */ .pgwSlider { - width: 100%; + width: 70%; color: #fff; } @@ -61,6 +61,30 @@ z-index: 3; } +.ps-current:hover span.ps-long-description { + opacity: 1; +} + +.pgwSlider .ps-long-description { + position: absolute; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.7); + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000); + left: 0; + top: 0; + display: inline; + opacity: 0; + z-index: 2; + -webkit-transition: all 300ms ease-out; + -moz-transition: all 300ms ease-out; + transition: all 300ms ease-out; +} + +.pgwSlider .ps-long-description p { + padding: 20px; +} + ul.pgwSlider, .pgwSlider ul { float: right; diff --git a/pgwslider.js b/pgwslider.js index 90d53d7..faedd6a 100644 --- a/pgwslider.js +++ b/pgwslider.js @@ -92,7 +92,7 @@ } // Get title - var elementSpan = obj.find('span').text(); + var elementSpan = obj.find('span.pgwSlideTitle').text(); if ((typeof elementSpan != 'undefined') && (elementSpan != '') && (elementSpan != null)) { element.title = elementSpan; } else { @@ -103,8 +103,8 @@ } // Get description - var elementDescription = obj.find('img').attr('data-description'); - if ((typeof elementDescription != 'undefined') && (elementDescription != '')) { + var elementDescription = obj.find('span.pgwSlideDescription').text(); + if ((typeof elementDescription != 'undefined') && (elementDescription != '') && (elementSpan != null)) { element.description = elementDescription; } @@ -221,7 +221,7 @@ pgwSlider.plugin.removeClass(pgwSlider.config.mainClassName).addClass('ps-list'); pgwSlider.plugin.wrap('
'); pgwSlider.plugin = pgwSlider.plugin.parent(); - pgwSlider.plugin.prepend('
'); + pgwSlider.plugin.prepend('
'); pgwSlider.slideCount = pgwSlider.plugin.find('.ps-list > li').length; if (pgwSlider.slideCount == 0) { @@ -251,19 +251,23 @@ var elementId = 1; pgwSlider.plugin.find('.ps-list > li').each(function() { var element = getElement($(this)); + element.id = elementId; pgwSlider.data.push(element); $(this).addClass('elt_' + element.id); + + $(this).find('span.pgwSlideDescription').remove(); + // Check element title if (element.title) { - if ($(this).find('span').length == 1) { - if ($(this).find('span').text() == '') { - $(this).find('span').text(element.title); + if ($(this).find('span.pgwSlideTitle').length == 1) { + if ($(this).find('span.pgwSlideTitle').text() == '') { + $(this).find('span.pgwSlideTitle').text(''); } } else { - $(this).find('img').after('' + element.title + ''); + $(this).find('img').after('' + element.title + ''); } } @@ -276,6 +280,12 @@ currentElement.html('' + (element.title ? element.title : '') + ''); } + + if(element.description){ + currentElement.html(currentElement.html() + '
' + element.description + '
'); + } + console.log(element); + if (element.link) { currentElement.html('' + currentElement.html() + ''); } @@ -367,7 +377,6 @@ pgwSlider.touchFirstPosition = null; }); } - return true; }; @@ -377,12 +386,12 @@ // Element caption var elementText = ''; if (element.title) { - elementText += '' + element.title + ''; + elementText += '

' + element.title + '

'; } + var elementDescription = ''; if (element.description) { - if (elementText != '') elementText += '
'; - elementText += element.description; + elementDescription += element.description; } if (elementText != '') { @@ -392,9 +401,11 @@ if (typeof pgwSlider.plugin.find('.ps-caption').fadeIn == 'function') { pgwSlider.plugin.find('.ps-caption').html(elementText); + pgwSlider.plugin.find('.ps-long-description').html('

' + elementDescription + '

'); pgwSlider.plugin.find('.ps-caption').fadeIn(pgwSlider.config.transitionDuration / 2); } else { pgwSlider.plugin.find('.ps-caption').html(elementText); + pgwSlider.plugin.find('.ps-long-description').html(elementDescription); pgwSlider.plugin.find('.ps-caption').show(); } } @@ -590,6 +601,7 @@ return false; } + if (typeof direction == 'undefined') { direction = 'left'; }