| Autor | Zpráva | ||
|---|---|---|---|
| Magna Profil * |
#1 · Zasláno: 5. 4. 2015, 18:11:27 · Upravil/a: Magna
Dobrý den všem.
Potřeboval bych poradit jak upravit následující script.: function myFunction(e) {
var dataString = 'id1=' + e.getAttribute("data-id");
$.ajax({
type: "POST",
url: "lyrics.php",
data: dataString,
cache: false,
success: function(data) {
$("#test").html(data);
}
});
return false;Potřeboval bych aby se načtený text zobrazoval v popup okně (lightbox) Můžete mi prosím poupravit script případně nějak poradit? Děkuji. Na webu už lightbox používám pro obrázky a to pomocí že přidávám k obrázkům class="lightbox"
|
||
| Taps Profil |
#2 · Zasláno: 5. 4. 2015, 20:38:49
Magna:
Pomocí klasického lightboxu zobrazíš jen klasické obrázky. Pro zobrazení textu musíš použít nějaký jiný druhl lightboxu- např. http://jecas.cz/magnific-popup |
||
| Magna Profil * |
#3 · Zasláno: 5. 4. 2015, 21:24:15
Taps:
Tak jsem na to kouknul ale nevím jak na to. Ty data které chci mít v popup okně, tahám přes ajax a po té je na stránce zobrazuji pomocí <div id="test"></div>
A právě místo tohoto zobrazení bych chtěl aby se to ukázalo v popup okně. Script který ty data načítá z db je: lyrics.php: $promena = mysql_real_escape_string($_POST['id1']);
$query = "SELECT `skladba` FROM `lyrics` WHERE text_id = '".$promena."'";
$result = mysql_query($query) or die(Mysql_error());
While($results=MySQL_Fetch_Assoc($result))
{
echo '<div class="prvek-obalka"><div class="prvek2">'.$results['skladba'].'</div></div>';
} |
||
| Taps Profil |
#4 · Zasláno: 5. 4. 2015, 21:43:18
Magna:
Díval ses i do nápovědy? viz http://dimsemenov.com/plugins/magnific-popup/documentation.html#ajax-type Ve tvém připadě by měl odkaz směřovat na lyrics.php + přidat do odkazu class="ajax-popup-link" a samozřejmě nesmí chybět kod $('.ajax-popup-link').magnificPopup({
type: 'ajax'
}); |
||
| Magna Profil * |
#5 · Zasláno: 5. 4. 2015, 21:48:53
Taps:
Nějak takto: <script type="text/javascript">
$('.ajax-popup-link').magnificPopup({
type: 'ajax'
});
function myFunction(e) {
var dataString = 'id1=' + e.getAttribute("data-id");
$.ajax({
type: "POST",
url: "lyrics.php",
data: dataString,
cache: false,
success: function(data) {
$("#test").html(data);
}
});
return false;
}
</script> echo "<a onclick='myFunction(this)' class='ajax-popup-link' data-id='".$result['id']."'><img width='20' height='20' src='img/lupa.png'></a>"; Takto mi to ovšem nejde. |
||
| Taps Profil |
Magna:
ne, mělo by to stačit takto <a href="lyrics.php" class="ajax-popup-link"><img width='20' height='20' src='img/lupa.png'></a> <script type="text/javascript">
$('.ajax-popup-link').magnificPopup({
type: 'ajax'
});
</script> |
||
| Magna Profil * |
#7 · Zasláno: 6. 4. 2015, 14:54:27 · Upravil/a: Magna
Vyzkoušeno takto:
function myFunction(e) {
var dataString = 'id1=' + e.getAttribute("data-id");
$.ajax({
type: "POST",
url: "lyrics.php",
data: dataString,
cache: false,
success: function(data) {
var w = window.open("", "", "width=700,height=500");
w.document.write(data);
}
});
}Ale problém je že se to otvírá v novém okně prohlížeče. Mělo by to vypadat spíše takto: http://codepen.io/IronFeast/pen/fLovn Taps: > ne, mělo by to stačit takto > > <a href="lyrics.php" class="ajax-popup-link"><img width='20' height='20' src='img/lupa.png'></a> > > a pak stačí přidat jen ten javascript > <script type="text/javascript"> > $('.ajax-popup-link').magnificPopup({ > type: 'ajax' > }); > </script> To mi nezachová načítání dat ajaxem. |
||
| Taps Profil |
#8 · Zasláno: 6. 4. 2015, 15:51:36
Magna:
to id přeci můžeš dosazovat přímo do odkazu, a url v odkaze se načte do lightboxu |
||
| Magna Profil * |
#9 · Zasláno: 6. 4. 2015, 16:51:19 · Upravil/a: Magna
Taps:
Tak jsem to udělal přesně podle tvého a krom toho že mě to přesměruje na stránku lyrics.php s příslušným id to neudělá to co chci Živá ukázka Stačí kliknout na ten mikrofon v tabulce |
||
| Magna Profil * |
#10 · Zasláno: 6. 4. 2015, 18:19:28
Vyřešeno pomocí:
<script type="text/javascript">
$("a").click(function(){
var dataString = 'id1=' + $(this).attr("data-id");
$.ajax({
type: "POST",
url: "lyrics.php",
data: dataString,
cache: false,
success: function(data) {
$("#hide").show();
$("#popup").html(data).show();
}
});
});
$("#hide").click(function(){
$(this).hide();
$("#popup").hide();
});
</script> + dalších malých úprav |
||
|
Časová prodleva: 9 let
|
|||
0