Fancybox

lunedì 28 marzo 2011 - 09.59

trinity Profilo | Guru

Ciao Ragazzi, qualcuno ha mai utilizzato il fancybox?
Ho visto le animazione che crea questo script java e volevo utilizzarlo e precisamente volevo utilizzare la visualizzazione iframe aprendo una pagina aspx. da me creata ma non ci riesco...Qualcuno sa darmi un aiutino?
Cirillo Fabio
www.wondernet.biz
fabio@wondernet.biz
http://blogs.dotnethell.it/fabiocirillo/
http://wnetsoftware.blogspot.com

alexmed Profilo | Guru

Ciao

Questo nell' <head>

Il codice sorgente non è stato renderizzato qui
perchè non c'è sufficiente spazio.
Clicca qui per visualizzarlo in una nuova finestra

Questo nel <body>


<a id="various3" href="la_pagina_aspx.aspx">Iframe</a>

Una volta scaricato il pacchetto copio la cartella fancybox nella cartella Js del mio sito.

alexmed

trinity Profilo | Guru

il mio sito non ha una cartella js quindi la creo :)
Comunque la pagina che deve essere visualizzata come iframe viene richiamata a monte da un'altra pagine aspx quindi in quest'ultima nell'head ci metto lo script java e nel body la stringa che richiama la pagina dettaglio_news.aspx
Cirillo Fabio
www.wondernet.biz
fabio@wondernet.biz
http://blogs.dotnethell.it/fabiocirillo/
http://wnetsoftware.blogspot.com

alexmed Profilo | Guru

Ciao
Non ho capito se hai risolto o no?
alexmed

trinity Profilo | Guru

No purtroppo non mi trovo in ufficio sono in viaggio proverò questa sera ma volevo chiederti il codice che mi hai postato lo devo inserire nella pagina che devo aprire come iframe oppure nella pagina che poi chiamerà l'iframe?
calcola che anche la pagina che deve chiamare l'iframe è una pagina aspx
Cirillo Fabio
www.wondernet.biz
fabio@wondernet.biz
http://blogs.dotnethell.it/fabiocirillo/
http://wnetsoftware.blogspot.com

alexmed Profilo | Guru

Mettiamo il caso che dalla pagina A.aspx devi richiamare la pagina B.aspx (nel tuo caso: dettaglio_news.aspx).
Tutto il codice devi metterlo nella pagina A.aspx.

Se alla pagina B devi passargli un paramtro dalla pagina A allora integri il link: <a class="detail" href="dettaglio_news.aspx?&ID=<%# Eval("DetailID") %>">Iframe</a>

E lo script lo modifichi così:

<script type="text/javascript">
$(document).ready(function() {
$("a.detail").fancybox({
'width': '75%',
'height': '75%',
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'iframe'
});
});
</script>

La classe "detail" deve essere assegnata solo ai link che richiamano la pagina dettaglio_news.aspx

alexmed

trinity Profilo | Guru

Non mi funziona..
ti spiego ho fatto come hai detto te ma la pagina aspx si apre normalmente e non con l'effetto dell'iframe
ti spiego io sto creando queste pagine con vb2010 non vorrei che devo gestire il codice diversamente....ti invio in allegato le due pagine ci puoi dare un'occhiata se hai tempo?

ciao e grazie
Cirillo Fabio
www.wondernet.biz
fabio@wondernet.biz
http://blogs.dotnethell.it/fabiocirillo/
http://wnetsoftware.blogspot.com

alexmed Profilo | Guru

Ciao
Sperando di aver capito le tue esigenze ti allego un progetto fatto con Visual Web Developer 2008, ex-novo.

Ciao

alexmed

trinity Profilo | Guru

Ciao funziona grazie, solo che ora ho un piccolo problemino. Ti spiego se utilizzo il fancybox su un button o un linkbutton come anche dal tuo esempio funziona perfettamente, ma io dovrei richiamare un iframe dai pulsanti che si generano in automatico da una gridview...ossia dal pulsante modifica quando clicco sul record selezionato mi devi apparire l'iframe, come posso fare?
Cirillo Fabio
www.wondernet.biz
fabio@wondernet.biz
http://blogs.dotnethell.it/fabiocirillo/
http://wnetsoftware.blogspot.com

alexmed Profilo | Guru

Con 2 piccole modifiche si risolve:

Prima cosa modifichiamo le colonne del GridView inserendone una nostra personalizzata.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="AccessDataSource1">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<a class="linkIframe" href="User.aspx?ID=<%# Eval("ID") %>">Select</a>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False"
SortExpression="UserId" />
</Columns>
</asp:GridView>

Come vedi ho inserito un semplice tag <a> a cui ho assegnato una classe linkIframe.
Solo questo tag dovra avere questa classe

Poi modifichiamo lo script:

<script type="text/javascript">
$(document).ready(function() {
$(".linkIframe").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
</script>

A questo punto non ci resta che impostare la nostra pagina User.aspx per ricevere la QueryString
Quindi la query del db nella pagina User.aspx sarà:


<asp:AccessDataSource ID="AccessDataSource1" runat="server"
DataFile="~/mdb-database/db.mdb"
SelectCommand="SELECT * FROM [mia_tabella] WHERE ([ID] = ?)">
<SelectParameters>
<asp:QueryStringParameter Name="ID" QueryStringField="ID" Type="Int32" />
</SelectParameters>
</asp:AccessDataSource>

Prova un pò e fammi sapere
Ciao

alexmed

trinity Profilo | Guru

Io ho capito il tuo esempio ma mi diventa difficile modificare il mio in base al tuo codice perchè ancora non sono pratico :(. Pertanto ti posto il mio e ti dico 2 cose che vorrei evitare prima di tutto sul templatefiled appare il valore dell'id invece vorrei che apparisse il testo "Modifica" che poi cliccando prende il valore dell'id da passare come parametro..Poi deve essere un button e se eseguo il codice la pagina si apre ma non con l'effetto del fancybox

ecco il codice:

<asp:GridView ID="GridView2" runat="server" AllowPaging="True" AutoGenerateColumns="False" CellPadding="4" DataKeyNames="id" DataSourceID="SqlDataSource1" ForeColor="#333333" GridLines="None" HorizontalAlign="Center" Width="799px"> <AlternatingRowStyle BackColor="White" ForeColor="#284775" /> <Columns> <asp:TemplateField ShowHeader="False"> <ItemTemplate> <asp:Button ID="Button1" runat="server" CausesValidation="False" CommandName="Select" Text='<%# Eval("Id") %>' /> </ItemTemplate> <HeaderStyle HorizontalAlign="Left" Width="60px" /> </asp:TemplateField> <asp:CommandField ButtonType="Button" ShowDeleteButton="True"> <HeaderStyle HorizontalAlign="Left" Width="60px" /> </asp:CommandField> <asp:BoundField DataField="id" HeaderText="id" InsertVisible="False" ReadOnly="True" SortExpression="id" Visible="False" /> <asp:BoundField DataField="datanotizia" DataFormatString="{0:d}" HeaderText="Data" ReadOnly="True" SortExpression="datanotizia"> <HeaderStyle HorizontalAlign="Center" Width="80px" /> <ItemStyle HorizontalAlign="Center" Width="80px" /> </asp:BoundField> <asp:BoundField DataField="notizia" HeaderText="Notizia" SortExpression="notizia"> <HeaderStyle HorizontalAlign="Left" /> <ItemStyle HorizontalAlign="Left" /> </asp:BoundField> </Columns> <EditRowStyle BackColor="#999999" /> <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" /> <RowStyle BackColor="#F7F6F3" ForeColor="#333333" /> <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" /> <SortedAscendingCellStyle BackColor="#E9E7E2" /> <SortedAscendingHeaderStyle BackColor="#506C8C" /> <SortedDescendingCellStyle BackColor="#FFFDF8" /> <SortedDescendingHeaderStyle BackColor="#6F8DAE" /> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:liceoConnectionString %>" DeleteCommand="DelNotizie" DeleteCommandType="StoredProcedure" SelectCommand="Get_News" SelectCommandType="StoredProcedure"> <DeleteParameters> <asp:Parameter Name="Id" Type="Int32" /> </DeleteParameters> </asp:SqlDataSource>

ora però l'ho modificato così:

Il codice sorgente non è stato renderizzato qui
perchè non c'è sufficiente spazio.
Clicca qui per visualizzarlo in una nuova finestra

ma vorrei il button anzichè il linkframe

Ciao e grazie
Cirillo Fabio
www.wondernet.biz
fabio@wondernet.biz
http://blogs.dotnethell.it/fabiocirillo/
http://wnetsoftware.blogspot.com

alexmed Profilo | Guru

Vedi allegato

Ciao

alexmed

trinity Profilo | Guru

Il codice funziona solo che te passi l'id tutto attraverso codice asp, invece io utilizzo codice vb attraverso vbnet quindi devo cercare di portare il valore dell'Id nel load della pagina news.aspx così eseguo una stored e carico i dati


Cirillo Fabio
www.wondernet.biz
fabio@wondernet.biz
http://blogs.dotnethell.it/fabiocirillo/
http://wnetsoftware.blogspot.com

alexmed Profilo | Guru

Ok, ma hai già un codice (VB.NET) oppure lo devi impostare?

alexmed

trinity Profilo | Guru

leggendo in rete sono arrivato a questa conclusione ossia in asp ho scritto così:

<ItemTemplate>
<asp:Button ID="Button2" runat="server" CssClass="linkIframe" Text="Modifica" CommandName="Idnotizia" CommandArgument='<%#Eval("Id") %>' href='Editnews.aspx'/>
</ItemTemplate>

in pratica ho pensato di associare il valore dell'id al commandArgument ed impostare anche un commandname così posi nell'evento rowcommand scrivevo questo:


Private Sub GridView2_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles GridView2.RowCommand
If e.CommandName = "Idnotizia" Then
Session.Add("id", e.CommandArgument)
End If
End Sub

pertanto mi creavo un item session che portavo alla pagina iframe...solo che se faccio una prova il codice dell'evento Rowcommand non viene eseguito, salta e fa visualizzare direttamente l'iframe

Questa era la mia idea...
Cirillo Fabio
www.wondernet.biz
fabio@wondernet.biz
http://blogs.dotnethell.it/fabiocirillo/
http://wnetsoftware.blogspot.com

alexmed Profilo | Guru

Così, credo non sia possibile in quanto non eseguendo il PostBack il valore non viene attribuito all'istanza Session.

Faccio delle prove e ti dico.

Ciao

alexmed

trinity Profilo | Guru

guarda a me serve gestire i fancybox quella è la cosa importante.
Senti mi viene da porti anche questa domanda ma è possibile direttamente nell'evento rowcommand o cmq in vb richiavare il fancybox che esegue la stessa cosa del codice di sotto riportato?

<asp:Button ID="Button2" runat="server" CssClass="linkIframe" Text="Modifica" CommandName="Idnotizia" CommandArgument='<%#Eval("Id") %>' href='Editnews.aspx'/>

perchè a questo punto intercettare l'id della riga e passarla ad una session diventerebbe + facile


Cirillo Fabio
www.wondernet.biz
fabio@wondernet.biz
http://blogs.dotnethell.it/fabiocirillo/
http://wnetsoftware.blogspot.com

alexmed Profilo | Guru

Dunque.
Una soluzione l'ho trovata ... guarda un pò se può andar bene e/o migliorarla.

L'idea è quella di fargli processare il fancybox dopo il PostBack della pagina, quindi dopo aver impostato il parametro nella Session.
Per ora sono riuscito ma in due fasi: prima seleziono e poi lancio lo script fancybox.

La GridView sarà:

Il codice sorgente non è stato renderizzato qui
perchè non c'è sufficiente spazio.
Clicca qui per visualizzarlo in una nuova finestra
Quindi dal Button rimuoviamo la classe che scatenerebbe il fancybox.

Da codice invece abbiamo:

Il codice sorgente non è stato renderizzato qui
perchè non c'è sufficiente spazio.
Clicca qui per visualizzarlo in una nuova finestra

Ossia: ogni volta che selezioni una riga rimuoviamo la classe "linkIframe" che scatenerebbe l'evento da tutti i Button della GridView e la stessa la assegni solo al Button della riga selezionata.
A questo punto, rischiaccio il Button a cui ho modificato il testo e nel mentre posso valorizzare la Session.

Cosa ne dici?

Adesso vedo se c'è un sistema per eseguire le 2 operazioni in una volta


alexmed

trinity Profilo | Guru

Allora il codice funziona, solo che mi capita che quando clicco sul button il cui nome di partenza è Seleziona, il clic seleziona il record ed il Button cambia il nome in Modifica ma questo avviene anche per tutti gli altri record, è normale?
Pensavo che il cambio di Text avvenisse solo per il Button selezionato.....
Ciao

Cirillo Fabio
www.wondernet.biz
fabio@wondernet.biz
http://blogs.dotnethell.it/fabiocirillo/
http://wnetsoftware.blogspot.com

trinity Profilo | Guru

Ciao scusa se ti disturbo, ma tempo fa parlammo dell'argomento tema di questo post ossia delle jquery fancybox e come passarle tra due pagine aspx e te mi allegasti un file potresti rimandarlo perchè il forum ha avuto problemi e i file allegati prima di questo problema sono andati persi momentaneamente.

Ciao e grazie
Cirillo Fabio
www.wondernet.biz
fabio@wondernet.biz
http://blogs.dotnethell.it/fabiocirillo/
http://wnetsoftware.blogspot.com

alexmed Profilo | Guru

Ciao,
Stasera guardo nel PC di casa e se lo ritrovo te lo allego

Ciao

alexmed

alexmed Profilo | Guru

Ciao
Sul PC niente, non lo trovo.
Però ho visto che nella mascherina che ti compare cliccando "Allega un file" compare ancora nella lista.
Provo così (sperando che quello che si vede non sia solo il link)

Nel caso non funzionasse continuo a cercare nelle varie chiavette.

Ciao

alexmed

alexmed Profilo | Guru

Trovato.

alexmed

trinity Profilo | Guru

Ciao Alex,
prima di tutto grazie, il file funziona solo che io devo applicare il codice un una pagina aspx che è connessa al una pagemaster...Ho fatto diverse prove ossia inserire il seguente codice:

Il codice sorgente non è stato renderizzato qui
perchè non c'è sufficiente spazio.
Clicca qui per visualizzarlo in una nuova finestra

nella pagina master mentre nella pagina dove deve essere eseguito lo script che richiama la jquery gli ho inserito il restante codice, ossia così:

<script type="text/javascript"> $(document).ready(function () { $("#Button1").fancybox({ 'width': '75%', 'height': '75%', 'autoScale': false, 'transitionIn': 'none', 'transitionOut': 'none', 'type': 'iframe' }); }); </script> <asp:Button ID="Button1" runat="server" Text="Invia richiesta" href="Confermaemail.aspx"/>

ma non funziona. Ho provato ad inserire il tutto nell'unica pagina ma non funziona. Non capisco il perchè ti allego la pagina pagemaster e le altre due pagine puoi dargli un'occhiata appena hai tempo?

Grazie
Cirillo Fabio
www.wondernet.biz
fabio@wondernet.biz
http://blogs.dotnethell.it/fabiocirillo/
http://wnetsoftware.blogspot.com

alexmed Profilo | Guru

Al volo ... senza aprire l'allegato.
Il proplema è dovuto alla struttura della MasterPage che "rinomina" gli ID dei controlli. Quindi Button1 non è più Button1 ma sarà qls del genere:
ctl00_ + id del ContentPlaceHolder + _Button1"
Se usi IE 8 o sup, per capire come viene rinominato il controllo, premi F12 (Strumenti di sviluppo), nella barra che ti compare clicca sul puntatore del mouse e seleziona il Button1: sotto potrai leggere il nuovo id che gli è stat assegnato.
A questo punto nella funzione jQuery sostituisci #Button1 con il nuovo ID.

Prova e fammi sapere.
Ciao

alexmed

totti240282 Profilo | Guru

In asp.net 4.0 c'è la possibilità di assegnare gli id statici senza farli creare con il concatenamento come succede a te.
C'è solo un capitano !!!!!!

alexmed Profilo | Guru

Ciao
Buono a sapersi. Ma che tu sappia anche con il 3.5 si possono impostare?

alexmed

totti240282 Profilo | Guru

Se ricordo bene è a partire dal 4.0

http://www.codeproject.com/KB/aspnet/ASP_NET4_0ClientIDFeature.aspx
C'è solo un capitano !!!!!!

trinity Profilo | Guru

Ok funziona ho usato per ora il concatenamento...ora se chiudo la pagina che viene aperta con la jquery, si possono resettare i campi della pagina in cui si inseriscono i dati e poi lancia la jquery come conferma?

Ciao e grazie
Cirillo Fabio
www.wondernet.biz
fabio@wondernet.biz
http://blogs.dotnethell.it/fabiocirillo/
http://wnetsoftware.blogspot.com
Partecipa anche tu! Registrati!
Hai bisogno di aiuto ?
Perchè non ti registri subito?

Dopo esserti registrato potrai chiedere
aiuto sul nostro Forum oppure aiutare gli altri

Consulta le Stanze disponibili.

Registrati ora !
Copyright © dotNetHell.it 2002-2017
Running on Windows Server 2008 R2 Standard, SQL Server 2012 & ASP.NET 3.5