 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
siunt
Threadersteller
Dabei seit: 27.09.2013
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Fr 27.09.2013 12:10
Titel jQuery Fancybox - Abstand zwischen Thumbnails |
  |
|
Hallo liebes Forum!
Ich habe auf einer Seite die Fancybox eingebunden. An und für sich funktioniert alles einwandfrei, ich möchte aber den Abstand zwischen den Thumbnails verändern. Ich meine, dass das irgendwie in der Datei jquery-fancybox-thumbs.css gehen muss, aber ich komm einfach nicht drauf wie. Hab schon ziemlich viel probiert, aber egal, was ich in der CSS-Datei verändere, es tut sich einfach nichts. Ich würde mich wirklich sehr freuen, wenn mir jemand helfen kann.
|
|
| |
  |
 |
SimonDerDude
Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht: 
|
Verfasst Fr 27.09.2013 12:15
Titel
|
|
|
Vielleicht musst du die Datei noch hochladen?
Vielleicht kennt hier ja auch jemand die Datei auswendig 
|
|
| |
 |
|
|
Anzeige
|
|
|
siunt
Threadersteller
Dabei seit: 27.09.2013
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 27.09.2013 12:28
Titel
|
|
|
Ohja stimmt, tut mir leid:
| Code: | #fancybox-thumbs {
position: fixed;
left: 0;
width: 100%;
overflow: hidden;
z-index: 8050;
}
#fancybox-thumbs.bottom {
bottom: 2px;
}
#fancybox-thumbs.top {
top: 2px;
}
#fancybox-thumbs ul {
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
#fancybox-thumbs ul li {
float: left;
padding: 1px;
opacity: 0.5;
}
#fancybox-thumbs ul li.active {
opacity: 0.75;
padding: 0;
border: 1px solid #fff;
}
#fancybox-thumbs ul li:hover {
opacity: 1;
}
#fancybox-thumbs ul li a {
display: block;
position: relative;
overflow: hidden;
border: 1px solid #222;
background: #111;
outline: none;
}
#fancybox-thumbs ul li img {
display: block;
position: relative;
border: 0;
padding: 0;
max-width: none;
} |
Was ich in dieser Datei auch ändere, es tut sich nichts.
Vielleicht muss man den Abstand auch in der Javascript-Datei einstellen, damit kenne ich mich aber überhaupt nicht aus.
So sieht die aus:
| Code: | /*!
* Thumbnail helper for fancyBox
* version: 1.0.7 (Mon, 01 Oct 2012)
* @requires fancyBox v2.0 or later
*
* Usage:
* $(".fancybox").fancybox({
* helpers : {
* thumbs: {
* width : 50,
* height : 50
* }
* }
* });
*
*/
(function ($) {
//Shortcut for fancyBox object
var F = $.fancybox;
//Add helper object
F.helpers.thumbs = {
defaults : {
width : 50, // thumbnail width
height : 50, // thumbnail height
position : 'bottom', // 'top' or 'bottom'
source : function ( item ) { // function to obtain the URL of the thumbnail image
var href;
if (item.element) {
href = $(item.element).find('img').attr('src');
}
if (!href && item.type === 'image' && item.href) {
href = item.href;
}
return href;
}
},
wrap : null,
list : null,
width : 0,
init: function (opts, obj) {
var that = this,
list,
thumbWidth = opts.width,
thumbHeight = opts.height,
thumbSource = opts.source;
//Build list structure
list = '';
for (var n = 0; n < obj.group.length; n++) {
list += '<li><a style="width:' + thumbWidth + 'px;height:' + thumbHeight + 'px;" href="javascript:jQuery.fancybox.jumpto(' + n + ');"></a></li>';
}
this.wrap = $('<div id="fancybox-thumbs"></div>').addClass(opts.position).appendTo('body');
this.list = $('<ul>' + list + '</ul>').appendTo(this.wrap);
//Load each thumbnail
$.each(obj.group, function (i) {
var href = thumbSource( obj.group[ i ] );
if (!href) {
return;
}
$("<img />").load(function () {
var width = this.width,
height = this.height,
widthRatio, heightRatio, parent;
if (!that.list || !width || !height) {
return;
}
//Calculate thumbnail width/height and center it
widthRatio = width / thumbWidth;
heightRatio = height / thumbHeight;
parent = that.list.children().eq(i).find('a');
if (widthRatio >= 1 && heightRatio >= 1) {
if (widthRatio > heightRatio) {
width = Math.floor(width / heightRatio);
height = thumbHeight;
} else {
width = thumbWidth;
height = Math.floor(height / widthRatio);
}
}
$(this).css({
width : width,
height : height,
top : Math.floor(thumbHeight / 2 - height / 2),
left : Math.floor(thumbWidth / 2 - width / 2)
});
parent.width(thumbWidth).height(thumbHeight);
$(this).hide().appendTo(parent).fadeIn(300);
}).attr('src', href);
});
//Set initial width
this.width = this.list.children().eq(0).outerWidth(true);
this.list.width(this.width * (obj.group.length + 1)).css('left', Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5)));
},
beforeLoad: function (opts, obj) {
//Remove self if gallery do not have at least two items
if (obj.group.length < 2) {
obj.helpers.thumbs = false;
return;
}
//Increase bottom margin to give space for thumbs
obj.margin[ opts.position === 'top' ? 0 : 2 ] += ((opts.height) + 15);
},
afterShow: function (opts, obj) {
//Check if exists and create or update list
if (this.list) {
this.onUpdate(opts, obj);
} else {
this.init(opts, obj);
}
//Set active element
this.list.children().removeClass('active').eq(obj.index).addClass('active');
},
//Center list
onUpdate: function (opts, obj) {
if (this.list) {
this.list.stop(true).animate({
'left': Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5))
}, 150);
}
},
beforeClose: function () {
if (this.wrap) {
this.wrap.remove();
}
this.wrap = null;
this.list = null;
this.width = 0;
}
}
}(jQuery)); |
|
|
| |
|
|
SimonDerDude
Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht:
|
Verfasst Fr 27.09.2013 12:36
Titel
|
|
|
Vielleicht
| Code: |
#fancybox-thumbs ul li {
float: left;
margin: 0 5px 0 0; /* abstand rechts */
padding: 1px;
opacity: 0.5;
}
|
|
|
| |
|
|
siunt
Threadersteller
Dabei seit: 27.09.2013
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 27.09.2013 13:18
Titel
|
|
|
|
Nein, da tut sich leider überhaupt nichts.
|
|
| |
|
|
SimonDerDude
Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht:
|
Verfasst Fr 27.09.2013 13:43
Titel
|
|
|
| siunt hat geschrieben: | | Nein, da tut sich leider überhaupt nichts. |
Wenn ich per Chrome-Inspector am Beispiel der Originalwebsite herumfummel tut sich aber was.
Vergessen zu sichern, hochzuladen, neuladen, cache, mittelscharfer-senf?
Edit // Ich habs runtergeladen und getestet - geht.
Zuletzt bearbeitet von SimonDerDude am Fr 27.09.2013 13:56, insgesamt 1-mal bearbeitet
|
|
| |
|
|
fyll
Dabei seit: 20.09.2003
Ort: Augsburg
Alter: 39
Geschlecht:
|
Verfasst Sa 28.09.2013 07:54
Titel
|
|
|
| siunt hat geschrieben: | | Nein, da tut sich leider überhaupt nichts. |
Dann musst halt selbst ne Problemlösung finden.
Wenn du mit "Rechtsklick"->"Element untersuchen" das Element anschaust, siehst das Ding mit seinen CSS-Attributen im DOM, auch wenn es nachträglich mit JS erzeugt/angepasst wurde.
Rechts siehst die greifenden CSS-Selektoren und kannst direkt daran rumschrauben, um zu sehen, was wie geht...
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Fancybox und jQuery Draggable
jquery - fancybox und easySlider
jquery easySlider + Fancybox
jQuery Fancybox per Js aufrufen?
FancyBox und Flash
Fancybox und Imagemap
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
