HTML / CSS / prettyPhoto: Kästen mit Fragezeichen

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Schreibfeder, 3. April 2015 .

  1. 3. April 2015
    Hallo miteinander,

    ich verzweifle hier langsam ;(

    Es geht um die Website eines Freundes und es handelt sich um eine wirkliche "Kleinigkeit".

    Hier erstmal die Website: http://www.augenblick.dk

    Direkt auf der der Startseite seht ihr unten die kleinen Kästen mit Fragezeichen - wie bekomme ich die weg?

    HTML:
     </div><!-- Header Wrapper -->
     <div class="footer_wrapper"> 
     <div class="socials_wrapper">
     <ul class="socials_list">
     <li><a class="ico_social_instagram" target="_blank" href="http://instagram.com/jambodk/" title="Instagram"></a></li>
     <li><a class="ico_social_tumblr" target="_blank" href="http://augenblickdk.tumblr.com" title="Tumblr"></a></li>
     </ul>
     </div>
     <div class="copyright">Copyright &copy; Dennis Kupfer Photography / DIGITAL RETOUCH<br>All Rights Reserved</div>
     </div><!-- footer_wrapper -->
     </div>
     </header>
     
     <a href="javascript:void(0)" class="control_toggle"></a>
     
     <div class="custom_bg img_bg def_bg"></div>
     
     <script type="text/javascript" src="js/jquery.min.js"></script>
     <script type="text/javascript" src="js/jquery-ui.min.js"></script> 
     <script type="text/javascript" src="js/modules.js"></script>
     <script type="text/javascript" src="js/theme.js"></script>
     <script>
     gallery_set = [
     {type: "image", image: "img/gallery/home/home_01.jpg"},
     {type: "image", image: "img/gallery/home/home_03.jpg"},
     {type: "image", image: "img/gallery/home/home_04.jpg"},
     {type: "image", image: "img/gallery/home/home_05.jpg"},
     {type: "image", image: "img/gallery/home/home_06.jpg"},
     ]
     
     jQuery(document).ready(function(){
     "use strict";
     jQuery('html').addClass('hasPag');
     jQuery('.custom_bg').remove();
     jQuery('body').fs_gallery({
     fx: 'fade', /*fade, zoom, slide_left, slide_right, slide_top, slide_bottom*/
     fit: 'no_fit',
     slide_time: 3000, /*This time must be < then time in css*/
     autoplay: 1,
     show_controls: 1,
     slides: gallery_set
     });
     jQuery('.fs_share').click(function(){
     jQuery('.fs_fadder').removeClass('hided');
     jQuery('.fs_sharing_wrapper').removeClass('hided');
     jQuery('.fs_share_close').removeClass('hided');
     });
     jQuery('.fs_share_close').click(function(){
     jQuery('.fs_fadder').addClass('hided');
     jQuery('.fs_sharing_wrapper').addClass('hided');
     jQuery('.fs_share_close').addClass('hided');
     });
     jQuery('.fs_fadder').click(function(){
     jQuery('.fs_fadder').addClass('hided');
     jQuery('.fs_sharing_wrapper').addClass('hided');
     jQuery('.fs_share_close').addClass('hided');
     });
     
     jQuery('.fs_controls').addClass('up_me');
     jQuery('.fs_title_wrapper ').addClass('up_me');
     
     jQuery('.close_controls').click(function(){
     if (jQuery(this).hasClass('open_controls')) {
     jQuery('.fs_controls').removeClass('hide_me');
     jQuery('.fs_title_wrapper ').removeClass('hide_me');
     jQuery('.fs_thmb_viewport').removeClass('hide_me');
     jQuery('header.main_header').removeClass('hide_me');
     jQuery(this).removeClass('open_controls');
     } else { 
     jQuery('header.main_header').addClass('hide_me');
     jQuery('.fs_controls').addClass('hide_me');
     jQuery('.fs_title_wrapper ').addClass('hide_me');
     jQuery('.fs_thmb_viewport').addClass('hide_me');
     jQuery(this).addClass('open_controls');
     }
     });
     
     jQuery('.main_header').removeClass('hided');
     jQuery('html').addClass('single-gallery');
     jQuery('.control_toggle').click(function(){
     jQuery('html').toggleClass('hide_controls');
     }); 
     });
     </script>
     <script type="text/javascript" src="js/fs_gallery.js"></script>
    </body>
    </html>
    Hat das etwas mit jQuery und prettyPhoto zu tun? Muss ich da irgendeine Funktion deaktivieren? Und wenn ja wie mache ich das?
    Das gleiche gilt für die Gallerien: Beispielsweise für diese hier: http://www.augenblick.dk/gallery_africa.html


    Wenn ich da auf ein Foto drücke, dann möchte ich nur, dass das große mit Slideshow angezeigt wird, ohne die kleinen Bilder darunter.
    Liege ich damit richtig, dass es die gleiche Funktion betrifft? Hier der Code:

    HTML:
     <div class="fullscreen_block hided">
     <div class="fs_blog_module fw_port_module sorting_block">
     <div class="blogpost_preview_fw fw-portPreview element fashion">
     <div class="fw-portPreview-wrapper mas_style1 pr40 pb40">
     <a class="featured_ico_link prettyPhoto" href="img/gallery/africa/africa_01_02.jpg" data-rel="prettyPhoto[gallery111]" title="">
     <img width="540" src="img/gallery/africa/africa_01_01.jpg" alt="" />
     <div class="fw-portPreview-fadder"></div>
     </a>
     <div class="gallery_likes gallery_likes_add">
     </div> 
     </div> 
     </div>
     </div> 
     <div class="fs_blog_module fw_port_module sorting_block">
     <div class="blogpost_preview_fw fw-portPreview element fashion">
     <div class="fw-portPreview-wrapper mas_style1 pr40 pb40">
     <a class="featured_ico_link prettyPhoto" href="img/gallery/africa/africa_02_02.jpg" data-rel="prettyPhoto[gallery111]" title=""> 
     <img width="540" src="img/gallery/africa/africa_02_01.jpg" alt="" />
     <div class="fw-portPreview-fadder"></div>
     </a>
     <div class="gallery_likes gallery_likes_add">
     </div> 
     </div> 
     </div>
     </div> 
     <div class="fs_blog_module fw_port_module sorting_block">
     <div class="blogpost_preview_fw fw-portPreview element fashion">
     <div class="fw-portPreview-wrapper mas_style1 pr40 pb40">
     <a class="featured_ico_link prettyPhoto" href="img/gallery/africa/africa_03_02.jpg" data-rel="prettyPhoto[gallery111]" title="">
     <img width="540" src="img/gallery/africa/africa_03_01.jpg" alt="" />
     <div class="fw-portPreview-fadder"></div>
     </a>
     <div class="gallery_likes gallery_likes_add already_liked">
     </div> 
     </div> 
     </div>
     </div> 
     <div class="clear"></div> 
     </div>
     
     <div class="custom_bg img_bg def_bg"></div>
     
     <script type="text/javascript" src="js/jquery.min.js"></script>
     <script type="text/javascript" src="js/jquery-ui.min.js"></script> 
     <script type="text/javascript" src="js/modules.js"></script>
     <script type="text/javascript" src="js/theme.js"></script>
     <script>
     jQuery(document).ready(function($){
     "use strict";
     jQuery('.custom_bg').remove();
     port_setup();
     }); 
     jQuery(window).load(function($){
     "use strict";
     port_setup();
     }); 
     jQuery(window).resize(function($){
     "use strict";
     port_setup();
     });
     function port_setup() {
     "use strict";
     jQuery('.fw-portPreview-content').each(function(){
     jQuery(this).css('margin-top', -1*jQuery(this).height()/2+'px');
     }); 
     } 
     </script> 
    </body>
    </html>
    Ich bitte um Eure Hilfe. :]

    Beste Grüße
     
  2. 3. April 2015
    AW: HTML / CSS / prettyPhoto: Kästen mit Fragezeichen

    ah jetzt sehe ich was du meinst. da steht dann undefined.

    Code:
    <div class="fs_thmb_wrapper">
    <ul class="fs_thmb_list" style="width:400px">
    
     <li class="fs_slide_thmb slide0" data-count="0">
    
     <img src="undefined" alt="undefined 0"></img>
     <div class="fs_thmb_fadder"></div>
    
    </li>
    da sollten vermutlich vorschaubilder sein, aber das array wo die angegeben sein sollen ist wohl leer.

    in der fs_gallery.js finden sich die class: if (fs_options.slides[thisSlide].type == "image") {...}

    Vermutlich fehlt hier

    Code:
    gallery_set = [
     {type: "image", image: "img/gallery/home/home_01.jpg"},
     {type: "image", image: "img/gallery/home/home_03.jpg"},
     {type: "image", image: "img/gallery/home/home_04.jpg"},
     {type: "image", image: "img/gallery/home/home_05.jpg"},
     {type: "image", image: "img/gallery/home/home_06.jpg"},
     ]
    die fs_options.slides[thisSlide].thmb

    Füge mal folgendes an in dem Objekt:

    Code:
    {type: "image", image: "img/gallery/home/home_06.jpg",[color=blue] thmb: "img/gallery/home/home_06.jpg", alt: "Bild"[/color]},
    
    dann sollte es weg sein.

    Alternativ könntest du in der fs_gallery.js auch die oben genannte funktion so erweitern:

    if (fs_options.slides[thisSlide].type == "image" && false) {...}
     
  3. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.