[英]Image gallery passing data right to left in the same view using Entity Framework and Jquery
我想知道,我在代碼中做錯了什么?
我想將數據從右側發送到左側(本金)。
我可以做到,但是我的畫廊圖像有問題。
這是問題的視圖(已選擇第二個ID = 2的新聞),其中在圖庫中重復了最后一張圖像的3倍(ID = 2僅包含2張圖像,而沒有3張僅顯示名稱為2_1的圖像) )。
這是我單擊每個新聞和代碼時顯示數據的控制台。
var items = $(e).siblings(".imgRuta"); //the .class called "imgRuta" is hidden in the right side.
for (var i = 0; i < items.length; i++)
{
console.log(items[i].value);
$("img[id^='currentgalleryImagen']").attr("src", items[i].value);
}
這就是我在左側(主要)顯示圖片庫的方式。
<div class="noti_P">
<p id="currentprincipalContenido">@principalContenido</p>
@{int i = 1;}
@foreach (var n in Model)
{
foreach (var img in n.Noticias2)
{
if (img.Nombre.Contains(principalId + "_"))
{
<a href="@img.Ruta@img.Nombre@img.Extension" rel="prettyPhoto[gallery1]"><img id="@("currentgalleryImagen"+i)" src="@img.Ruta@img.Nombre@img.Extension" width="100px" height="100px"/></a>
i++;
}
}
}
</div>
這就是我如何在右側獲取隱藏數據
@{ var j = 0;}
@foreach (var img in n.Noticias2)
{
var imgRuta = @img.Ruta + @img.Nombre + @img.Extension;
<input class="Descripcion" type="hidden" value="@img.Descripcion" />
<input class="imgRuta" type="hidden" value="@imgRuta" id="imagen_@j" />
j++;
}
這是我的完整查看代碼。
@model PagedList.IPagedList<IntranetCorporativa.Model.Noticias>
@using PagedList.Mvc;
@{
var format = "dddd, MMMM dd, yyyy";
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_LayoutPage.cshtml";
int principalId = Model[0].IdNoticia;
string principalTitulo = Model[0].Titulo;
string principalContenido = Model[0].Contenido;
DateTime principalFechaDesde = Convert.ToDateTime(Model[0].FeDesde);
DateTime principalFechaHasta = Convert.ToDateTime(Model[0].FeHasta);
}
<script type="text/javascript"> //Script usado para enviar la data del lado derecho al izquierdo.
function changeDisplay(e) {
var principalTitulo = $(e).text();
var principalContenido = $(e).siblings(".Contenido:first").val();
var principalId = $(e).siblings(".IdNoticia:first").val();
var principalFechaDesde = $(e).siblings(".FeDesde:first").val();
var principalFechaHasta = $(e).siblings(".FeHasta:first").val();
var principalDescripcion = $(e).siblings(".Descripcion:first").val();
var principalImagen = $(e).siblings(".imgRuta:first").val();
var galleryImagen = $(e).siblings(".imgRuta").val();
var items = $(e).siblings(".imgRuta");
for (var i = 0; i < items.length; i++) {
console.log(items[i].value);
$("img[id^='currentgalleryImagen']").attr("src", items[i].value);
}
$("#currentprincipalTitulo").html(principalTitulo);
$("#currentprincipalContenido").html(principalContenido);
$("#currentprincipalId").html(principalId);
$("#currentprincipalFechaDesde").html(principalFechaDesde);
$("#currentprincipalFechaHasta").html(principalFechaHasta);
$("#currentprincipalDescripcion").html(principalDescripcion);
$("#currentprincipalImagen").attr("src", principalImagen);
}
</script>
<style> /* This is only a Style */
.uppercase {
text-transform: uppercase;
}
.limit {
text-overflow: ellipsis;
word-wrap: break-word;
overflow: hidden;
max-height: 3em;
line-height: 1.7em;
}
</style>
<!-- Principal o Lado Izquierdo -->
<div class="col-md-12 main">
<div class="header sec-title-hd">
<div class="bg-calendar"></div>
<div class="col-md-7">
<h5 class="pull-left">NOTICIAS</h5>
<div>
<a href="dashboard.html" class="btn sky-blue n-radius-b"> <img src="slider/img/arrow-left.png"> VOLVER</a>
</div>
</div>
</div>
<div class="content-inter">
<div class="container-fluid sec-title-hd-sub">
<div class="row">
<div class="col-md-7">
<div>
<figure class="img_N">
@foreach (var n in Model) // Accesar a la data de Noticias
{
var img = n.Noticias2.FirstOrDefault();
if (img != null && img.Nombre.Equals(principalId + "_0"))
{
<img id="currentprincipalImagen" src="@img.Ruta@img.Nombre@img.Extension" class="img-responsive" alt="@img.Nombre" />
<figcaption>
<p id="currentprincipalDescripcion">@img.Descripcion</p>
</figcaption>
}
}
</figure>
</div>
<div class="textnota">
<br>
<h6 id="currentprincipalId">@principalId</h6>
<h5 id="currentprincipalTitulo" class="titulo_N uppercase">@principalTitulo</h5>
<p id="currentprincipalFechaDesde" class="time">Desde: @principalFechaDesde.ToString(format)</p>
<p id="currentprincipalFechaHasta" class="time">Hasta: @principalFechaHasta.ToString(format)</p>
<div class="noti_P">
<p id="currentprincipalContenido">@principalContenido</p>
@{int i = 1;}
@foreach (var n in Model)
{
foreach (var img in n.Noticias2)
{
if (img.Nombre.Contains(principalId + "_"))
{
<a href="@img.Ruta@img.Nombre@img.Extension" rel="prettyPhoto[gallery1]"><img id="@("currentgalleryImagen"+i)" src="@img.Ruta@img.Nombre@img.Extension" width="100px" height="100px"/></a>
i++;
}
}
}
</div>
</div>
</div>
<div class="col-md-5">
<!-- Lista de Noticias del lado Derecho -->
@foreach (var n in Model)
{
<!-- Data mostrada -->
<blockquote class="blockquote-nopadding bg-calendar-border-left">
<p class="time_f">@n.FeDesde.ToString(format)</p>
<a href="#" onclick="changeDisplay(this)" class="titulo_N">@n.Titulo</a>
<p class="text-justify limit">@n.Contenido</p>
<!--Data Oculta que es Enviada al lado Izquierdo-->
<input class="IdNoticia" type="hidden" value="@n.IdNoticia" />
<input class="Contenido" type="hidden" value="@n.Contenido" />
<input class="FeDesde" type="hidden" value="Desde: @n.FeDesde.ToString(format)" />
<input class="FeHasta" type="hidden" value="Hasta: @n.FeHasta.ToString(format)" />
@{ var j = 0;}
@foreach (var img in n.Noticias2)
{
var imgRuta = @img.Ruta + @img.Nombre + @img.Extension;
<input class="Descripcion" type="hidden" value="@img.Descripcion" />
<input class="imgRuta" type="hidden" value="@imgRuta" id="imagen_@j" />
j++;
}
</blockquote>
}
<!-- Paginacion usando Libreria PagedList -->
Págnia @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) de @Model.PageCount
@Html.PagedListPager(Model, page => Url.Action("Index", new { page }))
</div>
</div>
</div>
</div>
</div>
謝謝。
我認為您只是在更改左側圖庫中已經存在的標簽上的圖像src 。 那么,如果有三張圖片並且您只想顯示一個新ID中的兩張怎么辦? 使用此代碼,您應該能夠從零重新創建圖庫圖像。
如我在以下代碼中所述,不要忘記重新初始化prettyPhoto 。
function changeDisplay(e) {
var el= $(e).closest('blockquote');
var principalTitulo = $(e).text();
var principalContenido = el.find(".Contenido:first").val();
var principalId = el.find(".IdNoticia:first").val();
var principalFechaDesde = el.find(".FeDesde:first").val();
var principalFechaHasta = el.find(".FeHasta:first").val();
var principalDescripcion = el.find(".Descripcion:first").val();
var principalImagen = el.find(".imgRuta:first").val();
var galleryImagen = el.find(".imgRuta").val();
// delete the images that are already in the left side
$('.noti_P a').remove();
el.find(".imgRuta").each(function(){
var imgSrc=$(this).val();
console.log(imgSrc);
// create the image for the left side
var photoLink=$('<a>',{rel:'prettyPhoto[gallery1]',href:imgSrc});
var imgTag=$('<img />',{src:imgSrc,width:'100px',height:'100px'});
// put the created tags to the gallery in the left
$('.noti_P').append(photoLink.append(imgTag));
}
// here you should reinitialize your prettyPhoto[gallery1] but please check it
$("a[rel='prettyPhoto[gallery1]']").prettyPhoto();
$("#currentprincipalTitulo").html(principalTitulo);
$("#currentprincipalContenido").html(principalContenido);
$("#currentprincipalId").html(principalId);
$("#currentprincipalFechaDesde").html(principalFechaDesde);
$("#currentprincipalFechaHasta").html(principalFechaHasta);
$("#currentprincipalDescripcion").html(principalDescripcion);
$("#currentprincipalImagen").attr("src", principalImagen);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.