[GELÖST] Dynamic-Customizable-jQuery-AJAX-Modal-Plugin-jfLightBoxLoad

kwwuser · 04. März 2016

Hi leute

Ich habe folgendes im Internet gefunden.
Da ich absoluter anfänger in JS bin möchte ich folgendes gern wissen von den cracks hier .

Per Drag and Drop in die Dropzone

und die Objekte sollten nach dem Drop unterschiedliche HTML files in der lightbox anzeigen. (External.html und External2.html)
Index.html

Code:

<link href="../jfLightBoxLoad.css" rel="stylesheet" type="text/css" />
<link href="index.css" rel="stylesheet" type="text/css" />

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.12/jquery.transit.min.js"></script>
<script type="text/javascript" src="../jquery.jfLightBoxLoad.js"></script>

<script type="text/javascript">
$(document).ready(function() {
  /* ===== Basic example */
  $('.lboxBasic').jfLightBoxLoad({});
  /* Basic example */

  $('.lboxAdvanced').jfLightBoxLoad({
    animationFrom:{opacity:'0', top:'80%'},
    animationTo:{opacity:'1', top:'50%'},
    useTransit:true,
    ease:'easeInOutBack',
  });   
  $('.dragg').draggable();
  $('.drop-zone').droppable({
    drop:function(event, ui){
      console.log("dr")
      $(this).data('jfLightBoxLoad').launch();
    },
    accept:'.dragg',
  });
});
</script>


</head>

<body>
<div id="shell">
    <h1>jQuery jfLightBoxLoad Plugin Examples</h1>
    <div class="jquery-script-ads" style="margin:30px auto;">
<script type="text/javascript"
src="#">
</script></div>
    <ul>
      <li><a class="lboxBasic" href="external.html">Load From Anchor Click</a></li>
      
  </ul> 
  <div 
      class="lboxAdvanced drop-zone"
      data-mouse-event="none" 
      data-hash="external.html">
      <h2>Drop Zone</h2>
    </div>
  <div class="dragg">1Load on Dragg Dropped1</div>
    <div 
      class="lboxAdvanced drop-zone"
      data-mouse-event="none" 
      data-hash="external1.html">
      <h2>Drop Zone</h2>
    </div>
  <div class="dragg">2 Load on Dragg Dropped2 </div>
</div>

External.js

Code:

// JavaScript Document
$('#external p').animate({'margin-top':'100px'},250);

jquerylightbox.js

Code:

(function($) {

    $.jfLightBoxLoad = function(element, options) {
        var plugin = this;
        var $element = $(element),
             element = element;
        var $ldElement;
        var dataatts = $element.data();
        var win = false;

        var defaults = {
            loadElement: 'body',
            hash:$element.attr('href'),
            mouseEvent:'click',
            iframe:false,
            animationFrom:{opacity:'0'},
            animationTo:{opacity:'1'},
            pause:0,
            speed:500,
            ease:'swing',
            pathToScript:null,
            useTransit:false,
            onStart: function() {}, 
            onStartArgs: [],
            onComplete: function() {}, 
            onCompleteArgs: [],
            onClosed: function() {}, 
            onClosedArgs: [],
        }
        plugin.settings = {};

        plugin.init = function() {
            plugin.settings = $.extend({}, defaults, options, dataatts);             
            $ldElement = $(plugin.settings.loadElement);

            if (plugin.settings.useTransit){
                $.fn.animate = $.fn.transition;
            }	
			if (plugin.settings.event != 'none'){
				$element.bind(plugin.settings.mouseEvent, onMouse)
			}
        }
        // mouse event
        function onMouse(event){
            event.preventDefault();              
            plugin.launch();
        };
        // launch function
        plugin.launch = function(){
            win = true;
            // call on start function
            plugin.settings.onStart.apply(plugin,plugin.settings.onStartArgs);
            // make tags
            var tag = new Array();
            tag.push('<div class="lb_lightbox">');
            tag.push('<div class="lb_shade"></div>');
            tag.push('<div class="lb_loadAnimation">loading</div>');
            tag.push('<div class="lb_window">');
            // iframe ?
            if (plugin.settings.iframe){
                tag.push('<iframe class="lb_content" frameborder="0" src ='+plugin.settings.hash+' width="100%" height:"100%"></iframe>');
            } else {
                tag.push('<div class="lb_content"></div>');
            }
            tag.push('<div class="lb_closeBtn">close</div>');
            tag.push('</div></div>');
            var tagString = '';
            $(tag).each(function(index, element){
                tagString+=element;
            });
            $ldElement.prepend(tagString);
            // cache objects 
            $lb = $('.lb_lightbox');  
            $lbWin = $('.lb_window');
            // load into content or iframe ?
            if (plugin.settings.iframe){
                $('.lb_content').load(loadComplete);
            } else {
               $('.lb_content').load(plugin.settings.hash, loadComplete); 
            }
            // shade animation
            $('.lb_shade').css({opacity:'0'})
                .animate({opacity:'1'}, plugin.settings.speed);
            // set, load, and animate window
            $lbWin.css(plugin.settings.animationFrom);
            function loadComplete() {
                $lbWin.delay(plugin.settings.pause).animate(plugin.settings.animationTo, plugin.settings.speed, plugin.settings.ease, completed);
                $('.lb_loadAnimation').animate({opacity:'0'}, plugin.settings.speed*.8, function(){
                    $(this).remove();
                });     
            };          
        }
        function completed(){
            // add close functionality
            $('.lb_closeBtn, .lb_shade').bind('click',plugin.close); 
            // launch external script
            if (plugin.settings.pathToScript){
                 $.getScript(plugin.settings.pathToScript);
            }
            // call on complete function
            plugin.settings.onComplete.apply(plugin,plugin.settings.onCompleteArgs); 
        }
        plugin.close = function(){
            $lbWin.animate(plugin.settings.animationFrom, plugin.settings.speed, plugin.settings.ease);
            $lb.animate({opacity:'0'},plugin.settings.speed, "", function(){      
                $('.lb_content').unload();
                $('.lb_closeBtn, .lb_shade').unbind('click');
                $lb.remove();
                plugin.settings.onClosed.apply(plugin,plugin.settings.onClosedArgs);
                win = false;
            });  
        }  
        plugin.destroy = function(){
            if (win){
                plugin.close();
            }  
            $element.unbind(plugin.settings.mouseEvent, onMouse)
            $element.removeData('jfLightBoxLoad', plugin);
            plugin = null;
        }  
        plugin.init();
    }

    $.fn.jfLightBoxLoad = function(options) {
        return this.each(function() {
            if (undefined == $(this).data('jfLightBoxLoad')) {
                var plugin = new $.jfLightBoxLoad(this, options);
                $(this).data('jfLightBoxLoad', plugin);
            }
        });
    }
})(jQuery);

Ist bestimmt nur ne kleinigkeit

grüße und danke

kkapsner · 04. März 2016

Und was ist jetzt konkret deine Frage? Wo hängst du?

kwwuser · 04. März 2016

ich habs mal hochgeladen

jQuery jfLightBoxLoad Plugin Examples

Es wird beim zweiten DRAG Objekt immer nur External.html geladen nicht aber External1.html

kkapsner · 04. März 2016

Du musst ja auch irgendwo auf das data-hash des gedroppten Elements zugreifen... Droppable Widget | jQuery UI API Documentation

- - - Aktualisiert - - -

Bzw. du hast die Unterschiede ja in den Drop-zones... die Draggable sind ja komplett identisch und die Droppable liegen direkt übereinander...

kwwuser · 04. März 2016

Ich dachte es funktioniert so :

HTML:

  $('.drop-zone').droppable({
    drop:function(event, ui){
      console.log("dr")
      $(this).data('jfLightBoxLoad').launch();
    },
    accept:'.dragg',  -->in  accept:'.dragg1', abändern  -->

und im Div dann dragg1

HTML:

     class="lboxAdvanced drop-zone"
      data-mouse-event="none" 
      data-hash="external1.html">
<div class="dragg1">2 Load on Dragg Dropped2 </div>

somit müsste doch External2.html geöffnet werden .... hmmm sorry bin totally JS Newbie

kwwuser · 05. März 2016

Ich glaube ich hab es zum Teil verstanden

HTML:

$('.drop-zone').droppable({
drop:function(event, ui){ --> hier wird die drop Zone Funktion dem Event Handler zugeführt !!

console.log("dr") --> log 
$(this).data('jfLightBoxLoad').launch();
}, --> hier wird die load box when dropped ausgeführt 
accept:'.dragg', --> was für Objekt akzeptiert wird

Jetzt müsste doch nur noch ein weiteres accept: dragg1 angeben werden oder ?

Im DIV dropzone dann Data-Hash auf external1.html
Zum Aufrufen DIV class=dragg1

Ist das so zum Teil richtig !! Grüsse

kkapsner · 05. März 2016

kwwuser schrieb:
Jetzt müsste doch nur noch ein weiteres accept: dragg1 angeben werden oder ?

Nein, deine beiden Draggable haben doch die gleiche Klasse. Und unterscheiden sich nur im dargestellten Text.

Das data-hash ist auf den Droppable!

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery jfLightBoxLoad Plugin Examples</title>
<link href="../jfLightBoxLoad.css" rel="stylesheet" type="text/css" />
<link href="index.css" rel="stylesheet" type="text/css" />

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.12/jquery.transit.min.js"></script>
<script type="text/javascript" src="../jquery.jfLightBoxLoad.js"></script>

<script type="text/javascript">
$(document).ready(function() {
  /* ===== Basic example */
  $('.lboxBasic').jfLightBoxLoad({});
  /* Basic example */

  $('.lboxAdvanced').jfLightBoxLoad({
    animationFrom:{opacity:'0', top:'80%'},
    animationTo:{opacity:'1', top:'50%'},
    useTransit:true,
    ease:'easeInOutBack',
  });   
  $('.dragg').draggable();
  $('.drop-zone').droppable({
    drop:function(event, ui){
      console.log("dr")
      $(this).data('jfLightBoxLoad').launch();
    },
    accept:'.dragg',
  });
});
</script>


</head>

<body>
<div id="shell">
    <h1>jQuery jfLightBoxLoad Plugin Examples</h1>
    <div class="jquery-script-ads" style="margin:30px auto;">
<script type="text/javascript"
src="#">
</script></div>
    <ul>
      <li><a class="lboxBasic" href="external.html">Load From Anchor Click</a></li>
      
  </ul> 
  <div 
      class="lboxAdvanced drop-zone"
      data-mouse-event="none" 
      data-hash="external.html">
      <h2>Drop Zone</h2>
    </div>

  <div class="dragg">1Load on Dragg Dropped1</div>
  	<p></p>
    <div 
      class="lboxAdvanced drop-zone"
      style="right: 250px"
      data-mouse-event="none" 
      data-hash="external1.html">
      <h2>Drop Zone</h2>
    </div>
  <div class="dragg">2 Load on Dragg Dropped2 </div>
</div>

</html>

wenn du jetzt auf dem Linken fallen lässt, wird die nicht existierende external1.html geladen.

kwwuser · 05. März 2016

Hey Super klappt manchmal sieht man den Fehler nicht vor lauter Code
Vielen Dank
Admin bitte auf gelöst stellen

kkapsner · 05. März 2016

kwwuser schrieb:
Vielen Dank

Bitte - gern geschehen.

kwwuser schrieb:
Admin bitte auf gelöst stellen

Erledigt.

[GELÖST] Dynamic-Customizable-jQuery-AJAX-Modal-Plugin-jfLightBoxLoad

kwwuser

New member

kkapsner

Super Moderator

kwwuser

New member

kkapsner

Super Moderator

kwwuser

New member

kwwuser

New member

kkapsner

Super Moderator

kwwuser

New member

kkapsner

Super Moderator