############################################## ### Configuration for the plugin plugin.tx_jquerylightbox { conf { ATagParams.append = COA ATagParams.append { 20 = TEXT 20.noTrimWrap = | class="thickbox"|| } inlineId = TB_inlineId minifyJS = 0 } origImage { file.maxW = 1200 file.maxH = 1200 } includeJSlibs { #Example for local Code jQuery = EXT:jquery_lightbox/res/jquery-1.8.min.js jQuery.forceOnTop = 1 # Example for Google Code #jQuery = //ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js #jQuery.external = 1 #jQuery.forceOnTop = 1 } marks { loadingAnimation = IMG_RESOURCE loadingAnimation { file = EXT:jquery_lightbox/res/loading.gif stdWrap.dataWrap = {TSFE:absRefPrefix}| } loadingAnimation > loadingAnimation = TEXT loadingAnimation { value = clear.gif dataWrap = {TSFE:absRefPrefix // TSFE:baseUrl}| } next = TEXT next { data = LLL:EXT:jquery_lightbox/lib/locallang.xml:next } prev = TEXT prev { data = LLL:EXT:jquery_lightbox/lib/locallang.xml:prev } imageOf1 = TEXT imageOf1 { data = LLL:EXT:jquery_lightbox/lib/locallang.xml:imageOf1 } imageOf2 = TEXT imageOf2 { data = LLL:EXT:jquery_lightbox/lib/locallang.xml:imageOf2 } closeTitle = TEXT closeTitle { data = LLL:EXT:jquery_lightbox/lib/locallang.xml:closeTitle } close = TEXT close { data = LLL:EXT:jquery_lightbox/lib/locallang.xml:close } escKey = TEXT escKey { data = LLL:EXT:jquery_lightbox/lib/locallang.xml:escKey } width = TEXT width { value = 630 override < tt_content.image.20.maxW } height = TEXT height { value = 440 override < tt_content.image.20.maxH } minWidth = TEXT minWidth { value = 500 } } _CSS_DEFAULT_STYLE ( /* overlay */ #TB_overlay { background: #FFFFFF; background: rgba(255, 255, 255, 0.9); bottom: 0px; height: 100%; left: 0px; position: fixed; right: 0px; top: 0px; width: 100%; z-index: 600; } /* close button */ #TB_closeWindow, #TB_closeAjaxWindow { height: 0px; overflow: hidden; text-indent: -9999px; width: 0px; } #TB_closeWindowButton:not(.csc-mailform-button) { background: #868686; height: 40px; position: fixed; right: 30px; text-align: left; text-indent: -9999px; top: 30px; width: 40px; z-index: 604; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } #TB_closeWindowButton:not(.csc-mailform-button):hover { background-color: #111111; } #TB_closeWindowButton:not(.csc-mailform-button)::before, #TB_closeWindowButton:not(.csc-mailform-button)::after { background-color: #FFFFFF; bottom: 20%; content: ""; left: 50%; margin-left: -1px; position: absolute; top: 20%; width: 2px; } #TB_closeWindowButton:not(.csc-mailform-button)::before { -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } #TB_closeWindowButton:not(.csc-mailform-button)::after { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } /* caption */ #TB_caption { background: #868686; bottom: 0px; color: #FFFFFF; font-size: 13px; left: 0px; padding: 10px; position: fixed; right: 0px; text-align: center; z-index: 603; } /* animations */ #TB_load, #TB_load::after, #TB_overlay, #TB_closeWindowButton:not(.csc-mailform-button), #TB_closeWindowButton:not(.csc-mailform-button)::before, #TB_closeWindowButton:not(.csc-mailform-button)::after, #TB_caption { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-overflow-scrolling: touch; } #TB_load, #TB_overlay, #TB_closeWindowButton, #TB_caption { -moz-animation: fade-in 0.25s linear; -o-animation: fade-in 0.25s linear; -webkit-animation: fade-in 0.25s linear; animation: fade-in .25s linear; } @-webkit-keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @-o-keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* window */ #TB_window { display: none; left: 50%; position: fixed; text-align: left; top: 50%; z-index: 602; } /* image & content */ #TB_Image, #TB_ajaxContent { -moz-box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.75); -webkit-box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.75); -ms-touch-action: none; touch-action: none; } #TB_ajaxContent { background: #FFFFFF; clear: both; line-height: 15.5px; overflow: auto; padding: 2px 15px 15px 15px; position: relative; text-align: left; z-index: 602; } #TB_ajaxContent.TB_modal { padding: 15px; } #TB_ajaxContent p { padding: 5px 0px 5px 0px; } #TB_ajaxWindowTitle { font-weight: bold; margin-bottom: 1px; padding: 7px 0px 5px 15px; } #TB_title { background: #868686; height: 27px; position: relative; z-index: 604; } #TB_title #TB_ajaxWindowTitle { color: #FFFFFF; } #TB_title #TB_closeAjaxWindow { color: #FFFFFF; } #TB_iframeContent { border: none; clear: both; margin-bottom: -1px; margin-top: 1px; _margin-bottom: 1px; } /* hideSelector */ #TB_HideSelect { background-color: #FFFFFF; border: none; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 99; -khtml-opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; filter: alpha(opacity=0); } @media all and (min-width:0) { #TB_HideSelect { -ms-filter: none \0/; filter: none \0/; } } /* IE9-IE10pp4 */ /* activity indication */ #TB_load, #TB_load::after { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } #TB_load img { display: none; } #TB_load { background: #444444; background: rgba(0, 0, 0, 0.5); height: 40px; left: 50%; margin: -20px 0px 0px -20px; padding: 10px; position: fixed; top: 50%; width: 40px; z-index: 601; -moz-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.75); -webkit-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.75); } #TB_load::after { background: #FFFFFF; content: ""; display: block; height: 20px; width: 20px; -moz-animation: tb-load 0.5s ease infinite; -o-animation: tb-load 0.5s ease infinite; -webkit-animation: tb-load 0.5s ease infinite; animation: tb-load 0.5s ease infinite; } @-webkit-keyframes tb-load { from { opacity: 0.5; -webkit-transform: scale(0.75); } 50% { opacity: 1; -webkit-transform: scale(1); } to { opacity: 0.5; -webkit-transform: scale(0.75); } } @-moz-keyframes tb-load { from { opacity: 0.5; -moz-transform: scale(0.75); } 50% { opacity: 1; -moz-transform: scale(1); } to { opacity: 0.5; -moz-transform: scale(0.75); } } @-o-keyframes tb-load { from { opacity: 0.5; -o-transform: scale(0.75); } 50% { opacity: 1; -o-transform: scale(1); } to { opacity: 0.5; -o-transform: scale(0.75); } } @keyframes tb-load { from { opacity: 0.5; transform: scale(0.75); } 50% { opacity: 1; transform: scale(1); } to { opacity: 0.5; transform: scale(0.75); } } /* prev & next */ #TB_next, #TB_prev { display: block; font-size: 0px; height: 0px; line-height: 0px; overflow: hidden; text-indent: -9999px; width: 0px; } #TB_next a, #TB_prev a { background: #868686; height: 40px; position: fixed; top: 50%; width: 40px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } #TB_next a:hover, #TB_prev a:hover { background: #111111; } #TB_next a { right: 30px; } #TB_prev a { left: 30px; } #TB_next a::before, #TB_next a::after, #TB_prev a::before, #TB_prev a::after { background-color: #FFFFFF; content: ""; left: 50%; margin-left: -1px; position: absolute; width: 2px; } #TB_next a::before { bottom: 20%; top: 44%; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } #TB_next a::after { bottom: 44%; top: 20%; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } #TB_prev a::before { bottom: 20%; top: 44%; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } #TB_prev a::after { bottom: 44%; top: 20%; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } /* mobile version */ @media only screen and (max-width: 660px) { #TB_close { right: 15px; top: 15px; } #TB_next a { right: 15px; } #TB_prev a { left: 15px; } } ) } # Set link title to id for TB_closeWindowButton lib.parseFunc.tags.link.typolink { parameter.override.if.value.data = parameters: allParams parameter.override.if.value.substring = -20, parameter.override.if.equals = TB_closeWindowButton parameter.override.data = parameters: allParams parameter.override.substring = 0,-20 ATagParams.cObject = TEXT ATagParams.cObject < .parameter.override ATagParams.cObject.substring = -20, ATagParams.cObject.wrap = id="|" } lib.parseFunc_RTE.tags.link.typolink < lib.parseFunc.tags.link.typolink